今からでも遅くない! 2から始めるangular js
-
Upload
kohashi-daisuke -
Category
Engineering
-
view
97 -
download
3
Transcript of 今からでも遅くない! 2から始めるangular js
今からでも遅くない!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」2ではない?
➢ 開発が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
4行でアプリ起動!
たった4行のみでも内部的には
➢ webpackのビルド環境
➢ typescriptコンパイル環境
➢ ミニファイ・難読化
➢ 使用してない機能・関数群を削除してファイルサイズ削減
➢ ユニットテストコードの雛形作成
➢ e2eテストコードの雛形作成
・・・などをしてくれています。
angular-cliで4行アプリ
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月にリリース予定。
○ もうすぐ!
○ 3/1に rc.2 が出ています!
➢ 機能追加?破壊的変更?○ ありません!2.xで動いたコードは基本的に完全に動きます
○ 基本的には、機能追加のみのリリースです
○ 完全な下位互換性があります
➢ 2.xにあった機能が無くなったりしない?○ なくなりません。
○ 4で非推奨(deprecated)になっても、削除されるのは 6.0。1年後。
➢ なんで4?3は?○ 3は諸事情で飛ばされました …
Angular “2” を始めよう?
“Angular” を始めよう!
“Angular” を始めよう!
――2から!
ご清聴ありがとうございます。