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

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

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

2018.09.27 もくテク

0f162107f1b716c9fa62d6071eb8b995?s=128

Hajime Mugishima

September 27, 2018
Tweet

Transcript

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

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

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

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

  6. 現実

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

  8. 〜はじめに〜

  9. 15分じゃ無理

  10. 〜目標〜 1. 言語自体の話 2. 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. ひとつずつやっていこう!