Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie Lt7 SPA
Ähnlich wie Lt7 SPA (20)
Mehr von GIG inc.
Mehr von GIG inc. (20)
Lt7 SPA
- 2. Index ● SPAとは ● Angular.js ● React.js ● Vue.js ● まとめ
- 3. SPAとは v01
- 4. 01 SPAとは • Single Page Applicationの略 • 単一のWEBページで1つのアプリを構築しようというアーキテクチャの総称 • 慣れ親しんだHTML、CSS、JSを用いてデスクトップアプリのような快適な操作性を提供可能 • 最小限のデータ転送で、アプリケーションを動く仕組みを提供
- 5. 01 SPAとは ● ユーザーがアクションを起こす ● サーバーに通信 ● サーバー側でHTMLを生成 ● サーバーからHTMLを受信 ● HTMLを描画 従来のWEBアプリケーション ● ユーザーがアクションを起こす ● そのアクションに必要なデータのみサーバー に要求 ● 返されたデータをJS等で処理 ● HTMLの差分を描画 SPA
- 8. 01 SPAとは SPA導入のメリット • ページ間の遷移を高速化 • Web componentsを擬似的に再現できる • クライアントとサーバーが分離されることでメンテナンス性が向上する。なの で、REST設計との相性が良い • 状態が変更されたタイミングで DOMの再描画を走らせられる • コミュニティが活発なのでライブラリが豊富 = 拡張しやすい • アプリケーションに近い動きを実現しやすいので UXを向上させられる
- 9. 01 SPAとは SPA導入のデメリット • WEBサイト制作にはオーバースペック気味 • 学習コストが高い（Flux、router） • 移り変わりが早い • UI・UXを含む設計を通常の WEBアプリに比べ綿密に行う必要がある • SEOに弱い（認識してくれないクローラーがある） • JSが実行できない環境だと、全く動かない
- 10. v02 Angular.js
- 11. 02 Angular.js 特徴 • フルスタックなのでライブラリを追加しなくてもほとんどの機能が実装されている • TypeScriptを高速レンダリングし、高速稼働 • アクセシビリティ、テストと開発全体をサポートしてくれる • 描画する値を加工するためのパイプ機能あり
- 12. 02 Angular.js デメリットメリット ● フルスタック開発なのでライブラリ追加が不要 ● 案件の規模感、開発メンバーに合わせて Angular Wayを用いた大規模開発に向いてい る ● 全面的な導入に向いている ● TypeScriptなので、型定義によりバグからしっ かり守ってくれる ● TypeScriptの学習・導入コスト ● 堅牢な分、Angular Wayの制約に従う必要性 有り ● 小規模アプリ開発にはオーバースペック ● 開発途中からの切り替えは困難 ● Angularからの乗り換えが困難
- 13. 02 Angular.js 提供元 初版 最新版 最新バージョン Githubスター数 Qiitaタグ投稿数 teratailタグ数 動静 Google 2009年 2018.04 6.0.0 1x：58,300 2x：35,300 600 + 500 + 1,300 50 + 560 1xから2xに互換性がなかったため、 2014〜2015まで低迷。一部Reactに 流れ、その後復活
- 15. v03 React.js
- 16. 03 React.js 特徴 • JSの構文を拡張したJSX記法でコンポーネントをクラスとして記述可能 • JSの仕様に準拠している • 仮想DOMによる高速処理 • Stateによる状態管理 • 静的サイト向けのReact Staticもある • ライブラリが特に豊富
- 17. 03 React.js デメリットメリット ● ライブラリが豊富 ● Angularに比べ導入コストが低く、 vueに比べ て大規模、複雑なアプリ開発に向いている ● Reduxを導入することで、単体テストがやりや すい ● Flowという静的型チェッカー導入で、 TypeScriptのようにコードを保護出来る ● ライブラリがシンプルな為、組み合わせで要求 を実現できる ● ロジックとViewが綺麗に別れている ● エコシステムのライブラリ等は公式以外が提 供しているので、知識と調査が必要 ● JSXがほぼ必須なので動かすときにトランス パイルが必須
- 18. 03 React.js 提供元 初版 最新版 最新バージョン Githubスター数 Qiitaタグ投稿数 teratailタグ数 動静 Facebook 2011年 2017.09 16.0 94,000 1,300 + 1,500 530 Facebook社と係争中の他社は使え ないBSDライセンス問題があったが、 2017年に決着。 Reactに馴染めなかった人がVueに 流れている印象
- 19. 03 React.js 大手採用実績 制限 プログラミング言語 データバインディング アーキテクチャ 状態管理 ルーティング機能 ネイティブアプリ用 プラットフォーム ECMAScript5準拠のブラウザ対応。IE8以下は未対応。 (Polyfilライブラリで一部回避可能らしい) JavaScript(ES5も可)、JSX記法、TypeScriptは拡張でサポート 単一方向バインディング（データ → HTML） 公式ではMVCのViewのみ Reduxおよび、MobX 公式サポートのReact-router Facebook各種サービス、任天堂、CyberAgent、Netflix、 Twitter、はてなブログ、ニコニコ動画、pixv等 React Native
- 20. v04 Vue.js
- 21. 04 Vue.js 特徴 • 仮想DOMと差分レンダリングによる高速動作 • リアクティブシステムで状態管理をすることで、データが更新されると viewも自動的に更新 • 軽量かつ、柔軟性もあり、初心者でも扱いやすい JSフレームワークとして知られている • 単一ファイルコンポーネント (HTML/CSS/JSを一元管理できるファイル )で分割することで、各コンポーネント単位 の管理が楽になる
- 22. 04 Vue.js デメリットメリット ● スモールスタートが可能 ● コンポーネント内はHTMLとCSS、JSが独立し ている ● CSSをコンポーネントごとに scope化できるの で、最終的に疎結合が可能なので、 CSS同士 の汚染を限りなく減らせる ● 基本的なライブラリ群は公式が提供している ● 学習コストが低い ● Laravel5.3〜に標準搭載されているので相性 が良い ● 大規模アプリの開発時には、設計の難易度が 上がる ● 柔軟性が高いが故に、設計をより丁寧に進め る必要性あり ● HTMLにロジックをかけるので、ソースが読み づらくなりやすい
- 25. まとめ v05
- 26. 05 まとめ • 今、WEBアプリケーションを作るなら SPAの知識は必須 • フレームワークは用法・用量を守ってお付き合いください • 今後はReactとVueが2大巨塔になっていくのではないか