Download as PDF, PPTX
今からでも遅くない！ 2から始めるangular js
- 1.
- 2.
- 3. 会社紹介 株式会社 ゴールドスポットメディア 動画・リッチメディア広告のクリエイティブ制作と第三者配信(3PAS)の会社 フロントエンドもサーバサイドもjs系が多いです ● MongoDB ●node.js(Express, LoopBack) ● AngularJS ● Angular2 ● React ● Erlang ・・・を社内で使用しています。
- 4.
- 5.
- 6.
- 7. なぜ Angular「JS」２ではない？ ➢ 開発がTypeScriptベースになった ○利用もTypeScriptがおすすめ ○ (JSでの使用も可能ではある ) ○ (Dartでの使用も可能ではある ...) ➢ TypeScriptはJSの上位互換 ○ JS(ES2016)の機能は完全に持ちつつ、おしゃれな新機能を追加した ➢ ・・・「.js」を付けないのが流行り、というのもある ○ React, Vue も付けなくなってる ○ そもそもJavaScriptかECMAScriptか？とか ➢ とにかく Angular2 を使うときは、 TypeScriptにしよう！
- 8.
- 9. Angular2は超簡単 $ npm install-g angular-cli $ ng new PROJECT-NAME $ cd PROJECT-NAME $ ng serve
- 10.
- 11. たった４行のみでも内部的には ➢ webpackのビルド環境 ➢ typescriptコンパイル環境 ➢ミニファイ・難読化 ➢ 使用してない機能・関数群を削除してファイルサイズ削減 ➢ ユニットテストコードの雛形作成 ➢ e2eテストコードの雛形作成 ・・・などをしてくれています。 angular-cliで４行アプリ
- 12.
- 13. Angular Component ➢ カスタムタグの定義 ➢cssはこの中に限定される(Scoped CSS) ○ *{ font-size: 99px; } とかやっても、影響範囲は当該コンポーネント内だけ ➢ 変数・CSS・内部HTML… すべてをスコープ内に閉じ込める ➢ (Reactと違い)普通のHTMLや 普通のCSS/SASSで書ける ➢ デザイナに優しい！ ※ イメージ
- 14.
- 15. Angular vs React ➢Angularはフレームワーク。Reactはビュー・ライブラリ ○ React単体では、HTTP-GETすら出来ない。 ➢ ReactはJSX。Angularは素のHTML & CSS ○ デザイナにわかりやすい ➢ サニタイズ、WebComponent、CSSモジュール… ○ Reactでは意識的に使う。Angularでは無意識に使うことができる ➢ Reactの最初のリリースは2013/05 Angular(2.x)の最初のリリースは 2016/09！最新だ！ ○ ・・・ちょっと卑怯な比較 :-P ➢ AngularはTypeScriptを使っているので型安全 ○ ReactにもFlow(FlowType)がある
- 16.
- 17. TypeScript vs Flow(FlowType) ➢Flow ：FaceBookが作ったjs型チェックシステム ➢ TypeScript ：Microsoftが作った型付きAltJS ➢ Flowは… ○ 型制約・型推論が強い。ちょっと強すぎ。 ○ 既存のjsコードに徐々に入れることが可能。 ■ 逆に言うと、型チェックされない箇所が許される ➢ TypeScriptは… ○ JavaやC#によく似た型システムを持つ。 ○ 言語拡張としての追加機能がある。 Decorator, Enum…. ○ 既存のjsコードとは、ライブラリとして連携することは可能 基本的に、両者はよく似てる。同じコードで両者が動作する。
- 18.
- 19. AngularJS(1) vs Angular(2) ➢両者はほとんど全くの別物 ➢ 学習コスト ○ Angular(2) : シンプル・一貫してる・学習コストが小さい ○ Angular(1) : 複雑・いくつものやり方が混在・学習コストが高い ➢ 速度 ○ もう圧倒的にAngular2 ➢ 両者共通のよい点 ○ DI ○ フルスタック・フロントエンド・フレームワーク
- 20.
- 21.
- 22. Angular 2 でなく、Angularと呼ぼう ➢AngularJS(1.x)とAngular(2.x以降)は別物 ○ 1.x → 2.x への移行は、ほぼ書き直しに。 ➢ Angular(2.x以降)は今後は半年に一度メジャーアップデート予定 ○ 2, 4, 5, 6, 7… と半年ごとに ○ 個々のバージョンでは下位互換性がある ➢ バージョン番号が目まぐるしく変わる＆そこには下位互換性があるので 単に「Angular」と呼ぶのを推奨 ○ 「Angular2」は、来年には「Angular5」や「Angular6」になっちゃう
- 23. Angular4 ➢ 今年の３月にリリース予定。 ○ もうすぐ！ ○3/1に rc.2 が出ています！ ➢ 機能追加？破壊的変更？ ○ ありません！2.xで動いたコードは基本的に完全に動きます ○ 基本的には、機能追加のみのリリースです ○ 完全な下位互換性があります ➢ 2.xにあった機能が無くなったりしない？ ○ なくなりません。 ○ 4で非推奨(deprecated)になっても、削除されるのは 6.0。１年後。 ➢ なんで4？3は？ ○ ３は諸事情で飛ばされました …
- 24.
- 25.
- 26.
- 27.