LoginSignup
2
2

More than 1 year has passed since last update.

@shuji-k(shuji k)in株式会社ベーシック

AngularでHello,world／環境準備

Last updated at Posted at 2021-07-19

はじめに

この記事では環境作成からデプロイ用のプロダクトビルドまでを解説します。
Angularのプロジェクト作成方法は1つしかありませんが、そのベースとなるNode.jsの構築方法は大きく3種類存在します。

  1. Windows Installer による導入
    単一環境での動作や初心者はこちらをおすすめします

  2. 手動による導入
    複数バージョンの環境が必要な場合や、上記でうまく構築出来なかった場合に、こちらをおすすめします

  3. WSL2 + Docker Desktop による導入
    Docker HubにNode.jsのイメージは有りますが、Angularのローカル実行に難があるため、初心者の方にはおすすめしません

ここでは、上記1,2の方法を解説します。

1. Node.js 導入

1.1. Windows Installer による導入

  1. ダウンロードバージョン選択

本解説では、v14.16.1 の Node.js を使って環境を構築しています。
下記リンクから、Node.js のリリース一覧があるので、該当バージョンの「ダウンロード」をクリックしてください。
Node.js リリース一覧
01_download.png

  1. インストーラファイルダウンロード
    使用しているPCに合わせて、64bit/32bit インストーラを選んで、リンクをクリックします。

    • 64bit: node-v14.16.1-x64.msi
    • 32bit: node-v14.16.1-x86.msi
      02_filelist.png

  2. インストーラ実行
    ダウンロードしたインストーラを起動し、インストーラに従ってNode.jsをインストールします。
    途中、「Tools for Native Modules」として、実行に必要なツールをインストールするか聞かれます。
    Visual Studio の C/C++ コンパイラや Pyhton の実行環境があれば良いですが、なければ一緒にインストールしましょう。

  3. インストールの確認
    コマンドプロンプトを開き、下記コマンドを実行してnode.jsのバージョンが表示されれば、インストール成功です。

コマンドプロンプト
node -v

03_prompt.png

1.2. 手動による導入

  1. ダウンロードバージョン選択(上記1.1.の1.と同じ)
    本解説では、v14.16.1 の Node.js を使って環境を構築しています。
    下記リンクから、Node.jsのリリース一覧があるので、該当バージョンの「ダウンロード」をクリックしてください。
    Node.js リリース一覧

  2. zipファイルのダウンロード
    使用しているPCに合わせて、64bit/32bitのzipファイルを選んで、リンクをクリックします。

    • 64bit: node-v14.16.1-win-x64.zip
    • 32bit: node-v14.16.1-win-x86.zip 12_filelist.png

  3. Node.jsの解凍とグローバルインストール先フォルダの作成
    ダウンロードしたフォルダを解凍します。解凍先は、今後Node.jsを管理し続けるディレクトリが良いです。
    この解説では、Cドライブ下に C:\node\env1フォルダを作成し、そこに解凍します。
    また、Node.jsのグローバルインストール先フォルダglobalも作成します。
    13_folder.png

  4. 実行バッチファイルの作成

    node.exeやnpmへのパスとnpmの設定、環境変数の設定を行うバッチファイルを作成します。
    下記をコピペして「env1.bat」ファイルを、C:\node\env1フォルダに作成すれば良いです。

    env1.bat
    @echo off

REM node.exeのフォルダ名
set NODE_FOLDER=node-v14.16.1-win-x64

REM 以下変更不要

REM パス作成
set BAT_HOME_RAW=%~dp0
call set BAT_HOME=%%BAT_HOME_RAW:~0,-1%%
set PATH_NODE=%BAT_HOME%\%NODE_FOLDER%
set PATH_GLOBAL=%BAT_HOME%\global

REM パスを通す
set PATH=%PATH_NODE%;%PATH_GLOBAL%;%PATH%

REM node.jsの設定変更
set NODE_PATH=%PATH_GLOBAL%

REM npmの設定変更
call npm config set prefix %PATH_GLOBAL%
call npm config set globalconfig %PATH_NODE%\etc\npmrc
call npm config set globalignorefile %PATH_NODE%\etc\npmignore

REM 待機
cmd /k

  5. インストール確認
    上記で作った「env1.bat」をクリックし、下記コマンドを実行してnode.jsのバージョンが表示されれば、インストール成功です。

    コマンドプロンプト
    node -v

    手動による導入の場合、今後「プロンプトを開いて実行する」という記述は、「env1.batを開いて実行する」という意味になります。

2. angular/cli 導入

Angular のプロジェクト作成は、公式で提供されているCLI (Command Line Interface)を使います。
そこでまず、CLI を Node.js のパッケージ管理ツール(npm)を使ってインストールします。

  1. インストール
    プロンプトを開いて以下コマンドを実行してください。

    コマンドプロンプト
    npm install -g @angular/cli@11.2.14

    下記の様なメッセージが表示されたら、インストール完了です。

    コマンドプロンプト
    added 999 packages from 999 contributors in 29.789s

    (999 は適切な数字が入ります)

  2. インストール確認
    プロンプトから、下記コマンドを実行して、Angularのバージョンが表示されたら成功です。

    コマンドプロンプト
    ng version

3. プロジェクト作成

  1. プロンプトを開く
    プロンプトを開き、プロジェクトを作成するディレクトリに移動します。
    この解説では、C:\node\projectに、my-appというプロジェクトを作ります。

    コマンドプロンプト
    cd C:\node\project

  2. プロジェクト作成開始
    プロンプトに、下記コマンドを実行します。

    コマンドプロンプト
    ng new my-app

  3. strict モード設定
    上記コマンドを実行すると、下記のように聞かれるので、y を入力します。
    「Do you want to enforce stricter type checking and stricter bundle budgets in the workspace?」
    メッセージの参照URLを読むとわかりますが、構文・型、ビルド後ファイルサイズ等の厳格なチェックが行われるようになります。
    コード品質や、Angularのアップデート時の手間を削減するために、有効にしておきましょう。

  4. ルーターの設定
    次に、以下のように聞かれるので、y を入力します。
    「Would you like to add Angular routing? (y/N)」
    Angular には画面の遷移を制御するルーターという機能があります。
    この機能の有無を予め有効にするのか？と問われています。

  5. スタイルシートの設定
    次に、以下のように聞かれてきます。
    「Which stylesheet format would you like to use?」
    CSS, SCSS, Sass, Less, Stylusの中から、標準で使用するスタイルシート言語を選択できます。
    この解説では、SCSSを主に使おうと考えているので、SCSSを選択してください。

  6. 完了
    「Successfully initialized git.」とプロンプトに表示されたら、インストール完了です。
    C:\node\project\my-app ディレクトリを開き、angular.json ファイルや、node_modules フォルダがあることを確認してください。

4. ローカル実行

Angular のローカル実行として、Node.js でWebサーバを構築し、その上で開発中のアプリを実行します。
以下にその手順を記述します。

  1. プロンプトを開く
    プロンプトを開き、前章で作成したmy-appに移動します。

    コマンドプロンプト
    cd C:\node\project\my-app

  2. ローカル実行のコマンド実行
    以下のコマンドをプロンプトから実行します。
    Compiled successfully.とプロンプトに表示されれば成功です。
    Angular ではローカルファイルの変更を検知し、ブラウザを自動でリロードし変更を反映する仕組みを取っています。
    そのため、本コマンド後は常に実行状態になります。

    コマンドプロンプト
    ng serve

  3. ブラウザから動作確認
    動作確認したいブラウザを開き、下記アドレスへアクセスします。
    デフォルトページが表示されれば成功です。

    http://localhost:4200

14_デフォルトページ.png

5. ビルド

プロダクト環境のWebサーバへデプロイするためのビルド方法について、記述します。

  1. プロンプトを開く
    プロンプトを開き、前章で作成したmy-appに移動します。

    コマンドプロンプト
    cd C:\node\project\my-app

  2. ビルドコマンドの実行
    以下コマンドを実行します。
    エラーメッセージ等が表示されず、main.js, polyfills.js, runtime.js, styles.css の作成が完了したメッセージが表示されれば完了です。

    コマンドプロンプト
    ng build --prod

  3. ビルドファイルの出力先
    C:\node\project\my-app\dist\my-app にビルド済みファイルが出力されます。
    フォルダ内のファイルと、デプロイ先Webサーバに必要なファイル(web.config、.htaccess等)を作成すれば、Webサーバ上で動作します。

6. app.component.html の整理

Angular ではデフォルトのページ内容を、src/app/app.component.htmlに記述しています。
ただし、今後の開発にあたって、このページ内容は不要なので、最小限の記述に変更します。
app.component.htmlの内容を以下の1行だけに変更します。

app.component.html
<router-outlet></router-outlet>

以上で、環境の作成が終わります。

メニューに戻る

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
2