今からでも遅くない！2から始めるAngularJS

2017.03.14

JavaScript Bash!!!

GoldSpot Media Inc. 小橋大助

自己紹介

小橋大助

株式会社ゴールドスポットメディア

　　シニアアーキテクト兼フロントエンドスペシャリスト

Webのフロントエンドから、ネイティブアプリやUnityゲームなんかまで、

フロントエンド・ユーザビリティに関わるコードを中心に書いています。

会社紹介

株式会社 ゴールドスポットメディア

動画・リッチメディア広告のクリエイティブ制作と第三者配信(3PAS)の会社

フロントエンドもサーバサイドもjs系が多いです

● MongoDB● node.js(Express, LoopBack)● AngularJS● Angular2● React● Erlang 　　・・・を社内で使用しています。

Angular2 の話をします

Angular2

Angular JS 2

なぜ Angular「JS」２ではない？

➢ 開発がTypeScriptベースになった

○ 利用もTypeScriptがおすすめ

○ (JSでの使用も可能ではある )

○ (Dartでの使用も可能ではある ...)

➢ TypeScriptはJSの上位互換

○ JS(ES2016)の機能は完全に持ちつつ、おしゃれな新機能を追加した

➢ ・・・「.js」を付けないのが流行り、というのもある

○ React, Vue も付けなくなってる

○ そもそもJavaScriptかECMAScriptか？とか

➢ とにかく Angular2 を使うときは、 TypeScriptにしよう！

Angular2は超簡単

Angular2は超簡単

$ npm install -g angular-cli$ ng new PROJECT-NAME $ cd PROJECT-NAME$ ng serve

４行でアプリ起動！

たった４行のみでも内部的には

➢ webpackのビルド環境

➢ typescriptコンパイル環境

➢ ミニファイ・難読化

➢ 使用してない機能・関数群を削除してファイルサイズ削減

➢ ユニットテストコードの雛形作成

➢ e2eテストコードの雛形作成

　・・・などをしてくれています。

angular-cliで４行アプリ

Angular Component

Angular Component➢ カスタムタグの定義

➢ cssはこの中に限定される(Scoped CSS)○ *{ font-size: 99px; } とかやっても、影響範囲は当該コンポーネント内だけ

➢ 変数・CSS・内部HTML…すべてをスコープ内に閉じ込める

➢ (Reactと違い)普通のHTMLや普通のCSS/SASSで書ける

➢ デザイナに優しい！

※ イメージ

Reactよりデザイナに優しい！

Angular vs React➢ Angularはフレームワーク。Reactはビュー・ライブラリ

○ React単体では、HTTP-GETすら出来ない。

➢ ReactはJSX。Angularは素のHTML & CSS○ デザイナにわかりやすい

➢ サニタイズ、WebComponent、CSSモジュール…○ Reactでは意識的に使う。Angularでは無意識に使うことができる

➢ Reactの最初のリリースは2013/05Angular(2.x)の最初のリリースは 2016/09！最新だ！

○ ・・・ちょっと卑怯な比較 :-P

➢ AngularはTypeScriptを使っているので型安全○ ReactにもFlow(FlowType)がある

Angular が やや優位！――サーバサイドレンダリング・

　　ネイティブアプリ対応でも　　　　　Reactと、ほぼ同格！

　　

TypeScript vs Flow(FlowType)➢ Flow　　　：FaceBookが作ったjs型チェックシステム

➢ TypeScript ：Microsoftが作った型付きAltJS

➢ Flowは…○ 型制約・型推論が強い。ちょっと強すぎ。

○ 既存のjsコードに徐々に入れることが可能。

■ 逆に言うと、型チェックされない箇所が許される

➢ TypeScriptは…○ JavaやC#によく似た型システムを持つ。

○ 言語拡張としての追加機能がある。 Decorator, Enum….○ 既存のjsコードとは、ライブラリとして連携することは可能

基本的に、両者はよく似てる。同じコードで両者が動作する。

TypeScriptとFlowの差は　　　…あんまり無い

AngularJS(1) vs Angular(2)➢ 両者はほとんど全くの別物

➢ 学習コスト○ Angular(2) : シンプル・一貫してる・学習コストが小さい

○ Angular(1) : 複雑・いくつものやり方が混在・学習コストが高い

➢ 速度○ もう圧倒的にAngular2

➢ 両者共通のよい点○ DI○ フルスタック・フロントエンド・フレームワーク

Angular? AngularJS1? Angular2?

Just “Angular”!

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」になっちゃう

Angular4➢ 今年の３月にリリース予定。

○ もうすぐ！

○ 3/1に rc.2 が出ています！

➢ 機能追加？破壊的変更？○ ありません！2.xで動いたコードは基本的に完全に動きます

○ 基本的には、機能追加のみのリリースです

○ 完全な下位互換性があります

➢ 2.xにあった機能が無くなったりしない？○ なくなりません。

○ 4で非推奨(deprecated)になっても、削除されるのは 6.0。１年後。

➢ なんで4？3は？○ ３は諸事情で飛ばされました …

Angular “2” を始めよう？

“Angular” を始めよう！

“Angular” を始めよう！

――２から！

ご清聴ありがとうございます。