はじめに
Windowsのローカル環境での構築手順をまとめています。
概要
下記のアーキテクチャを使用します。
・Node.js
・Visual Studio Code（以下、VScodeと記載）
・Angular
構築手順
Node.jsのインストール
こちらからダウンロードしてください。
node-v14.17.0-x86.msiというファイルがダウンロードされるので実行します。
以下の画像の手順通りに進めてください。
Nextをクリック
チェックを入れて、Nextをクリック
Nextをクリック
Nextをクリック
チェックを入れずにNextをクリック
※仮に入れてインストールしても使わないものが入るだけなので、やり直さなくてもよいです。
Installをクリック
Finishをクリック
正しくインストールされていればnpmコマンドが叩けるようになっています。
コマンドプロンプトを開き、以下のコマンドを実行してください。
npm -v
バージョンが表示されればインストールが成功しています。
npmってなに？
ざっくりいうと色々なライブラリやフレームワークを管理するやつです。
例えばjQueryというJavaScriptのライブラリがありますが、インストールする際は以下のようにコマンドを実行するだけで使用できるようになります。
npm install jquery
バージョンをアップデートしたり、削除したりもできます。
npn経由でダウンロードしたものは一覧で表示でき、どのライブラリがどのバージョンかを確認することが出来ます。
本記事はAngularの構築手順ですが、ReactやVue.jsの構築の際もnpmでインストールすることになりますし、angularにライブラリを入れる際はnpmコマンドでインストールすることがあります。
フロントエンドでは使用頻度が高いので使えるようにしておくとよいと思います。
VScodeのインストール
VScodeとはangularで開発をする際に使うツール(IDE)です。
似たものにvisual studioというツールもありますが、全く別物なので注意してください。
こちらからダウンロードしてください。
VSCodeUserSetup-x64-1.56.2.exeというファイルがダウンロードされるので実行します。
同意するを選択し、次へをクリック
次へをクリック
次へをクリック
PATHへの追加（再起動後に使用可能）はチェック状態で、次へをクリック。
インストールをクリック。
インストールが終わったら完了をクリック。
VScodeを起動すると下記のようなツールが立ち上がります。
VScodeの日本語化
デフォルトだと英語の記載なので、必要な方は日本語化してください。
以下の画像に沿って実行してください。
左側の四角が四つあるアイコンをクリックし、検索バーに「japanese」と入力します。
検索結果に「Japanese Language Pack for Visual Studio Code」がでてくるので、installをクリック。
インストールが完了すると右下にRestartがでてくるので、クリック。
VScodeが再起動し、日本語になっていれば成功です。
Angularのインストール
任意の場所にフォルダを作成してください。
本手順ではデスクトップに「angular」というフォルダを作成します。
作成したフォルダを下記の手順で開いてください。
ファイルをクリックし、フォルダを開くをクリックします。
作成したフォルダを開くと下記のようになります。
画像のように上部にangularと出ていれば開けています。
Angularをインストールするためにターミナルをクリックし、新しいターミナルをクリックします。
下部にターミナルというタブが表示されればOKです。
以下のコマンドを入力しAngularをインストールします。
npm install -g @angular/cli
正常にインストールできたかを確認します。
以下のコマンドを入力します。
ng version
以下の画像のようにバージョンが出てくれば成功しています。
※ngとはAngularを実装する上で使うコマンドです。
プログラミング時でもngIfやngForなど出てきますので、ngと出たら「あぁ、Angular特有のやつね」と思ってください。
試しにプロジェクト（テスト用WEBサイト）を作って、テスト起動してみる。
ターミナルに以下のコマンドを入力してください。
プロジェクト（アプリ）のひな型が作成されます。
ng new my-app
Would you like to add Angular routing? と聞かれますが、yesでよいです。
Which stylesheet format would you like to use? と聞かれますが、これもどれでもよいです。
本手順ではSCSSを選択しています。
Packages installed successfully.と出れば正常に作成されています。
Angularには作ったものをローカルWEBサーバーにコンパイルし、すぐに確認できる機能があります。
テスト起動するために以下のコマンドを入力してください。
ng serve
Compiled successfully と表示されればOKです。
ブラウザで以下のURLを開いてみてください。
http://localhost:4200
以下のように表示されていれば成功です。
Angularが用意したテスト用のページが表示されます。
終わりに
以上の手順でAngularで実装できるところまで出来ました。
実際にAngularで実装してみたい方は公式のチュートリアルを取り組むことをお勧めします。
ルーティング、ページ遷移前後に共通処理を入れる方法、APIの実行の仕方など、学べることがたくさんあります。
Angularのチュートリアル
https://angular.jp/tutorial
公式でもローカルにAngularを構築する手順を公開しています。
本記事でも参照させて頂きました。
https://angular.jp/guide/setup-local
↧