モダンフロントエンド技術

1.初期

• HTML
• CSS
• JS (jQuery)

2.最近の技術概観 (カオス)

AltJS

• TypeScript
• Dart
• Sass/Scss

Linter/Formatter

• ESLint
• Stylelint
• Prettier

Bundler

• webpack
• Rollup
• Parcel

CSS in JS

• Styled components
• Emotion
• jss

UI Library

• React/Next.js
• Vue/Nuxt.js
• Svelte

Test

• Jest
• Enzyme
• TestCafe

Store

• Redux
• Vuex
• Recoil
• RxJS

Cl/CD

• CircleCl
• AWS Amplify
• AWS CodePipeline
• Jenkins..

AWS

• Amplify
• S3
• CloudFront
• CodeCommit
• CodeBuild
• CodeDeploy

Others

• GraphQL(Apollo, graphql-*)
• BFF
• Atomic Design
• Each CDN

3. 設計

monolithic

ソフトウェアにおいては、全体が1つのモジュールでできていて分割されていないことを示す

• Web Application Framework
  • View (HTML(template engine), CSS, JS)
  • ⇔Controller
  • ⇔Model
• Database

modern

• Client(Front-end)
  • React, Svelte, Vue
    • automatic build/deploy
    • controll UI by JS
• ⇔Web API(非同期通信)
• ⇔Database

モダンフロントエンドの特徴

• GUI AppはJSでビルドされれている
• バックエンドとフロントエンド(React, Vue, Svelte)が分割されて開発されている
• SPA（シングルページアプリケーション）
• PWA, SSR, TypeScript, Cl/CD, JAWStackなど技術がたくさん登場...
  メリット
• UX改善
• DX(developer experience)改善

4. OSS(Open Source Software)

レベル

1. READMEなどのドキュメントのアップデート
2. 公式サイトの日本語翻訳
3. 個人的にライブラリーを開発する
4. サンプルレポジトリをアップデートする
5. レポジトリにPRを投げる

mobile App (Game)

KyeWord

• ゲームはDO
• 世界観から入るものは作らない
• ゲームはシステム
• 聞いて面白い（頭に思い浮かぶ）＝見たく成るゲーム＞見たら触りたくなるゲーム
• 副詞（ニュルニュル）＋動詞（逃げる）
• ジャンルになっているのは評論家。クリエーター目線ではない
  ＝＝＝＝＝＝＝＝＝
• プロトタイプではゲームの一番面白い部分のコアを作る
• 説明されると面白いことはたくさんある
  　→いいものは実際あるが良いからと言ってヒットするわけではない、が、ヒットしたものはいいもの
• いいものを作っていいものを届ける（パッ(0.3s)と見てわかりやすい、使いやすい、動く）
• 制作期間と内容のトレードオフ（コンテンツ（映画・ビジネス）の考え方）