Tweet
Tweet

Slide 1

Slide 1 text

Introduction to Angular 2017/7/7 Frontend Beer Bash #1 @masahiko.asai

Slide 2

Slide 2 text

About Me Masahiko Asai ビズリーチ HRMOS事業部 フロントエンドエンジニア 2011-2014 PHP エンジニア 兼 HTML/JS コーダー（某大手ECサイト） 2015- フロントエンドエンジニア（AngularJS, Angular 4）

Slide 3

Slide 3 text

Angular 4のいいところ！

Slide 4

Slide 4 text

Angular 4 の特徴 フルスタックなプラットフォームであることが大きな特徴。 Web アプリケーションの開発に必要なパッケージが、 「モジュール」という単位で分割されて用意されている。 また、開発をサポートする周辺ツールの整備もGoogle自ら進められている。 1 All-in-one

Slide 5

Slide 5 text

Angular 4 の特徴 Angular のアーキテクチャは、ブラウザ上で動作するアプリのみならず、 サーバサイドのプログラムも構築できるような設計になっている。 iOS/Android で動くWebViewベースのアプリはもちろん、 ネイティブアプリを開発することも可能に。 2 マルチプラットフォーム対応

Slide 6

Slide 6 text

Angular Building Blocks 引用: Angular 2 Architecture https://www.slideshare.net/EyalV/angular-2-architecture

Slide 7

Slide 7 text

Angular Universal

Slide 8

Slide 8 text

Angular Universal Angular Universal ● Angular Universalを導入すると、 サーバサイドレンダリングが可能になる ● パフォーマンス向上施策のひとつとして、 SSRで返して、その後ブラウザ側で Angular アプリケーションを実行する テクニックもある

Slide 9

Slide 9 text

Ionic 2 Ionic 2 + Angular + Cordova を利用してWebView ネイティブアプリを構築できる

Slide 10

Slide 10 text

NativeScript NativeScript でネイティブ iOS/Android アプリケーションも開発が可能

Slide 11

Slide 11 text

Angular Electron Angular Electron でデスクトップアプリケーションも。

Slide 12

Slide 12 text

Browser Support 引用: Angular - Browser Support https://angular.io/guide/browser-support

Slide 13

Slide 13 text

Angular 2 の特徴 ● コンポーネントという単位でモジュールを明確に分割できるようになった ● UI部品をひとつのコンポーネントとして作り、 この部品を組み合わせることで、 画面を作り上げていくイメージ ● AngularJS 時代と同じくHTMLが主役。 インタラクションをHTMLテンプレートに 入れていくスタイル。 3 コンポーネント指向

Slide 14

Slide 14 text

Angular 2 の特徴 ● Microsoftが開発している静的型付けができるJSのスーパーセット。 ● アプリケーション開発において堅牢性を持たせることができる ● Angular アプリケーション、JavaScriptやDartでも開発は可能だけど、 ドキュメントや資料の充実度合いからも TypeScript を推奨している。 4 TypeScript を用いた堅牢性の高い開発

Slide 15

Slide 15 text

早速はじめてみよう

Slide 16

Slide 16 text

とはいえ現実的には… 1. プロジェクトディレクトリを作成 2. package.json のセットアップ 3. Angular をインストール 4. TypeScript をインストール 5. タスクランナーやビルドツールのセットアップ 6. ・・・ 7. ・・・ 8. ・・・

Slide 17

Slide 17 text

とはいえ現実的には… 1. プロジェクトディレクトリを作成 2. package.json のセットアップ 3. Angular をインストール 4. TypeScript をインストール 5. タスクランナーやビルドツールのセットアップ 6. ・・・ 7. ・・・ 8. ・・・ 何もない状態からセットアップするのは大変…

Slide 18

Slide 18 text

Angular CLI Angular CLI

Slide 19

Slide 19 text

Angular CLI とは？ ● Angular アプリケーション プロトタイプを構築できるツール ○ React でいう create-react-app ○ Vue.js でいう vue-cli に相当するもの ● npm でインストールすると、ng コマンドで scaffold が作れるよ ● CLI自体は ember-cli ベースで作られているそう

Slide 20

Slide 20 text

Angular アプリケーションを作るのに 役に立つ周辺ツール・モジュール

Slide 21

Slide 21 text

Angular Augury

Slide 22

Slide 22 text

Angular Augury ● Angular アプリケーションをデバッグするのに便利な Google Chrome 拡張機能 ● React の React DevTools、Vue.js の devtools に相当するもの ● モデルの値やフォームの Valid/Invalid 状態が リアルタイムに確認できる

Slide 23

Slide 23 text

UI Component系 - Angular Material Angular Material

Slide 24

Slide 24 text

UI Component系 - ng-lightning ng-lightning

Slide 25

Slide 25 text

UI Component系 - PrimeNG PrimeNG

Slide 26

Slide 26 text

弊社事例

Slide 27

Slide 27 text

弊社事例 HRMOS（ハーモス）採用管理 現在、AngularJS で構築されているものを、 Angular 4 を全面導入すべく、移行を進めています ビズリーチ 企業様がご利用になる管理画面で一部導入 画面: HRMOS 採用管理 https://hrmos.co/saiyo/

Slide 28

Slide 28 text

アプリケーションと UI Component の分離 UI Components 個々のコンポーネントデザインとインタラクションを実 装。 Atomic Components の考え方をもとにUIパーツを分 解して実装。 App Components アプリケーションは、 UI Componentsを用いてア プリケーションを実装する。 持っているデータをUI Componentsに与えて画 面を描画、ビジネスロジックを実装。

Slide 29

Slide 29 text

Atomic Design 引用: Atomic Design | Brad Frost http://bradfrost.com/blog/post/atomic-web-design/

Slide 30

Slide 30 text

Atomic Components Atom, Molecule, Organism, Ecosystem, Environment 引用: A brief look at Atomic Components https://medium.com/joeydinardo/a-brief-look-at-atomic-components-39cbe71d38b5

Slide 31

Slide 31 text

まとめ

Slide 32

Slide 32 text

さわってみた所感 ● All-in-one なので、必要なものは揃っている。 ● 公式サイトのドキュメントは丁寧 ○ やりたいことは、ある程度公式ドキュメントに載っている ● アップデートが速い、LTSあり ○ 週1回 BugFix Release、月1回 Minor Version Update、半年に1回 Major Version Update ○ 現行のAngular 4は2018年10月までサポート ● angular-cli によってWeb アプリケーションを速く構築できる ○ アプリケーションの開発実装に集中できる環境を作ってくれる ここはイイ！

Slide 33

Slide 33 text

さわってみた所感 ● UI系の外部モジュールの開発がアクティブ ● サービスのAdmin（管理画面）に導入するにはうってつけかなと ここはイイ！

Slide 34

Slide 34 text

さわってみた所感 ● 日本語の情報、ドキュメント、記事はまだまだ少ない ● Angular の採用事例、導入事例がなかなか聞かない ○ 業務用 Web アプリで採用されることが多いから、話題に上がってこない…？ ● 導入コストは高い。TypeScript, Angular, RxJSの習得コストとか… ● 周辺ライブラリ（外部モジュール）はまだβ版が多い ● All-in-oneのため、アプリはどうしても Fat になる ○ Webサイト（LP）に導入するには選択肢に入らないかな ここは課題

Slide 35

Slide 35 text

ご静聴ありがとうございました