自己投資としてチャレンジしている内容を Blog で公開しています。 今回は Angular を Visual Studio Code 上で実行したいと思います。
▼1. Visual Studio Code を利用して Angular のコードを書いてみる
Visual Studio Code は Java 以外にも C や C++, C# , Python など色々な言語を Windows, Linux, Mac 上で実行できる環境を提供しています。今回は以下のドキュメントを参考に Angular を試してみます。
Angular は Google より提供されている Web 開発プラットフォームです。TypeScript ベースにビルドされています。Angular には以下の特徴があります。(参考情報) Angular – What is Angular?
- コンポーネントを使ったフレームワーク。拡張性のある Web Application を実現
- 統合ライブラリーのコレクションの利用し、ルーティング、フォーム管理、クライアントサーバーとの通信等、幅広い機能を実現
- 開発ツールを提供し、開発、ビルド、テスト、コードの更新など可能
▼2. 事前準備
2-1. Ubuntu 20.04.2 LTS の利用/インストール
(参考情報) https://releases.ubuntu.com/20.04/
2-2. Visual Studio Code のインストール
sudo snap install --classic code
2-3. curl のインストール
sudo apt install curl
2-4. Node.js のインストール
Node.js JavaScript runtime および npm をインストール
#Using Ubuntu curl -fsSL https://deb.nodesource.com/setup_18.x |sudo -E bash - sudo apt-get install -y nodejs
(参考情報) distributions/README.md at master · nodesource/distributions (github.com)
2-5. Angular CLI のインストール
sudo npm install -g @angular/cli
2-6. Angular アプリケーションの作成
アプリ作成のため、以下のコマンドを実行します。
(例) my-app はアプリケーションのフォルダー名となります。
ng new my-app
以下の プロンプトが表示され、CSS (Cascading Style Sheets) を作成するための CSS preprocessor の選択を聞かれます。今回は SCSS を選択します。各オプションの説明は以降の (**) に記載します。
? Would you like to add Angular routing? Yes ? Which stylesheet format would you like to use? (user arrow keys) >CSS SCSS [ https://sass-lang.com/documentation/syntax#scss ] SaSS [ https://sass-lang.com/documentation/syntax#the-indented-syntax] LeSS [ http://lesscss.org
(**) CSS は CSS preprocessor を利用しないことを意味します。便利機能を使わない選択です。SCSS (Syntactically Cascading Style Seets) もしくは SaSS (Syntactically Awesome Style Sheets) は便利機能を利用しますが、SaSS はブロックやセミコロンが省略できます。Less (Leaner style Sheets) は Less preprocessor を使います。
(参考情報) Sass: Syntax (sass-lang.com), https://lesscss.org/
2-7. Web Server の起動と、browser で Web application を開く
cd my-app ng serve
(出力例) ✔ Browser application bundle generation complete. Initial Chunk Files | Names | Raw Size vendor.js | vendor | 1.97 MB | polyfills.js | polyfills | 294.79 kB | styles.css, styles.js | styles | 173.68 kB | main.js | main | 49.79 kB | runtime.js | runtime | 6.51 kB | | Initial Total | 2.49 MB Build at: 2022-04-23T06:18:15.949Z - Hash: xxxx - Time: 11680ms ** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ ** ✔ Compiled successfully.
2-8. Web サイトを開く
http://localhost:4200/ を開きます。

▼3. Web サイトで Hello World を表示する
3-1. Angular application を VS Code で開く
cd my-app code .
3-2. Web サイトのタイトルを Hello World に変更
3-2-1. 作成した Web application の src -> app フォルダに移動し、app.component.ts の title を変更します。
既定で my-app となっている title を Hello World にします。変更を保存するため、VS Code のメニューにある File から Save をクリックするか Ctrl+S を押します。

3-2-2. Web サイトのタイトルが my_app から Hello world に代わっていることを確認します。

3-2-3. 今度は Web サイトの html を変更し、サイトの表示を変えます。
作成した Web application の src -> app フォルダに移動し、app.component.html ファイルの 344 行目 <span></span> の値を変更します。以下を参考にフォントのサイズと文言を変更します。
変更前 ---------- <span>{{ title }} app is running!</span> 変更後 ---------- <span style="font-size: 36px;">Welcome to {{ title }} !!!</span>
3-2-4. サイトを表示し、タイトルの文言と大きさが変更されていることを確認します。

3-3. 最後に、デバッグ方法を紹介します。
3-3-1. Angular コードをデバッグするため、デバッグしたいコード (例) app.components.ts の title = ‘Hello World’; 左側をクリックし赤丸が表示されたら Run View の Ctrl+Shft+D のキーを押します。
3-3-2. 次にギアボタン、もしくは “Create a lunch.json” リンクをクリックし、bebugger configuration file である launch.json を開きます。”Add Configuration” が表示されたら “Edge:launch” を選択します。以下のように launch.json に追記された内容を変更します。Type を Chrome や、url のポートを 4200 に変更します。

3-3-3. F5 をクリックし Debug 実行します。Break point で止まった後 F10 で step 実行し、AooComponent の title の値が ‘Hello World ‘ であることを確認します。

▼4. 参考情報
Angular TypeScript Tutorial in Visual Studio Code
以上です。参考になりましたら幸いです。