目的

この記事では、Angularの雛形プロジェクトの作成手順とローカルサーバーの実行確認手順について記載する。

雛形プロジェクトの作成

以下、雛形プロジェクトの作成手順について記載する。

• プロジェクトフォルダの作成
  コマンドプロンプトから下記フォルダ作成コマンド（mkdir）を実行し、ユーザーフォルダ直下にプロジェクトフォルダ angular-pj を作成する。
  
  ※ プロジェクトフォルダの作成場所とフォルダ名は任意だが、解説的な利便性上、上記のパス/プロジェクトフォルダ名とする。
  

  > mkdir %UserProfile%\angular-pj
  

  
  

• 雛形プロジェクトの作成
  下記手順で雛形プロジェクトの作成を行う。

  • フォルダ移動
    コマンドプロンプトから下記カレントのディレクトリ移動コマンド（cd）を実行し、プロジェクトフォルダ angular-pj に移動する。
    

    > cd %UserProfile%\angular-pj
    

    
    

  • 雛形プロジェクト作成
    コマンドプロンプトから下記プロジェクト作成コマンド（ng new）を実行し、雛形プロジェクトを作成する。
    ※ プロジェクト名は任意だが、解説的な利便性上、template-pj とする。

    > ng new template-pj
    

    
    

  • ルーティング機能の追加確認
    Angularのルーティング機能を追加するか（Would you like to add Angular routing?）入力待ち状態となる。
    
    ルーティング機能とは、リクエストURLと以降で説明するコンポーネントの紐付けを行う仕組みのことで開発効率的にメリットが多いため、追加（y）を入力する。
    
    

  • スタイルシート形式の確認
    スタイルシート形式を選択する（Which stylesheet format would you like to use?）入力待ち状態となる。
    
    選択は任意だが最も普及している SCSS を選択する。
    ※ 下記、各スタイルシート形式の概要。

    • CSS
      Webページのスタイルを指定するためのブラウザが直接認識できるの言語。
      以降の SCSS、Sass、Less は、全てコンパイルによって CSS 化されブラウザが認識する。

    • SCSS
CSS を拡張したもので記法は、SCSS 記法（CSS に似た記法）で記述する。

    • Sass
CSS を拡張したもので記法は、SASS 記法（Ruby に似た記法）で記述する。

    • Less
CSS を拡張したもので、動的なスタイルシートを定義できる。

    
    

  • インストール確認
    パッケージが正常にインストールされました。（packages installed successfully.）が表示されれば正常終了。
    
    ※ git に関するコマンドエラーが表示されるが、git をインストールしてないが故の想定内のエラー。
    
    

以上で、雛形プロジェクトの作成が完了。

ローカルサーバーの実行確認

以下、ローカルサーバーの実行確認手順について記載する。

• 雛形プロジェクトを開く
  Visual Studio Codeを起動し、[作業の開始]タブ内にある[フォルダーを開く]をクリックし、上記で作成した雛形プロジェクトの template-pj を開く。
  
  

• ターミナルを開く
  メニューの[ターミナル]をクリック後、[新規しいターミナル]を選択する。
  
  

• ローカルサーバーを起動する。
  ターミナルから下記サーバー起動コマンド（ng serve）を実行する。
  ※ --open は、ローカルサーバーを起動後、ブラウザでアプリを開くオプション。

  ng serve --open
  

  
  

• ローカルサーバーの起動確認
  ターミナルに Compiled successfully. が表示され、ブラウザでアプリの起動画面（template-pj app is running!.）が表示されれば、正常にローカルサーバーが起動できている。
  
  
  
  

• ローカルサーバーの停止方法
  停止方法は、基本ターミナルで Ctrl + C を押下して停止する。
  （ターミナル（Powershell）で実行中のローカルサーバー起動コマンドを中断すれば停止するため、ターミナルやVisual Studio Code自体を閉じても停止する。）
  
  ※ ターミナルで Ctrl + C 押下後、ローカルサーバー起動コマンドを中断し、入力待ち状態となる。