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. AltJSの例 • TypeScript - Microsoft製 / よく聞く • Dart -

    Google製 • ReasonML - Facebook製 • CoffeeScript - あんまり元気がない
  2. JSと型 • JSは動的型付言語 • データ型は7種類のみ • String • Number •

    Boolean • Object • null • unde ned • Symbol (ES2015+)
  3. 型を強化する色々 • TypeScript • Flow • 静的型付けのできるAltJS • 対応ライブラリが多い •

    個人的にオススメ • ES上に静的型付けのみを提供する • コメントで定義できる
  4. e.g. 追加ボタンでタスクを追加 $(‘#add-button’).on('click', () => { const input = $('<input>');

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

    input.attr('type', 'text'); input.addClass('todo'); $(‘#todo-list').append(input); }); 仕様変更 →classの追加
  6. 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で囲む
  7. 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件ごとに区切る
  8. 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件を上限
  9. 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の形は?
  10. さっきの例を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を 宣言的に定義
  11. React Facebook / VirtualDOM / JSX • 事例・情報が多い • 他ライブラリとの依存が薄い

    • JSX書くのがつらい • 結局他ライブラリが必要になる
 (Redux, React-Router, など) • トータルで記述量が多くなりがち
  12. Vue コミュニティ / VirtualDOM / SFC • 日本語ドキュメントが充実 • 学習コストが低め(と思う)

    • 関連ライブラリとの一体感 • 型付けがつらい • 大企業の後ろ盾がないので、
 人によっては不安になるかも
  13. Google / フルスタック / DI • 全部入りなので慣れると強いらしい • TypeScriptとの相性が良い
 (公式で推奨)

    • 独自の概念が多い • 学習コストが高い Angular (経験が薄いので偉そうなことを書けない)
  14. • ESLint, Prettier • Mocha, Jest • puppeteer • SSR

    • Next.js • Nuxt.js • Service Worker • PWA