フロントエンドで作る理由

by mikakane

Slide 1

Slide 1 text

フロントエンドで作る理由後藤知宏フロントエンドで作る理由

Slide 2

Slide 2 text

フロントエンドで作る理由後藤知宏株式会社chatbox 代表取締役関西フロントエンドUG代表 Twitter : @_mikakane エンジニア / 技術顧問

Slide 3

Slide 3 text

フロントエンドで作る理由フロントエンドしてますか？フロントできない… 興味はあるけど SPA は… といった声をまだまだ耳にします。

Slide 4

Slide 4 text

フロントエンドで作る理由フロントできない理由バックエンド脳 SPA案件が無いまだ時期じゃない

Slide 5

Slide 5 text

フロントエンドで作る理由フロントできない理由バックエンド脳バックエンドでも十分だから… SPA案件が無いお客さんから言われることがないので… まだ時期じゃないフロントの技術は複雑で選定が難しいから…

Slide 6

Slide 6 text

フロントエンドで作る理由まだ時期じゃない？フロントエンドはどんどん簡単になっている。バックエンドでも出来るから… は言い訳にならない

Slide 7

Slide 7 text

フロントエンドで作る理由 Vue.js HTML/JS ベースでシンプルに導入可能とっつきやすさ、学びやすさは最高レベルデータバインディングやコンポーネントなどモダンフロントに必要な機能は一通り完備極論、JSできなくても Vue.js 出来る jQuery 並みの感覚で使えるツール

Slide 8

Slide 8 text

フロントエンドで作る理由 Nuxt.js ファイル置くだけで自動でルート作成 SPA 構築がここまで簡単になった。 Vue.js の使いやすさはそのままに、プリレンダリングで SEO や OGP のニーズにも対応モジュールを利用して、画像のレイジーロードや PWA 化も簡単に

Slide 9

Slide 9 text

フロントエンドで作る理由 vue-cli プロジェクトのスケルトンを生成するツールコマンドで簡単にプロジェクトの初期セットアップが可能複雑な Webpack 設定を自動で構築もう面倒な webpack.config.js の構築で悩まなくていい lint の設定やテスト設定なども自動化 out of box で使えるセットアップツール

Slide 10

Slide 10 text

フロントエンドで作る理由 Hosting 静的ファイル構成のメリットの一つに高速なホスティングが利用できる点が Firebase Hosting に加え、 Netlifyなら Github 連携での自動デプロイも S3 を自前で用意して CI 経由で自動デプロイ構築する… みたいな面倒な時代はもう終わった

Slide 11

Slide 11 text

フロントエンドで作る理由 Jest / ava 複雑な設定が必要だった mocha のテストからテストツールは Zero Configuration の時代に Firebase Hosting に加え、 Netlifyなら Github 連携での自動デプロイも S3 を自前で用意して CI 経由で自動デプロイ構築する… みたいな面倒な時代はもう終わった

Slide 12

Slide 12 text

フロントエンドで作る理由 SPA はより身近に、簡単に数年前と比べるとフロント制作の地盤は大きく安定なんならPWAも夢じゃない

Slide 13

Slide 13 text

フロントエンドで作る理由技術選定の基準実務で使える(安定性) みんなが使える(学習コスト) 効率化出来る(メリット) <- OK! <- OK!

Slide 14

Slide 14 text

フロントエンドで作る理由わかりやすさは正義私が使える ≠ 現場で使える保守性と教育コストとのバランス勘定を

Slide 15

Slide 15 text

フロントエンドで作る理由技術選定の基準実務で使える(安定性) みんなが使える(学習コスト) 効率化出来る(メリット) <- OK! <- OK! <- What?

Slide 16

Slide 16 text

フロントエンドで作る理由 Why SPA ? バックエンドでも出来るのに… SPAで制作することのメリットは

Slide 17

Slide 17 text

フロントエンドで作る理由よくある例 SPA のページ遷移がぬるぬるで気持ちいいのは分かるけど業務ツールでそれって必要？フロントって大変そう。SPA とか作りなれてない非同期とか E2Eとか大変そう API 設計もなれていないので大変… 抽象的で汎用的なAPI ？画面からコールする API の本数がやばい …

Slide 18

Slide 18 text

フロントエンドで作る理由 SPA制作 - フロント設計ページ遷移が容易になるので、一つの画面になんでも詰め込まなくても済む様に。適切なナビゲーションを添えてシンプルな画面デザインに E2E なんかははじめから無理に頑張ら無くていい。正解が見つけにくいフロント周りは、リリースサイクルを早く回して検証を続けるのがBEST コーディングにせよ、デザインにせよ、品質管理にせよ、 SPA には SPA のやり方。慣れの問題。

Slide 19

Slide 19 text

フロントエンドで作る理由 SPA制作 - API 設計無理に抽象化的なAPIを作成する必要はない。特にGET周りはフォームと割り切る手も API の受け入れテストは簡単に作れるし、品質管理上でもとても重要。最悪ドキュメントとして兼用する手もある。バックエンド(機能) をAPI 化することで品質を担保守りたいデータ資産の安全性がフロントと分離され、より挑戦的なフロント改善を促進する

Slide 20

Slide 20 text

フロントエンドで作る理由変わる制作プロセス SPAにはSPAの制作フロー作り方が変われば要件定義も変わる

Slide 21

Slide 21 text

フロントエンドで作る理由これまでの制作フロー大きな複機能を一度に進めるのはとても大変機能１機能２機能３

Slide 22

Slide 22 text

フロントエンドで作る理由 SPA時代の制作フロー大きな案件から、スケジュール単位の小さな案件に機能１機能２機能３

Slide 23

Slide 23 text

フロントエンドで作る理由 SPA の案件は「作る」お客さんからのリクエストを待つのではなく、よりよい制作フローのために SPA を提案

Slide 24

Slide 24 text

フロントエンドで作る理由怖くないフロントエンド「バックエンドでもできる」の概念を捨てて、「フロントでつくるとどうなる？」への挑戦とりあえずやってみる。良いところを取り入れ、悪いところには改善方法を作り方の変化を、制作フロー全体に反映させていく

Slide 25

Slide 25 text

フロントエンドで作る理由強くてニューゲームバックエンド経験の上にフロントを積むのではなく、ニューゲーム感覚で、新しい気持ちで挑めば

Slide 26

Slide 26 text

フロントエンドで作る理由フロントに親しむ数をこなしてフロント制作になれれば、フロント制作が当たり前にフロントと切り離されていない、テスト不十分なバックエンドは開発不安が大きいセッション、ほんとにしんどいフロントページ遷移におけるもっさり感 DOM のコンポーネント化もしんどい

Slide 27

Slide 27 text

フロントエンドで作る理由フロントエンドを当たり前にフロントを当たり前に

Slide 28

Slide 28 text

フロントエンドで作る理由 Enjoy Frontend ! フロントを当たり前に

Slide 29

Slide 29 text

フロントエンドで作る理由「何事にも先達はあらまほしきことかな」徒然草仁和寺のとある法師

Slide 30

Slide 30 text

フロントエンドで作る理由 lec cafe 気軽に学べるWeb 制作講座

Slide 31

Slide 31 text

フロントエンドで作る理由

Slide 32

Slide 32 text

フロントエンドで作る理由技術顧問中から改善できないなら、外から改善してくれる、頼れる誰かに相談しよう

Slide 33

Slide 33 text

フロントエンドで作る理由技術顧問頼れる誰かに相談しよう餅は餅屋技術は技術屋に

Slide 34

Slide 34 text

フロントエンドで作る理由 Thanks!