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
520
これからはじめるシングルページアプリケーション
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
660
writer.appを支える技術
yuhiisk
0
710
小学校段階からのプログラミング教育ってどうなる
yuhiisk
0
310
SPA実装最前線 ~今どきのJSフレームワーク選び~
yuhiisk
2
4.5k
Critical CSS
yuhiisk
1
12k
Other Decks in Programming
See All in Programming
Site Reliability Engineering for GMO
pyama86
6
940
Git Rebase
bkuhlmann
11
1.6k
元気予報
suu_mire0726
0
860
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
1
160
スキーマ駆動開発による品質とスピードの両立 - 私達は何故、スキーマを書くのか
kentaroutakeda
0
120
今の SmartHR にエンジニアで入社するとどうなるの?
daisukeshinoku
5
4.6k
0→1と1→10の狭間で Javaという技術選定を振り返る/Reflecting on the Decision to Choose Java Between Scaling from 0 to 1 and 1 to 10
jaguar_imo
2
370
両面どころかインフラもTSでできるよ ~ 全方位TypeScriptによるプロダクト開発 ~
myfinder
9
3.2k
From Spring Boot 2 to Spring Boot 3 with Java 21 and Jakarta EE
ivargrimstad
0
1.1k
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
340
Hanami and htmx
bkuhlmann
0
190
puregoの活用例
aethiopicuschan
0
220
Featured
See All Featured
Infographics Made Easy
chrislema
237
18k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
24
2.3k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
1
1.3k
Typedesign – Prime Four
hannesfritz
36
2.1k
Side Projects
sachag
451
41k
How GitHub (no longer) Works
holman
304
140k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
273
13k
Done Done
chrislema
178
15k
Art, The Web, and Tiny UX
lynnandtonic
288
19k
GraphQLとの向き合い方2022年版
quramy
31
12k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
119
38k
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/
ありがとうございました