Chapter 01

はじめに

ほげさん
ほげさん
2021.12.19に更新

これは ミライトデザイン Advent Calendar 2021 の 19 日の 記事 Book です

やっとこれで最後の ほげさん ( zenn ) です

今年は少しテンションがおかしくなって 5 つ[1]も投稿することになりましたが、これが最後です

今日から最終日までは、ミライトデザインのメンバーで新入りから社長まで社歴の浅い順にバトンを渡していこうという企画です

ということで一番新入りの僕から

僕は 10 年近い経験のほぼ全てがバックエンドです

転職を機に心機一転、新しいことをやろうと思って Docker とか 認証認可 とか OS / CPU とかをちょっとかじってみたりしましたが、苦手意識のあるフロントエンドからはずっと距離をとって見えないふりをしていました

が、いつまでもそう言ってられないよねってことでちょっとだけ入門しようと思います

僕の入門は地図作りから

転職するまで .jsx なんて見たこともなかったし、webpack なんて聞いたこともなかったのです

今も結局ほぼフロントエンドの仕事はしてないし、始めると言っても何も全くわからないのです

なので、まずは単語の整理をします

狙いは次のようなところです

  • 少しでも話についていけるようになれば、もっと単語を引き出せる
  • 個々の文法などは、必要なときに調べればわかるはず
  • けど読む資料を選別するには ( 浅くてもいいので ) 広い知識が必要になる
    • 関係する技術がわかれば、記事の流用や違う調べ方 ができる
    • 関係しない技術がわかれば、記事の取り捨て選択や読み飛ばし ができる
    • 新旧関係がわかれば、何を改善するものか 察しやすくなる
    • 競合関係がわかれば、特徴に注目 しやすくなる
    • 変換関係がわかれば、前提や隠蔽されている知識 がわかりやすくなる
  • なので、単語を整理した上で関係を図に起こしたい
  • 図で整理できれば、ある部分の学習を計画的に遅延化 させることができるようになる

単語

そもそも何を言ってるかわからないので、フロアで出たほかのチームの会話なんかもメモしてました

それらを片っ端から 1 つ 10 ~ 20 分で調べて ( → スクラップ )、勝手に分類しました
この Book にまとめる過程で増減し、最終的に 85 単語になったみたいです

正直なところ 12 月入ってから着手して 4 ポエム並走しながらやってたので、全然時間が足りてないですうへへ

今後更新する余地は大いにある ( 余地しかない ) ので、おかしいところや不足があれば優しく教えていただけると励みになります

おことわり

各単語に対するつぶやきについて、
🤔 は 12/1 くらいの僕に戻ってしています
😗 は今 ( 12/15 くらい ) の僕です

単語の表記は可能な限り正式なものにしたつもりですが、大文字小文字や区切り文字が異なっていたら教えていただけると幸いです

ロゴはいろいろアレンジもあり正確なものを集めるのが困難だったため、公式のだと思われる中から扱いやすい形のものやよく目にするものを選んで使用しています

この Book の内容は可能な限り正しいと判断したことだけを記載していますが、誤りがあったら指摘していただけると幸いです
また、これは少しでも多くの単語を、詳細に解説する趣旨の Book ではありません
今見えている単語を軸に、詳細に理解するための足掛かりにするものです、ご理解ください

検索用インデックス

分類は僕の独断で、学習の流れやページの都合に合わせて行っています

言語・仕様
JavaScript, TypeScript, JSX, TSX, ECMAScript, CommonJS

変換
コンパイル, トランスコンパイル, モジュールバンドル, Minify, 難読化, ビルド, Babel, webpack, gulp, Grunt, tsc, Polyfill

実行環境
Google Chrome, Edge, Safari, Mozilla Firefox, Webkit, Blink, Gecko, -webkit-, -moz-, -ms-, V8, JavaScriptCore, SpiderMonkey, Node.js, ts-node, Deno

アーキテクチャ
SPA, CSR, SSR, SSG, ISR, BFF, BLoC, Micro Frontend, Flux

JavaScript フレームワーク・ライブラリ
React, Vue.js, AngularJS, Angular, Next.js, Nuxt.js, Remix, Redux, Vuex

デザイン
デザインシステム, Atomic Design, Material Design, Figma, Adobe XD, Storybook, SEO, OGP

CSS アーキテクチャ
BEM, CSS In JS, CSS Modules

CSS フレームワーク・ライブラリ
CSS, Sass, SCSS, SASS, Tailwind CSS, Chakra UI, Material-UI, styled-components

開発補助
npm, npx, Yarn, Bower, nodist, nodenv, nodebrew, n, ESLint, Prettier, Husky

ほか
React Native, Flutter, Wasm

脚注
  1. IntelliJ の設定M1 Mac の Dockerコーディング駄文計算量、そしてこの Book ↩︎