こんにちは、フロントエンドエンジニアのねだです。 今回は Startup Angular にオンライン参加し、同イベントの新たな試みとして行われたハンズオンで新たな Angular を体感した話を書いてみたいと思います。
Startup Angular は Angular を採用しているスタートアップによる、Angular 開発の知見などを発信するイベントです。弊社エモーションテックは、前回に引き続きスポンサーとして参加させていただきました。
2 月 16 日に atama plus 株式会社さんのオフィスで開催された第 7 回の Startup Angular では、このイベントでは初めてとなるハンズオンの時間がありました。
ハンズオンはkomura-cさんによって行われ、資料を見ながら進めていくスタイルでした。
近年のAngularの目玉機能が凝縮されていて、新しいAngularを知る入り口として非常に良いものでした。本記事では感想を交えて、当日行われたハンズオンの内容を紹介したいと思います。
コンポーネントを知ろう
ここではAngularのコンポーネントの基本構成や設定について触れ、少しずつ修正を加えながら理解を深めていくという内容でした。
Templateの修正や変数の設定などの基礎的な要素を丁寧に説明することで、他のフロントエンドライブラリやフレームワークの経験がある人や過去にAngularやAngularJSに触れたことがある人にも非常にわかりやすい内容だな、と感じました。
Control FlowでTodoアプリケーションを作ろう
ここでは Todo リストの作成を通して、Angualr の新しい Control Flow 構文の使い方を学びました。
Angularは今まで *ngIf や *ngFor 、*ngSwitchなどの構造化ディレクティブを使っていましたが、Control Flow では@if や @forという形で、 JavaScript / TypeScript 等の制御文により近い記述方法になっています。
構造化ディレクティブと比較すると、下記のように記述方法が変わります。
構造化ディレクティブでの記述
<!--html --> <ng-container *ngIf=”items.length > 0; else elseBlock”> <ul><li *ngFor="let item of items;trackBy: trackBy">{{ item.name }}</li></ul> </ng-container> <ng-template #elseBlock > <ul><li>There are no items.</li></ul> </ng-template >
// typescript trackBy(index: number, item: Item) { return item.name; }
Control Flowでの記述
<!--html --> <ul> @for (item of items; track item.name) { <li> {{ item.name }}</li> } @empty { <li> There are no items.</li> } </ul>
ハンズオンで作成した Todo リストは、短いコードの中でControl Flowの構文をカジュアルに試すことができるアプリケーションになっていました。
Signalsでクッキーのレシピを表示してみよう
ここではクッキーのレシピを表示するアプリケーションの実装を通じて、Signals の使い方を学びました。
シンプルな書き込み可能Signalを設定し、データバインディングを利用したリアクティブな値の更新のやり方と、算出Signalの機能と利便性を伝える内容です。
数字を入力するわけではなく、スライダーを使ってクッキーの枚数を変動させるインターフェースとなっており、 ドラッグするとレシピの数量がコロコロ変わるのが操作していて楽しく、とても良いチョイスだと感じました。
参加した感想
今回のハンズオンは、これから Angular を学ぶ人や、まだ新機能を触ったことがない人にとって、最適なタイミングで学ぶきっかけを与えてくれる内容だったと思います。
最近のAngularを知らない人に「今の Angular ってどんな感じ？」と聞かれたら、このハンズオンの内容を紹介したいと思います。
今回、私は残念ながら現地に行くことはできませんでしたが、オンラインでも十分に楽しめる、そして為になる内容でした。次回は現地に足を運びたいです。
おわりに
以上、Startup Angularのハンズオン体験記でした！
エモーションテックでは顧客体験、従業員体験の改善をサポートし、世の中の体験を変えるプロダクトを開発しています。
フロントエンドの開発フレームワークとして Angular を使用しており、ここで挙げたような機能を実際に利用しているプロダクトもあります。
今回の記事で弊社に興味を持っていただいた方は、ぜひ採用ページもご覧ください。
