Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

2018.09.27 もくテク

Hajime Mugishima

September 27, 2018
Tweet

More Decks by Hajime Mugishima

Other Decks in Technology

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. 言語自体の話
    2. 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