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
830
小学校段階からのプログラミング教育ってどうなる
yuhiisk
0
370
SPA実装最前線 ~今どきのJSフレームワーク選び~
yuhiisk
2
4.7k
Critical CSS
yuhiisk
1
13k
Other Decks in Programming
See All in Programming
はじめての Go * WASM *OCR
sgash708
1
110
ソフトウェアエンジニアの成長
masuda220
PRO
12
2.1k
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
910
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
14
4.7k
ML.NETで始める機械学習
ymd65536
0
230
CDK開発におけるコーディング規約の運用
yamanashi_ren01
2
260
責務と認知負荷を整える! 抽象レベルを意識した関心の分離
yahiru
8
1.5k
SwiftUI Viewの責務分離
elmetal
PRO
2
280
たのしいSocketのしくみ / Socket Under a Microscope
coe401_
8
1.4k
Formの複雑さに立ち向かう
bmthd
1
940
DevNexus - Create AI Infused Java Apps with LangChain4j
kdubois
0
110
Honoとフロントエンドの 型安全性について
yodaka
7
1.5k
Featured
See All Featured
Six Lessons from altMBA
skipperchong
27
3.6k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
Into the Great Unknown - MozCon
thekraken
35
1.6k
KATA
mclloyd
29
14k
A designer walks into a library…
pauljervisheath
205
24k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
Faster Mobile Websites
deanohume
306
31k
How to train your dragon (web standard)
notwaldorf
91
5.9k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
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/
ありがとうございました