Zenn
Open2

[メモ]モダンフロント/Game

frontend
as_pmlas_pml

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

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を投げる
as_pmlas_pml

mobile App (Game)

KyeWord

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