もくじ

はじめに

この連載では、フロントエンドフレームワーク「Angular」をこれから学んでみたい方向けの入門コンテンツをお届けしたいと思います。

Angularには 公式のチュートリアル が用意されていますが、内容がやや盛りだくさんで、まったくの初心者には少しハードルが高いという声も耳にします。

そこで、公式のチュートリアルを始める前に、もっと気軽に トータル1時間でさらっと基本を学んでいただける ような内容にできればと考えています。

実際に簡単なToDoアプリを作りながら、Angularの基本機能を学んでいただく流れになります。ぜひ最後までお付き合いください。

今回のゴール

Angularでは、「Angular CLI」というCLIツールが用意されています。

通常、Angularでアプリを開発する場合、Angular CLIを使ってアプリケーションの雛形を生成するところから第一歩が始まります。

連載第一回である今回は、ひとまず難しいことは考えずに、この一歩目を体験してみることにしましょう。

Angular CLIをインストール

Angular CLIは、npm 経由で提供されています。

以下のように @angular/cli パッケージをグローバルインストールすることで、Angular CLIが提供するコマンド群を使えるようになります。

npm install -g @angular/cli

インストールができたら、以下のように打ち込んでみましょう。

ng version

以下のようなアスキーアートとともに、インストールされたAngular CLIのバージョンが表示されたと思います。

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 8.3.7
  :
  :

@angular/cli パッケージをグローバルインストールしたことで、ng というコマンドが使えるようになったということです。

表示されているバージョン番号（8.3.7）は本稿執筆時点の最新版です。

このバージョンのAngular CLIは、nodeのバージョンが 10.9.0以上 かつ 13.0.0未満 であることが 前提となっている ため、もしインストールされているnodeのバージョンが古すぎるような場合は、あらかじめnodeのバージョンをアップデートしておきましょう :+1:

この ng コマンドにはたくさんのサブコマンドが用意されており、Angularを使ったアプリ開発を様々な場面でサポートしてくれます。

ng help （あるいは単に ng ）を実行することで、利用可能なサブコマンドの一覧を確認できます。

アプリケーションの雛形を生成する

それでは早速、ng コマンドを使ってAngularアプリケーションの雛形を生成してみましょう。

適当な作業用ディレクトリに移動して、以下のコマンドを実行してみてください。

$ ng new angular-todo

実行すると、いくつか質問が表示されます。ここでは、以下のように回答してください。

  • ? Would you like to add Angular routing? No
  • ? Which stylesheet format would you like to use? SCSS

質問に答えると、あとはしばらく待って、

Successfully initialized git.

といった成功を表すメッセージが出力されれば完了です。

ng new コマンドの引数で指定した angular-todo という名前のディレクトリが作られているので、

$ cd angular-todo

してください。

生成された雛形アプリを実行してみる

これで雛形の生成は完了です。実際に動かしてみましょう。

ここでも ng コマンドを使います。以下のコマンドを実行すると、ローカルサーバーが立ち上がり、自動的にブラウザが開きます。

$ ng serve --open

おめでとうございます！ :tada:

無事、AngularでHello Worldすることができました！（Hello World とはどこにも書いてませんが :sweat_smile: ）

ものすごく簡単でしたね！

次回予告

というわけで、今回はAngular CLIをインストールして、ng new コマンドを使ってアプリケーションの雛形を生成しました。

次回 は実際にアプリのソースコードを触ってみて、どういった仕組みでページが作られているのかを学んでいきます。

お楽しみに！ :raised_hands: