Angular – Visual Studio Code の利用 on Ubuntu No.49


自己投資としてチャレンジしている内容を 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/ を開きます。

localwebsite

▼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 を押します。

sampletypescript

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

Updatedlocalsite

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. サイトを表示し、タイトルの文言と大きさが変更されていることを確認します。

Updatedlocalsite2

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 に変更します。

launch.json

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

app.compnent.ts

▼4. 参考情報

Angular TypeScript Tutorial in Visual Studio Code

以上です。参考になりましたら幸いです。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です