15分で知(った気にな)る最近のフロントエンド事情

2018.09.27 もくテク

Transcript

1. 15分で知る 最近の フロントエンド事情 2018/9/27 もくテク 最近のWeb技術についてワイワイ語る会 (った気にな)
2. 麦島 一 (むぎしま はじめ) @mugi_uno 自己紹介
3. フロントエンド、ついていけてます？
5. よく聞くワード 「Javascriptは初心者向け」
6. 現実
7. 一気におさらいしてみよう！
8. 〜はじめに〜
9. 15分じゃ無理
10. 〜目標〜 1. 言語自体の話 ２. JSと静的型付け 3. よく聞くフレームワーク 4. 状態管理 5. モジュール管理 を知った気になってもらう
11. 言語自体の話
12. ECMAScript • ESxとも呼ばれる(e.g. ES6) • 実装状況はブラウザによる
 https://kangax.github.io/compat-table/es6/ • 提案状況→tc39/proposals • Javascriptの標準仕様
13. ECMAScript • ESxと呼ばれたりする(e.g. ES6) • 実装状況はブラウザによる
 https://kangax.github.io/compat-table/es6/ • 提案状況→tc39/proposals • Javascriptの標準仕様
14. レガシー環境に合わせる必要がある • 要するにIE11で動かないといけない 参考： MDN 「クラス定義」 サポート状況 https:// developer.mozilla.org/ja/ docs/Web/JavaScript/ Reference/Classes
15. 新しい仕様があるのに 使えない…
16. Babel • ECMAScript 2015+のコードを
 未実装の環境でも動く形に変換する • コードをtransformする際に、
 ついでに色々できるので混乱しがち
 (代表例: JSX→JSの変換)
17. AltJS • ECMAScriptに変換可能な言語 • 混同しがちだが、ECMAScript自体 は仕様なので、AltJSではない
18. AltJSの例 • TypeScript - Microsoft製 / よく聞く • Dart - Google製 • ReasonML - Facebook製 • CoffeeScript - あんまり元気がない
19. なにを選べばいい？
20. • 私なら、可能ならTypeScriptを選ぶ • フレームワークによってはつらいので、
 その場合はES2017 (async/await) • Proposalのstage0-2は避ける
21. JSと静的型付け
22. JSと型 • JSは動的型付言語 • データ型は7種類のみ • String • Number • Boolean • Object • null • unde ned • Symbol (ES2015+)
23. 静的型検査を したくなることがある
24. よくある問題 • APIのレスポンスはわかっているけど… • タイポで動いてませんでした const user = response.uesr; // user === undefined
25. レスポンスを型定義できれば…
26. 型を強化する色々 • TypeScript • Flow • 静的型付けのできるAltJS • 対応ライブラリが多い • 個人的にオススメ • ES上に静的型付けのみを提供する • コメントで定義できる
27. 必要？
28. • 可能なら使ったほうが良いと思う • リファクタリングの敷居がグッと下がる • わ、わたしも導入しないと…(焦)
29. よく聞くフレームワーク
30. jQueryのコード例
31. e.g. 追加ボタンでタスクを追加 $(‘#add-button’).on('click', () => { const input = $('<input>'); input.attr('type', 'text'); $(‘#todo-list').append(input); }); クリックすると タスクを追加
32. e.g. 追加ボタンでタスクを追加 $(‘#add-button’).on('click', () => { const input = $('<input>'); input.attr('type', 'text'); input.addClass('todo'); $(‘#todo-list').append(input); }); 仕様変更 →classの追加
33. e.g. 追加ボタンでタスクを追加 $(‘#add-button').on('click', () => { const todo = $('<div>'); todo.addClass(‘wrapper’); const input = $('<input>'); input.attr('type', 'text'); input.addClass('todo'); todo.append(input); $('#todo-list').append(todo); }); 仕様変更 →divで囲む
34. e.g. 追加ボタンでタスクを追加 $(‘#add-button').on('click', () => { const todo = $('<div>'); todo.addClass(‘wrapper’); if($(‘.todo’).length % 5) { const separator = $(‘<hr>’); todo.append(separator); } const input = $('<input>'); input.attr('type', 'text'); input.addClass('todo'); todo.append(input); $('#todo-list').append(todo); }); 仕様変更 →5件ごとに区切る
35. e.g. 追加ボタンでタスクを追加 $(‘#add-button').on('click', () => { const todo = $('<div>'); todo.addClass(‘wrapper’); if($(‘.todo’).length % 5) { const separator = $(‘<hr>’); todo.append(separator); } const input = $('<input>'); input.attr('type', 'text'); input.addClass('todo'); todo.append(input); $(‘#todo-list').append(todo); if($(‘.todo’).length === 20) { $(‘#add-button’).hide(); } }); 仕様変更 →20件を上限
36. e.g. 追加ボタンでタスクを追加 $(‘#add-button').on('click', () => { const todo = $('<div>'); todo.addClass(‘wrapper’); if($(‘.todo’).length % 5) { const separator = $(‘<hr>’); todo.append(separator); } const input = $('<input>'); input.attr('type', 'text'); input.addClass('todo'); todo.append(input); $(‘#todo-list').append(todo); if($(‘.todo’).length === 20) { $(‘#add-button’).hide(); } }); Q. 最終的なDOMの形は？
37. • 気軽に描画結果を変更できない • CSS適用に一苦労 • 実際にはこんなものではない • 機能の追加・修正の難易度も高い
38. • React • Vue • Angular
39. • Viewを事前に定義する • 状態とViewを分離する 共通している考え方
40. さっきの例をVueのtemplateで書くと? <template> <div id='todo-list'> <div class='wrapper' v-for='(todo, index) in todoList'> <input type='text' class='todo' v-model='todo' /> <hr v-if='index % 5' /> </div> <button id='add-button' v-if='todoList.length < 20’> Add Todo </button> </div> </template> DOMを 宣言的に定義
41. React Facebook / VirtualDOM / JSX • 事例・情報が多い • 他ライブラリとの依存が薄い • JSX書くのがつらい • 結局他ライブラリが必要になる
 (Redux, React-Router, など) • トータルで記述量が多くなりがち
42. Vue コミュニティ / VirtualDOM / SFC • 日本語ドキュメントが充実 • 学習コストが低め（と思う） • 関連ライブラリとの一体感 • 型付けがつらい • 大企業の後ろ盾がないので、
 人によっては不安になるかも
43. Google / フルスタック / DI • 全部入りなので慣れると強いらしい • TypeScriptとの相性が良い
 (公式で推奨） • 独自の概念が多い • 学習コストが高い Angular (経験が薄いので偉そうなことを書けない)
44. どれにしたらいいの？
45. いまゼロから学ぶなら
 Vueから入ると良さそう （個人の意見です）
46. 状態管理
47. • データ(状態)が散らばったまま • ドメインロジックも散らばっている • SPAだと特につらくなる Reactなどを使って、 Viewは宣言的になったけど… e.g.)
 アプリケーション全体で使うFlashメッセージ
48. 状態管理だけをきれいにまとめたい （脱オレオレ実装）
49. • Redux • Vuex
50. • Reactでの採用例が多い • 単一Store / ReadOnly • 変更時は純粋関数のみを使う Redux
51. • Vueに特化した状態管理 • Vueならこれにしとけば良い Vuex
52. 必要なの？
53. • 規模が大きくなってからの
 状態管理ライブラリ導入はキツい 入れるなら早めに • 早い段階で判断したほうがいい
54. モジュール管理
55. • Javaで言えばimport • Cで言えばinclude • Rubyで言えばrequire • ES5以前はモジュールの概念がない
 → コード間の依存関係を表現できない • みんな工夫してがんばってた
 (RequireJSというものがあってじゃな…)
56. • Node.jsの登場 • CommonJSの採用 const sub = require(‘./sub.js’);
57. ブラウザでも使いたい…!
58. • webpack • Parcel • ES Modules
59. • CommonJSで書いたコードを
 ブラウザで動く形に変換できる • 他にできることがめっちゃ多い • uglify(コード圧縮・難読化) • PostCSS/SASSの変換 • 画像変換
 など..
60. • webpack同様のモジュールバンドラ • 特徴 : Zero Con guration Parcel
61. ECMAScript単体で モジュール管理できないの？
62. • ES6(2015)以降の仕様 ES Modules import sub from ‘./sub.js’; • webpack/Parcelは
 ESModulesも変換できる
63. 結局どうすればいいの？
64. • ESModulesで書くのが主流 • やりたいことが増えてくると
 webpackじゃないと厳しくなる • とりあえず考えたくない場合は
 Parcelが圧倒的に楽 • 不要になる未来は到底来ない気がする
65. その他
66. • ESLint, Prettier • Mocha, Jest • puppeteer • SSR • Next.js • Nuxt.js • Service Worker • PWA
67. 時間切れ
68. まとめ
69. 15分はあまりにも短すぎる
70. よく聞くワード 「フロントエンドは変化が速い」
71. facebook/react - Releases • v16.0.0 - 2017/09/27 • v15.0.0 - 2016/04/09 • v0.14.0 - 2015/08/08
72. ECMAScript • 2017 - 2017/06 • 2016 - 2016/06 • 6(2015) - 2015/06
73. そこまで速いわけでもないのでは？
74. なぜ速く感じるのだろう？
75. 現実
76. 現実 変化するものが多い
77. 私たちは忙しいので、
 すべてを常に追うのは難しい。
78. 現実的な話、 新しいものを一気に導入するのは 容易じゃない
79. ひとつずつやっていこう！