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

2018.09.27 もくテク

Transcript

1. 15分で知る
   最近の
   フロントエンド事情
   2018/9/27
   もくテク 最近のWeb技術についてワイワイ語る会
   (った気にな)
   

   View Slide

2. 麦島 一 (むぎしま はじめ)
   @mugi_uno
   自己紹介
   

   View Slide

3. フロントエンド、ついていけてます？
   

   View Slide

4. View Slide

5. よく聞くワード
   「Javascriptは初心者向け」
   

   View Slide

6. 現実
   

   View Slide

7. 一気におさらいしてみよう！
   

   View Slide

8. 〜はじめに〜
   

   View Slide

9. 15分じゃ無理
   

   View Slide

10. 〜目標〜
    1. 言語自体の話
    ２. JSと静的型付け
    3. よく聞くフレームワーク
    4. 状態管理
    5. モジュール管理
    を知った気になってもらう
    

    View Slide

11. 言語自体の話
    

    View Slide

12. ECMAScript
    • ESxとも呼ばれる(e.g. ES6)
    • 実装状況はブラウザによる

    https://kangax.github.io/compat-table/es6/
    • 提案状況→tc39/proposals
    • Javascriptの標準仕様
    

    View Slide

13. ECMAScript
    • ESxと呼ばれたりする(e.g. ES6)
    • 実装状況はブラウザによる

    https://kangax.github.io/compat-table/es6/
    • 提案状況→tc39/proposals
    • Javascriptの標準仕様
    

    View Slide

14. レガシー環境に合わせる必要がある
    • 要するにIE11で動かないといけない
    参考：
    MDN 「クラス定義」
    サポート状況
    https://
    developer.mozilla.org/ja/
    docs/Web/JavaScript/
    Reference/Classes
    

    View Slide

15. 新しい仕様があるのに
    使えない…
    

    View Slide

16. Babel
    • ECMAScript 2015+のコードを

    未実装の環境でも動く形に変換する
    • コードをtransformする際に、

    ついでに色々できるので混乱しがち

    (代表例: JSX→JSの変換)
    

    View Slide

17. AltJS
    • ECMAScriptに変換可能な言語
    • 混同しがちだが、ECMAScript自体
    は仕様なので、AltJSではない
    

    View Slide

18. AltJSの例
    • TypeScript - Microsoft製 / よく聞く
    • Dart - Google製
    • ReasonML - Facebook製
    • CoffeeScript - あんまり元気がない
    

    View Slide

19. なにを選べばいい？
    

    View Slide

20. • 私なら、可能ならTypeScriptを選ぶ
    • フレームワークによってはつらいので、

    その場合はES2017 (async/await)
    • Proposalのstage0-2は避ける
    

    View Slide

21. JSと静的型付け
    

    View Slide

22. JSと型
    • JSは動的型付言語
    • データ型は7種類のみ
    • String
    • Number
    • Boolean
    • Object
    • null
    • unde ned
    • Symbol (ES2015+)
    

    View Slide

23. 静的型検査を
    したくなることがある
    

    View Slide

24. よくある問題
    • APIのレスポンスはわかっているけど…
    • タイポで動いてませんでした
    const user = response.uesr;
    // user === undefined
    

    View Slide

25. レスポンスを型定義できれば…
    

    View Slide

26. 型を強化する色々
    • TypeScript
    • Flow
    • 静的型付けのできるAltJS
    • 対応ライブラリが多い
    • 個人的にオススメ
    • ES上に静的型付けのみを提供する
    • コメントで定義できる
    

    View Slide

27. 必要？
    

    View Slide

28. • 可能なら使ったほうが良いと思う
    • リファクタリングの敷居がグッと下がる
    • わ、わたしも導入しないと…(焦)
    

    View Slide

29. よく聞くフレームワーク
    

    View Slide

30. jQueryのコード例
    

    View Slide

31. e.g. 追加ボタンでタスクを追加
    $(‘#add-button’).on('click', () => {
    const input = $('');
    input.attr('type', 'text');
    $(‘#todo-list').append(input);
    });
    クリックすると
    タスクを追加
    

    View Slide

32. e.g. 追加ボタンでタスクを追加
    $(‘#add-button’).on('click', () => {
    const input = $('');
    input.attr('type', 'text');
    input.addClass('todo');
    $(‘#todo-list').append(input);
    });
    仕様変更
    →classの追加
    

    View Slide

33. e.g. 追加ボタンでタスクを追加
    $(‘#add-button').on('click', () => {
    const todo = $('');
    todo.addClass(‘wrapper’);
    const input = $('');
    input.attr('type', 'text');
    input.addClass('todo');
    todo.append(input);
    $('#todo-list').append(todo);
    });
    仕様変更
    →divで囲む
    

    View Slide

34. e.g. 追加ボタンでタスクを追加
    $(‘#add-button').on('click', () => {
    const todo = $('');
    todo.addClass(‘wrapper’);
    if($(‘.todo’).length % 5) {
    const separator = $(‘’);
    todo.append(separator);
    }
    const input = $('');
    input.attr('type', 'text');
    input.addClass('todo');
    todo.append(input);
    $('#todo-list').append(todo);
    });
    仕様変更
    →5件ごとに区切る
    

    View Slide

35. e.g. 追加ボタンでタスクを追加
    $(‘#add-button').on('click', () => {
    const todo = $('');
    todo.addClass(‘wrapper’);
    if($(‘.todo’).length % 5) {
    const separator = $(‘’);
    todo.append(separator);
    }
    const input = $('');
    input.attr('type', 'text');
    input.addClass('todo');
    todo.append(input);
    $(‘#todo-list').append(todo);
    if($(‘.todo’).length === 20) {
    $(‘#add-button’).hide();
    }
    });
    仕様変更
    →20件を上限
    

    View Slide

36. e.g. 追加ボタンでタスクを追加
    $(‘#add-button').on('click', () => {
    const todo = $('');
    todo.addClass(‘wrapper’);
    if($(‘.todo’).length % 5) {
    const separator = $(‘’);
    todo.append(separator);
    }
    const input = $('');
    input.attr('type', 'text');
    input.addClass('todo');
    todo.append(input);
    $(‘#todo-list').append(todo);
    if($(‘.todo’).length === 20) {
    $(‘#add-button’).hide();
    }
    });
    Q.
    最終的なDOMの形は？
    

    View Slide

37. • 気軽に描画結果を変更できない
    • CSS適用に一苦労
    • 実際にはこんなものではない
    • 機能の追加・修正の難易度も高い
    

    View Slide

38. • React
    • Vue
    • Angular
    

    View Slide

39. • Viewを事前に定義する
    • 状態とViewを分離する
    共通している考え方
    

    View Slide

40. さっきの例をVueのtemplateで書くと?
    
    
    
    
    
    
    

    View Slide

41. React
    Facebook / VirtualDOM / JSX
    • 事例・情報が多い
    • 他ライブラリとの依存が薄い
    • JSX書くのがつらい
    • 結局他ライブラリが必要になる

    (Redux, React-Router, など)
    • トータルで記述量が多くなりがち
    

    View Slide

42. Vue
    コミュニティ / VirtualDOM / SFC
    • 日本語ドキュメントが充実
    • 学習コストが低め（と思う）
    • 関連ライブラリとの一体感
    • 型付けがつらい
    • 大企業の後ろ盾がないので、

    人によっては不安になるかも
    

    View Slide

43. Google / フルスタック / DI
    • 全部入りなので慣れると強いらしい
    • TypeScriptとの相性が良い

    (公式で推奨）
    • 独自の概念が多い
    • 学習コストが高い
    Angular
    (経験が薄いので偉そうなことを書けない)
    

    View Slide

44. どれにしたらいいの？
    

    View Slide

45. いまゼロから学ぶなら

    Vueから入ると良さそう
    （個人の意見です）
    

    View Slide

46. 状態管理
    

    View Slide

47. • データ(状態)が散らばったまま
    • ドメインロジックも散らばっている
    • SPAだと特につらくなる
    Reactなどを使って、
    Viewは宣言的になったけど…
    e.g.)

    アプリケーション全体で使うFlashメッセージ
    

    View Slide

48. 状態管理だけをきれいにまとめたい
    （脱オレオレ実装）
    

    View Slide

49. • Redux
    • Vuex
    

    View Slide

50. • Reactでの採用例が多い
    • 単一Store / ReadOnly
    • 変更時は純粋関数のみを使う
    Redux
    

    View Slide

51. • Vueに特化した状態管理
    • Vueならこれにしとけば良い
    Vuex
    

    View Slide

52. 必要なの？
    

    View Slide

53. • 規模が大きくなってからの

    状態管理ライブラリ導入はキツい
    入れるなら早めに
    • 早い段階で判断したほうがいい
    

    View Slide

54. モジュール管理
    

    View Slide

55. • Javaで言えばimport
    • Cで言えばinclude
    • Rubyで言えばrequire
    • ES5以前はモジュールの概念がない

    → コード間の依存関係を表現できない
    • みんな工夫してがんばってた

    (RequireJSというものがあってじゃな…)
    

    View Slide

56. • Node.jsの登場
    • CommonJSの採用
    const sub = require(‘./sub.js’);
    

    View Slide

57. ブラウザでも使いたい…!
    

    View Slide

58. • webpack
    • Parcel
    • ES Modules
    

    View Slide

59. • CommonJSで書いたコードを

    ブラウザで動く形に変換できる
    • 他にできることがめっちゃ多い
    • uglify(コード圧縮・難読化)
    • PostCSS/SASSの変換
    • 画像変換

    など..
    

    View Slide

60. • webpack同様のモジュールバンドラ
    • 特徴 : Zero Con guration
    Parcel
    

    View Slide

61. ECMAScript単体で
    モジュール管理できないの？
    

    View Slide

62. • ES6(2015)以降の仕様
    ES Modules
    import sub from ‘./sub.js’;
    • webpack/Parcelは

    ESModulesも変換できる
    

    View Slide

63. 結局どうすればいいの？
    

    View Slide

64. • ESModulesで書くのが主流
    • やりたいことが増えてくると

    webpackじゃないと厳しくなる
    • とりあえず考えたくない場合は

    Parcelが圧倒的に楽
    • 不要になる未来は到底来ない気がする
    

    View Slide

65. その他
    

    View Slide

66. • ESLint, Prettier
    • Mocha, Jest
    • puppeteer
    • SSR
    • Next.js
    • Nuxt.js
    • Service Worker
    • PWA
    

    View Slide

67. 時間切れ
    

    View Slide

68. まとめ
    

    View Slide

69. 15分はあまりにも短すぎる
    

    View Slide

70. よく聞くワード
    「フロントエンドは変化が速い」
    

    View Slide

71. facebook/react - Releases
    • v16.0.0 - 2017/09/27
    • v15.0.0 - 2016/04/09
    • v0.14.0 - 2015/08/08
    

    View Slide

72. ECMAScript
    • 2017 - 2017/06
    • 2016 - 2016/06
    • 6(2015) - 2015/06
    

    View Slide

73. そこまで速いわけでもないのでは？
    

    View Slide

74. なぜ速く感じるのだろう？
    

    View Slide

75. 現実
    

    View Slide

76. 現実
    変化するものが多い
    

    View Slide

77. 私たちは忙しいので、

    すべてを常に追うのは難しい。
    

    View Slide

78. 現実的な話、
    新しいものを一気に導入するのは
    容易じゃない
    

    View Slide

79. ひとつずつやっていこう！
    

    View Slide