Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
これからはじめるシングルページアプリケーション
Search
Yohei Isokawa
July 14, 2018
Programming
0
620
これからはじめるシングルページアプリケーション
2018/07/14 NEM #8
Yohei Isokawa
July 14, 2018
Tweet
Share
More Decks by Yohei Isokawa
See All by Yohei Isokawa
今どきのWebアニメーション実装
yuhiisk
0
740
writer.appを支える技術
yuhiisk
0
820
小学校段階からのプログラミング教育ってどうなる
yuhiisk
0
370
SPA実装最前線 ~今どきのJSフレームワーク選び~
yuhiisk
2
4.7k
Critical CSS
yuhiisk
1
13k
Other Decks in Programming
See All in Programming
密集、ドキュメントのコロケーション with AWS Lambda
satoshi256kbyte
1
210
Rails アプリ地図考 Flush Cut
makicamel
1
130
Datadog Workflow Automation で圧倒的価値提供
showwin
1
160
もう僕は OpenAPI を書きたくない
sgash708
5
1.9k
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
14
4.6k
Jasprが凄い話
hyshu
0
150
CDKを使ったPagerDuty連携インフラのテンプレート化
shibuya_shogo
0
110
Formの複雑さに立ち向かう
bmthd
1
930
生成AIで加速するテスト実装 - ロリポップ for Gamersの事例と 生成AIエディタの活用
kinosuke01
0
110
PRレビューのお供にDanger
stoticdev
1
230
Datadog DBMでなにができる? JDDUG Meetup#7
nealle
0
140
データベースのオペレーターであるCloudNativePGがStatefulSetを使わない理由に迫る
nnaka2992
0
230
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Fireside Chat
paigeccino
34
3.2k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.2k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
Become a Pro
speakerdeck
PRO
26
5.2k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Producing Creativity
orderedlist
PRO
344
40k
Building Your Own Lightsaber
phodgson
104
6.2k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
How to train your dragon (web standard)
notwaldorf
91
5.9k
Thoughts on Productivity
jonyablonski
69
4.5k
Transcript
これからはじめる シングルページアプリケーション 五⼗川 洋平 (POPCORN) 2018.07.14 NEM#8
⾃⼰紹介 • 五⼗川 洋平(イソップ) - 上越市在住のフリーランスエンジニア - ⽷⿂川市出⾝ • 趣味:ヨーヨー、バス釣り
• Twitter:@yuhiisk • http://blog.yuhiisk.com
アジェンダ • シングルページアプリケーション(SPA)とは何か
アジェンダ • シングルページアプリケーション(SPA)とは何か • 事例から⾒るSPA
アジェンダ • シングルページアプリケーション(SPA)とは何か • 事例から⾒るSPA • フロントエンド実装の概要
シングルページアプリケーション (Single Page Application)
⼀度ページを表⽰したら ページ遷移(再読込)をせずに ページの⼀部のみを更新する Webアプリケーションの実装⼿法
None
None
None
None
毎回読み込み直すと時間がかかるから、 必要な部分だけ更新する。
毎回読み込み直すと時間がかかるから、 必要な部分だけ更新する。 → ページの更新が速く、 ユーザー体験の向上が⾒込める
アプリケーション上のデータの扱い (保存・取得・変更・削除)
アプリケーション上のデータの扱い (保存・取得・変更・削除) → ブラウザ側からサーバーAPIを経由して⾏う
従来のフォーム送信
HTMLフォームからデータを送信 従来のフォーム送信
サーバーはHTMLを返す 従来のフォーム送信
SPAの場合
クライアントからAjaxでリクエスト SPAの場合
サーバーからはレスポンスとして JSONデータを返す SPAの場合
フロントではシームレスなインターフェイスを提供。 サーバーではビジネスロジック、API実装に集中。
シングルページアプリケーション のメリット・デメリット
SPAのメリット
SPAのメリット • 操作の応答性が⾼く、ユーザー体験が向上する。
SPAのメリット • 操作の応答性が⾼く、ユーザー体験が向上する。 • ページ遷移が⼀瞬でサクサク動く。
SPAのメリット • 操作の応答性が⾼く、ユーザー体験が向上する。 • ページ遷移が⼀瞬でサクサク動く。 • ネイティブアプリの代わりになる。
SPAのメリット • 操作の応答性が⾼く、ユーザー体験が向上する。 • ページ遷移が⼀瞬でサクサク動く。 • ネイティブアプリの代わりになる。 → ネイティブアプリと同等の機能を提供可能 (アプリのキャッシュ、オフライン機能、Push通知など)
SPAのデメリット
SPAのデメリット • ページにアクセスした際の読み込み時間が⻑い。
SPAのデメリット • ページにアクセスした際の読み込み時間が⻑い。 → 遅延読み込みで対応
SPAのデメリット • ページにアクセスした際の読み込み時間が⻑い。 → 遅延読み込みで対応 • 実装コストが掛かる。
SPAのデメリット • ページにアクセスした際の読み込み時間が⻑い。 → 遅延読み込みで対応 • 実装コストが掛かる。 • 実装スキルが求められる。
SPAのデメリット • ページにアクセスした際の読み込み時間が⻑い。 → 遅延読み込みで対応 • 実装コストが掛かる。 • 実装スキルが求められる。 •
SEOに弱い。
SPAのデメリット • ページにアクセスした際の読み込み時間が⻑い。 → 遅延読み込みで対応 • 実装コストが掛かる。 • 実装スキルが求められる。 •
SEOに弱い。 → サーバーサイドレンダリングで解決
シングルページアプリケーション の事例
Googleのサービス
Gmail
Google Drive
Google Map
チャットサービス
Slack
Chatwork
データ表⽰がメインのサービス
SNSサービス
仮想通貨取引所
SPAが向いているケース
SPAが向いているケース • サイト滞在時間が⻑いWebアプリケーション
SPAが向いているケース • サイト滞在時間が⻑いWebアプリケーション • チャット、データ群の表⽰・投稿、管理画⾯など
SPAが向いているケース • サイト滞在時間が⻑いWebアプリケーション • チャット、データ群の表⽰・投稿、管理画⾯など • ユーザー⾃⾝が操作するツール系サービス、 業務アプリケーションなど。
SPAが向いていないケース
SPAが向いていないケース • 個⼈ブログなどの直帰率の⾼いサイト
SPAが向いていないケース • 個⼈ブログなどの直帰率の⾼いサイト • コーポレートサイト
SPAが向いていないケース • 個⼈ブログなどの直帰率の⾼いサイト • コーポレートサイト → 情報を載せるだけの構成の場合、 本当にSPAにする必要があるか?
SPAが向いていないケース • 個⼈ブログなどの直帰率の⾼いサイト • コーポレートサイト → 情報を載せるだけの構成の場合、 本当にSPAにする必要があるか? •
ゲーム開発
SPAが向いていないケース • 個⼈ブログなどの直帰率の⾼いサイト • コーポレートサイト → 情報を載せるだけの構成の場合、 本当にSPAにする必要があるか? •
ゲーム開発 → リアルタイム性が求められる⾼速な描画処理が苦⼿。 ゲーム⽤ライブラリを検討するのが無難。
というのを踏まえての採⽤基準
SPAの採⽤基準
SPAの採⽤基準 • まずはアプリケーションの特徴を理解する。
SPAの採⽤基準 • まずはアプリケーションの特徴を理解する。 → SPAに向いているか?(メリットはあるか?) → ⼯数的に余裕があるか?
SPAの採⽤基準 • まずはアプリケーションの特徴を理解する。 → SPAに向いているか?(メリットはあるか?) → ⼯数的に余裕があるか? • 開発体制が確保できるか。
SPAの採⽤基準 • まずはアプリケーションの特徴を理解する。 → SPAに向いているか?(メリットはあるか?) → ⼯数的に余裕があるか? • 開発体制が確保できるか。 →
開発作業の全てを⼀⼈で対応するのは難しい。 → フロントヘビーな開発なので、 実装できるフロントエンジニアを確保できるか。
SPAの採⽤基準 • まずはアプリケーションの特徴を理解する。 → SPAに向いているか?(メリットはあるか?) → ⼯数的に余裕があるか? • 開発体制が確保できるか。 →
開発作業の全てを⼀⼈で対応するのは難しい。 → フロントヘビーな開発なので、 実装できるフロントエンジニアを確保できるか。 → サーバーAPIを実装できる⼈がいるか。
シングルページアプリケーション の開発構成
全体の構成 フロントエンド開発 サーバー開発
全体の構成 フロントエンド開発 サーバー開発
フロントエンド開発
フロントエンド開発 • 基本的にHTML, CSS, JavaScriptで開発。
フロントエンド開発 • 基本的にHTML, CSS, JavaScriptで開発。 • 昨今のSPA開発では、SPAに特化したJSフレームワークを 利⽤するのが⼀般的。
フロントエンド開発 • 基本的にHTML, CSS, JavaScriptで開発。 • 昨今のSPA開発では、SPAに特化したJSフレームワークを 利⽤するのが⼀般的。 • 今何かと話題のやつ…!
フロントエンド開発
フロントエンド開発 • フレームワークは多様に⾒えるけど、共通点が多い。
フロントエンド開発 • フレームワークは多様に⾒えるけど、共通点が多い。 • 仕組みについては後ほど。
全体の構成 フロントエンド開発 サーバー開発
サーバー開発
サーバー開発 • WAFを採⽤したサーバー開発が⼀般的。
サーバー開発 • WAFを採⽤したサーバー開発が⼀般的。 • Ruby on Rails, Django, Laravel, Expressなど。
サーバー開発 • WAFを採⽤したサーバー開発が⼀般的。 • Ruby on Rails, Django, Laravel, Expressなど。
• 最近はクラウドでのサーバーレス構成も⼈気。
サーバー開発 正直なところ、APIが⽤意できればなんでもいい。 WordPressのREST APIや 公開されているWeb APIでも要件を満たせていればOK。
全体の構成 フロントエンド サーバー
全体の構成 フロントエンド サーバー 組み合わせは⾃由。
実際のプロダクトでの例 • React + Django • React + CakePHP3 •
Angular + Firebase + Google Cloud Platform (Cloud Storage, Cloud Functions)
SPA開発の技術選定 • まずはチームで慣れている・やりやすい⾔語や技術を 選ぼう。
シングルページアプリケーション のフロントエンド開発⼿法
フロントエンド開発の第⼀歩は JSフレームワークと仲良くなる
の前に、✋
今回はフレームワーク間で共通する話を
フレームワークどれがいいの問題 • 今回は語りきれないので、以前作成したスライドを参照く ださい。 https://speakerdeck.com/yuhiisk/spashi-zhuang-zui- qian-xian-jin-dokifalsejshuremuwakuxuan-bi
コンポーネント指向
コンポーネントとは? コンポーネントとは、 状態・機能を持ったページを構成する部品
コンポーネントとは?
コンポーネントとは?
コンポーネントとは?
コンポーネントとは?
コンポーネント指向とは?
コンポーネント指向とは? 積み⽊のようにコンポーネントを組み合わせる
コンポーネントだと何がいい?
コンポーネントだと何がいい? • 再利⽤可能
コンポーネントだと何がいい? • 再利⽤可能
コンポーネントだと何がいい? • 再利⽤可能
コンポーネントだと何がいい? • 再利⽤可能
コンポーネントだと何がいい? • 外からデータや処理を与えることができる。
コンポーネントだと何がいい? • 外からデータや処理を与えることができる。 ダイアログコンポーネント • දࣔ͢Δจষ • ϘλϯͷςΩετ • ϘλϯΛΫϦοΫͨ࣌͠ͷڍಈ
コンポーネントだと何がいい? • 再利⽤可能 • コンポーネント⾃⾝が状態を持てる
コンポーネントだと何がいい? • コンポーネント⾃⾝が状態を持てる
コンポーネントだと何がいい? • コンポーネント⾃⾝が状態を持てる
コンポーネントだと何がいい? • コンポーネント⾃⾝が状態を持てる { isActive: true } { isActive: false
}
コンポーネントだと何がいい? • 再利⽤可能 • コンポーネント⾃⾝が状態を持てる • コードの影響範囲をカプセル化 (個々にメソッドを実装したり、独⾃CSSを適⽤できる)
コンポーネントだと何がいい? • コードの影響範囲をカプセル化 B A C
コンポーネントだと何がいい? • コードの影響範囲をカプセル化 B A C 他のコンポーネントに影響しない
全てコンポーネント指向
コンポーネント指向を念頭に チュートリアルをやってみる • 各フレームワークではチュートリアルが⽤意されているので、 まずはチュートリアルで雰囲気を掴む。 • React: https://reactjs.org/tutorial/tutorial.html • Angular:
https://angular.jp/tutorial • Vue.js: https://jp.vuejs.org/v2/guide/
コンポーネント指向を念頭に 何か作ってみる
コンポーネント指向を念頭に 何か作ってみる 1. 例えば、Qiitaのデータを取得してリスト表⽰するだけの アプリ
コンポーネント指向を念頭に 何か作ってみる 1. 例えば、Qiitaのデータを取得してリスト表⽰するだけの アプリ 2. ⼿元からPOSTできるように簡単な投稿エディタを作って みる。
コンポーネント指向を念頭に 何か作ってみる 1. 例えば、Qiitaのデータを取得してリスト表⽰するだけの アプリ 2. ⼿元からPOSTできるように簡単な投稿エディタを作って みる。 3. フォローできるようにしてみる。
コンポーネント指向を念頭に まずは何か作ってみる • その他にもチャットアプリなども初⼼者にはおすすめ。
コンポーネント指向を念頭に まずは何か作ってみる • その他にもチャットアプリなども初⼼者にはおすすめ。 • ⾃分のアイデアをもとに⼿を動かしてみましょう。
今⽇のまとめ
SPAまとめ
SPAまとめ • SPAはページの⼀部を更新するWebアプリケーション。
SPAまとめ • SPAはページの⼀部を更新するWebアプリケーション。 • ユーザー体験が向上する分、フロントの実装コストは⾼ い。
SPAまとめ • SPAはページの⼀部を更新するWebアプリケーション。 • ユーザー体験が向上する分、フロントの実装コストは⾼ い。 • サイト滞在時間の⻑いツール系のサービスに向いている。
SPAまとめ • 規模に応じて実装者を確保すること。
SPAまとめ • 規模に応じて実装者を確保すること。 • フレームワーク選びは組み合わせが⾃由。
SPAまとめ • 規模に応じて実装者を確保すること。 • フレームワーク選びは組み合わせが⾃由。 • フロントエンド開発はコンポーネント指向を意識する。
【宣伝】Angularの⼊⾨動画を作りました https://www.udemy.com/angular-ja/
ありがとうございました