Closed73

フロント単語帳

ピン留めされたアイテム

何かを見真似で書く前に、まず最低限の単語の整理

我、本物の素人

フロントエンドとはみたいなのは今は無視


モチベーション

  • 個々の文法は調べればわかる
  • ただし読む資料を選別するには、関係する技術としない技術の把握が必要になる
    • 記事の早期除外と流用ができるようになる
  • A と B は新旧置き換えるものか、選択するものか、変換されるものか、などの把握が必要
  • 技術の名前か、構成の名前か、ライブラリの名前か、などの把握が必要
  • 地図とか木とか、そういう形で単語帳を作りたい
  • そういう形で関係が俯瞰できれば、ある点より先の学習を計画的に遅延することができる
ピン留めされたアイテム
  • 1. JS
  • 2. ES
  • 3. TS
  • 4. コンパイル
  • 5. トランスパイル
  • 6. Polyfill
  • 7. JSX
  • 8. TSX
  • 9. npm
  • 10. bower
  • 11. yarn
  • 12. npx
  • 13. React
  • 14. React Native
  • 15. Vue
  • 16. SPA
  • 17. SFC
  • 18. Angular
  • 19. AngularJS
  • 20. Next.js
  • 21. CSR
  • 22. SSR
  • 23. SSG
  • 24. ISR
  • 25. Nuxt.js
  • 26. Webpack
  • 27. Babel
  • 28. Gulp
  • 29. Grunt
  • 30. SSR
  • 31. BFF
  • 32. CSS
  • 33. SASS
  • 34. SCSS
  • 35. Figma
  • 36. Tailwind
  • 37. Chakra UI
  • 38. Material UI
  • 39. ESLint
  • 40. Prettier
  • 41. SEO
  • 42. OGP
  • 43. Remix
  • 44. Node
  • 45. TSC
  • 46. TS-Node
  • 47. nodist
  • 48. nodenv
  • 49. nodebrew
  • 50. n
  • 51. Flutter
  • 52. Redux
  • 53. Flux
  • 54. Vuex
  • 55. Micro Frontend
  • 56. Jest
  • 57. Wasm
  • 58. Common JS
  • 59. AMD
  • 60. UMD
  • 61. Native JS
  • 62. Deno
  • 63. BEM
  • 64. CSS In JS
  • 65. styled-components
  • 66. emotion
  • 67. CSS Modules
  • 68. BLoC

JS

  • 最初は Netscape で作られた
  • 言語仕様は ECMAScript として標準化されている
  • 実装はエンジンに提供される
    • Google Chrome の V8
    • Firefox の SpiderMonkey
    • Safari の JavaScriptCore
  • DOM の仕様は ECMAScript とは独立している
  • JavaScript にトランスパイルされる言語の総称を alternative JavaScript ( altJS ) という
    • TypeScript / CoffeeScript
  • altJS と退避して Vanilla JS と言ったりする

see

https://ja.wikipedia.org/wiki/JavaScript

ECMAScript

  • JavaScript の言語仕様
  • Edition 1 ~ 5 は ECMAScript 5 が仕様名で、通称が ES5 など
  • それ以降は ECMAScript 2015 が仕様名で、通称が ES2015 / ES6 など
  • 現時点の最新は ECMAScript 2020 / ES11
  • Java8 だの Python3 だのと同じで、言語機能が拡張され続けている
  • JavaScript にバージョンがあるわけではなく、どの ECMAScript に準拠しているかで認識する
  • todo: JDK ベンダーが複数あるのと同じ?

see

https://ja.wikipedia.org/wiki/ECMAScript

TypeScript

  • Microsoft に作られた
  • 書いたコードを JavaScript にトランスパイルできる
  • ECMAScript 2015 の厳密なスーパーセットである
  • ので TypeScript は JavaScript を完全に使用できる
    • JavaScript ライブラリを TypeScript から使える

コンパイラ

  • プログラミング言語で書かれたプログラムを、機械語に変換するソフトウェア
  • 変換をコンパイラという

トランス ( コン ) パイラ

  • あるプログラミング言語で書かれたプログラムを、別のプログラミング言語の同等のプログラムに変換するソフトウェア
  • 変換をトランス ( コン ) パイルという
  • Babel などで行っていたが TypeScript も登場した ( fixme )
  • TypeScript → JavaScript のほか、ECMAScript 間の変換も含まれる ( fixme )
  • height ?? 100(height !== undefined && height !== null) ? height : 100

see

https://ja.javascript.info/polyfills

Polyfill

  • 古いブラウザでは使えない処理を、同等の機能で補うライブラリのようなもの
  • 実装が提供されていない場合に、大体実装を提供するもの
  • if (!Math.trunc) { Math.trunc = function...

see

https://ja.javascript.info/polyfills

JSX

  • JavaScript XML の略
  • 拡張子は .jsx
  • React でマークアップ言語を記述するための XML 風の構文
  • JavaScript の拡張構文
  • ブラウザは直接解釈することはできないので、Babel などのコンパイラを使う
    • fixme ( トランス ) コンパイラ?
function render() {
  return (
    <ul>
      <li>foo</li>
      <li>bar</li>
    </ul>
  );
}

js の糖衣構文ということでいいのかな

function render() {
  return React.createElement( 
    'ul',
    null,
    React.createElement('li', null, 'foo'),
    React.createElement('li', null, 'bar')
  );
}
  • React.createElement に置き換えられる
  • transform-react-jsx という Babel のプラグインで変換先を変えることができる
  • ので Vue でも使える ( fixme webpack まで遅延化 )

see

https://qiita.com/nabepon/items/87bb3b4f1e7bfa342489
https://ja.reactjs.org/docs/introducing-jsx.html
https://ja.reactjs.org/docs/jsx-in-depth.html

TSX

  • JSX を含む TypeScript
  • 拡張子は .tsx

npm

  • Node のパッケージマネージャ
  • npm も JavaScript 製
  • 2020 に GitHub に買収された ( fixme )
  • JavaScript 製だと、インストールに Node が必要? ( fixme )
  • サーバサイドで用いられる ( fixme )

bower

  • npm は Node のためにあるから、フロントのパッケージ管理には向いてないのでは、と考えた
    • Bower で jquery や Angular などを管理して
    • npm で Node のモジュールを管理した
  • webpack の登場で npm でもフロントエンドを管理できるようになった ( fixme )
  • 製作者から非推奨であり npm / Yarn への乗り換えが推奨されている
  • Node やらないのに npm いれる問題 ( fixme )

see

https://qiita.com/jonghyo/items/e931f7b6357995314599
https://qiita.com/megane42/items/2ab6ffd866c3f2fda066

yarn

  • Node のパッケージマネージャ
  • 2016 Facebook 公開
  • npm と互換があり、同じ package.json が使える
  • npm や homebrew でインストール
  • 速く、安全で、バージョン固定がしやすい

npx

  • npm に同梱されているコマンド
  • ローカルインストールしたコマンドを実行する
  • ローカルの Node モジュールのパスからコマンドを探し実行する
  • ローカルになければインストールし、実行後に削除する
  • 昔は package.json と npm で入れたコマンドは npm run-script で実行していた

see

https://dev.classmethod.jp/articles/node-npm-npx-getting-started/
https://qiita.com/sivertigo/items/622550c5d8ec991e59a6

React

  • Facebook とコミュニティに開発されている UI 構築のための JavaScript ライブラリ
  • Vue と比較して
    • create-react-app の他、プラグインなどを入れる
    • ロジック部分が関数的
    • TypeScript との相性が良い
    • 堅牢
    • 性能面で有利
    • ルータや永続化などのライブラリは自分で選択して持ってくる
    • JSX で HTML と JS をまとめて書くのが主流

see

https://qiita.com/102Design/items/ae018dc80a4d879d92a8
https://www.agent-grow.com/self20percent/2020/12/21/which-use-react-or-vue-2021/
https://zenn.dev/tomon9086/articles/5f4014d8004dc5b5f63e

React Native

  • Facebook とコミュニティに開発されているモバイルアプリケーションフレームワーク
  • React で Android, iOS, Web のアプリケーションを開発できる

Vue

  • UI 構築のための JavaScript フレームワーク
  • React と比較して
    • 手軽
    • vue-cli のオプションが豊富
    • 馴染みやすい
    • ルータや永続化などのライブラリが公式サポートされている
    • SFC で1ファイルに HTML と JS を分離して書くのが主流
  • Vue3 というので TypeScript 相性とロジック実装が改善される見込みらしい

SPA

  • 1ページだけのウェブページで提供されるもの ( Single Page Application )
  • ページ遷移がなくなり直感的
  • 読み込み量が減り早い
  • アプリと使用感が似ている

SFC

  • 単一ファイルコンポーネント ( Single File Components )

AngularJS

  • Google とコミュニティに開発されている JavaScript 製の Web フレームワーク
  • MVC / MVVM アーキテクチャを提供する
  • MEAN というサーバからクライアントまでを全部 JavaScript / JSON で実現しようと言う構成があり、それの一部
    • MongoDB ( DB )
    • Express.js ( Web フレームワーク )
    • Node.js ( サーバサイドアプリケーション )
    • AngularJS ( ブラウザ上の MVC フレームワーク )
  • 1 と呼ばれた方

see

https://ja.wikipedia.org/wiki/AngularJS

Angular

  • Google とコミュニティに開発されている TypeScript の Web フレームワーク
  • AngularJS の開発チームが作り直した別のフレームワーク
  • 2 と呼ばれた方

see

https://ja.wikipedia.org/wiki/Angular

Next

  • Vercel とコミュニティに開発される Node.js 上の React ベースフレームワーク
  • React で行うブラウザレンダリングを拡張し、サーバサイドレンダリングを行うことが可能
  • React は CSR だが、課題もある
    • 初回読み込みが遅くなりやすい
    • 処理やレンダリング性能がスマホなどに依存する
    • SEO や OGP の点で不利だったりする
  • サーバレンダリングの方式を3つサポートしている
    • SSR
    • SSG
    • ISR

see

https://ssaits.jp/promapedia/technology/what-is-next-jsreact.html
https://zenn.dev/a_da_chi/articles/105dac5573b2f5

CSR

  • クライアントサイドレンダリング ( Client Side Rendering )
  • 空の HTML と JS を返し、クライアント側で JS を使ってコンテンツを取得して埋める
  • なので SEO や OGP に対応しづらい

SSR

  • サーバサイドレンダリング ( Server Side Rendering )
  • SPA ではブラウザへまず HTML を返し、コンテンツを JS で生成する
  • 遷移のたびにリクエストが発生しない代わりに、巨大になると初回読み込みが伸びる
  • SSR ではサーバでレンダリングしたものを返す

SSG

  • 静的サイト生成 ( Static Site Generation )
  • SSR ではリクエストごとにサーバがレンダリングをする
  • SSG ではリクエストではなくビルド時にレンダリングをする
  • 高速だが当然動的に内容を変更できない

ISR

  • 段階静的サイト生成 ( Incremental Static Regeneration )
  • ISR ではリクエストに対して事前にレンダリングした情報を返しつつ、裏でレンダリングをする
  • SSG + SSR のような方式

Nuxt.js

  • Next.js に影響を受けた Web アプリフレームワーク
  • ブラウザでもサーバでも同一の単一 Vue.js ファイルコンポーネントを使える
  • Next.js と同じく SPA から SSR などまで行える

技術選定をするわけではないので、この程度で

Webpack

  • JavaScript のモジュールバンドラであり、依存関係のあるモジュールを受け取り静的アセットを生成する
    • JavaScript や SCSS などを受け取り .js と .css にする
  • Node.js のサーバサイドで動かす
  • NPM などはライブラリの管理だが、Webpack はビルドツール fixme
  • JavaScript トランスパイラや SASS コンパイルなどが包含される? fixme
  • 開発時はファイルを分割したいがデプロイでは圧縮したい、などが実現できる

see

https://qiita.com/kamykn/items/45fb4690ace32216ca25

Babel

  • JavaScript トランスコンパイラ
  • 主に ES6+ を古い JavaScript に変換するために使われる
  • 最新機能を用いて実装し、変換していろいろなブラウザで動かすことができる
  • たとえばアロー関数を通常の関数宣言に変換したり
  • JSX なども変換できる
  • Polyfill を提供する

Gulp

  • JavaScript のタスク自動化ツールで、Node.js と npm に基づいている
  • テストや圧縮などの自動化に使われる
  • ES6 から ES5 への変換が行える fixme Babel を使っている?

Grunt

  • JavaScript のタスク自動化ツールで、Node.js と npm に基づいている
  • Gulp より先に生まれた

BFF

  • Backends For Frontends は構成例の名前
  • フロントエンド専用のバックエンドサーバで、API コールや HTML 生成を行うサーバを設けるアーキテクチャ
  • 従来サーバが行っていた責務をバックエンド専用とフロントエンド専用に分ける
    • DB 検索やデータの更新など ( バックエンド )
    • ページの構築やユーザ入力の受付 ( フロントエンド )
  • 1990 年くらいは HTML が基本で、サーバはモノシリックだった
  • 2000 年くらいから JavaScript で HTTP リクエストをする Ajax 通信が広まり、サーバはデータ送受信の役割が多くなった
  • さらにモバイルなどのクライアントが増え、サーバは極特定のことに特化した API にわかれていった ( e.g. マイクロサービス )
  • そうするとクライアントごとに UI や表示項目や画面遷移が違うなどの差分が出て来て、責務特化の API たちが対応しきれなくなった
  • なので間にモバイル用 BFF や Web 用 BFF などを置くようになった

see

https://atmarkit.itmedia.co.jp/ait/articles/1803/12/news012.html
https://techblog.zozo.com/entry/zozo-aggregation-api-bff

CSS

  • Cascading Style Sheets は HTMl の修飾を指示する仕様の1つ
  • World Wide Web Consortium ( W3C ) が勧告する
  • メディアに合わせてスタイルシートを切り替えることで、メディアごとに表示を変えられる
  • ユーザエージェント、Web サイト作成者、ユーザの定義した CSS を重ねる ( Cascading ) することができる

Sass

  • Syntactically Awesome Style Sheets はスタイルシート言語
  • CSS で解釈される 2 種類の構文で構成されたスクリプト言語である
  • インデント構文は次下げを用いる、単に Sass と言ったらこれを指すことも多い
  • SCSS 構文はブロック書式を用いる
  • Sass インタプリタが SassScript を CSS に変換する fixme これが SCSS ?
  • $var@for などを使ったり、ブロックを入れ子にしたりできる

https://ja.wikipedia.org/wiki/Sass

Figma

  • Web ベースのプロトタイピングツール
  • ワイヤーフレームにとどまらず、ページ遷移なども確認できる
  • CSS が確認できる

Tailwind CSS

  • CSS フレームワーク
  • 小さい util class を直接複数つけていくのが基本方針っぽい
  • Tailwind CSS のクラスをまとめたクラスを作るのも容易
  • 一般の設計や Bootstrap などでは、どの UI に対して適用するかを明確にする
  • 対して Tailwind CSS は UI 構造を CSS に持ち込まない

see

https://fixel.co.jp/blog/tailwindcss/

Material UI

  • Google の React の UI コンポーネントライブラリ
  • Material Design という Google が自社サービスに統一的なデザインを持たせるためのガイドラインがある
  • React 向けに Material Design の UI 部品を定義したコンポーネント集が Material-UI
  • TypeScript でできている
  • class と style ではなく JSX ( TSX ) でレイアウトする
  • いったいどんな HTML になるんだろう: fixme

see

https://codezine.jp/article/detail/14322

Prettier

  • JavaScript や JSX や TypeScript のフォーマッタ
  • フォーマッタなのでコードの整形をするツール
    • インデントや改行など
  • ESLint でもある程度のフォーマットはできるが、Prettier の方が対応できる形が多い
  • ESLint はエラーに該当したら修正、Prettier は基本のスタイルに整形、という点が違う
  • Prettier は構文解析は行わない

see

https://qiita.com/soarflat/items/06377f3b96964964a65d

SEO

  • 検索エンジン最適化 ( Search Engine Optimization )
  • 検索結果で Web サイトが上位に表示されるように調整すること、その手法
  • ホワイトハット SEO は、ユーザに重点を置いてサイトを改善する最適化手法
    • 検索エンジンが利用できるメタデータを提供する
    • コンテンツを構造化して意味を明確にする
    • ユーザが検索するワードとサイト内のワードの一致度を上げる
    • ほかの Web サイトからのリンクを多くする、など
  • ブラックハット SEO は、検索エンジンを騙すようにサイトを調整する最適化手法
    • 透明な文字でいろいろなキーワードを仕込む
    • Web サイトに直接関係ない単語の羅列をする
    • 不適切な、ユーザの目には見えないリンクを大量に貼る、など

see

https://ja.wikipedia.org/wiki/検索エンジン最適化

Remix

  • React ベースの Web フレームワーク
  • 2021/11 月末にリリースされたばかり
  • SSG や ISR の機能がない
    • SSG を CDN で配信する方針が一般化したが、SNS などは SSG では対応しきれない
    • ISR が生まれたが複雑さやラグなどの問題がなくなりはしない
    • SSR でもエッジコンピューティングや詳細なキャッシュコントロールでパフォーマンスを出せる

see

https://zenn.dev/catnose99/articles/dfc9c1197daec3
https://zenn.dev/kaa_a_zu/articles/fbd06ca2cc3b86

Node.js

  • JavaScript の実行環境の 1 つ
  • ウェブブラウザの中ではなく、サーバサイド JavaScript の一種
  • いくつかの CommonJS の仕様を実装している

tsc

  • TypeScript のトランスパイラ
  • .ts を .js にする

ts-node

  • Node.js 環境で TypsScript を実行するライブラリ
  • tsc でトランスパイルして生成された JavaScript を実行する、というプロセスを省略する
  • シンプルで速く、1 操作で実行できる
  • が、生成される JavaScript を確認できなかったり、毎回トランスパイルが走ったりする

nodist

  • Windows 向けの Node.js と NPM のバージョンマネージャ
  • 要するに Node.js の pyenv や rbenv に相当するもの
  • インストーラや chocolatey などで nodist を入れ、それで node を入れる
  • 2019 年ごろから開発は止まっている

see

https://github.com/nullivex/nodist

n

  • macOS や WSL や Linux 向けの Node.js と NPM のバージョンマネージャ
  • PowerShell や Git Bash や Cygwin では動かないらしい
  • brew などで n を入れ、それで node を入れる
  • node がある場合は npm でも n を入れられる

see

https://github.com/tj/n

Flutter

  • Google に開発された UI の SDK で、2018 年末にリリースされたモバイルアプリフレームワーク
  • 単一のコードベースを Android, iOS, Linux, macOS, Windows, Google Fuchsia で動くアプリにできる
  • Flutter アプリは Google に開発されたプログラミング言語 Dart で実装する
  • ライブラリも基本的に Dart で書かれている
  • Flutter エンジンは C++ で書かれている

Flux

  • Facebook が提唱しているアプリケーションで行うデータフロー管理のアーキテクチャパターン
  • View, Action, Dispatcher, Store の 4 要素で構成する
  • 単方向へデータが流れることで追いやすくする
  • AngularJS の双方向データフローとは対照的な React の単方向データフローの概念をサポートするため
  • 一般的な MVC アーキテクチャの代替となるもので、オブザーバパターンの亜種と考えることができる

see

https://zenn.dev/ryotarohada/articles/9a677d6f7fdc8e

Micro Frontends

  • 単体で実行可能な、ページから切り離された特定の UI 領域のこと
  • 次の利点がある
    • 部分改修がしやすい
    • 独立デプロイがしやすい
    • コードベースがシンプルになる
    • 自立チームと合う
  • 次のような機能を提供し、アプリケーションに統合される
    • ヘッダーなどのレンダリング
    • 認証などの横断機能
  • バックエンド通信のパターンとして BFF を用いたりする

see

https://www.neko3cs.net/entry/introduction-to-micro-frontends
https://engineering.mercari.com/blog/entry/2018-12-06-162827/

Jest

  • Facebok に保守されている JavaScript のテストフレームワーク

Wasm

  • WebAssembly はもともと Mozilla Foundation が主導した仮想の ISA もしくはプログラミング言語の一種
  • C, C++, Rust, Go, Kotlin などのコンパイル先として Wasm バイナリが生成される
  • ブラウザなど様々な環境の仮想マシンで実行される
    • 実在の CPU に対する ISA ではないため仮想マシンが必要
    • スクリプト言語の実行形式に近いが、構造自体が ISA に似ているため解釈や変換が極めて高速
  • Wasm 自体は ( 仮想の ) ISA なので、ファイル IO や DOM アクセスを提供しない
  • かわりに Wasm エコシステムが API を定義し、ランタイムが実装している
  • ブラウザ上で JavaScript と連携することも可能

see

https://ja.wikipedia.org/wiki/WebAssembly
https://e-words.jp/w/WebAssembly.html

CommonJS

  • サーバサイドや CLI など、ブラウザ外における JavaScript の各種仕様を定めるプロジェクト
  • 2009 年に Mozilla のエンジニアが ServerJS として立ち上げた
  • Module や Promise などは ES6 で定められることになったりした
  • 実行前に JavaScript を単一 JavaScript ファイルにするため、Node.js が必要

see

https://ja.wikipedia.org/wiki/CommonJS
https://tsuchikazu.net/javascript-module

AMD

  • 悲同期モジュール定義 ( Asynchronous Module Definition )
  • 非同期に JavaScript を読み込むので、ブラウザのみで実装できる
  • 関数やコンストラクタや Json などオブジェクト以外のモジュールも許容するが、若干シンタックスが冗長

see

https://qiita.com/chuck0523/items/1868a4c04ab4d8cdfb23

UMD

  • Universal Module Definition は CommonJS と AMD の両方をサポートできる

Deno

  • V8 JavaScript エンジンと Rust に基づいた JavaScript / TypeScript のランタイム環境
  • 2018 年に発表された
  • Node.js の作者に開発された、Node.js を改良したもの
  • デフォルトで TypeScript を実行できたり、モジュールシステムが CommonJS から ES Module になってたりする
  • ランタイムとパッケージ管理を行うので、別途パッケージ管理システムを必要としない
  • package.json と node_modules ではなく、import from url という形で依存させる

see

https://ja.wikipedia.org/wiki/Deno
https://qiita.com/azukiazusa/items/8238c0c68ed525377883

BEM

  • CSS 設計手法の一つで Block, Element, Modifier を用いた厳格な class の命名ルールが特徴
  • block__element--modifier
  • content content--yellow
    • content__input
    • content__btn
  • 差分を --Modifier で重ねる

see

https://pikawaka.com/html-css/bem

CSS-in-JS

  • JavaScript に CSS を書く
  • ただ JavaScript 変数を style 属性に展開するもの ( インライン )
  • もしくは JavaScript で行った定義を style タグに展開するもの
    • 擬似クラスやメディアクエリなど、全ての CSS をインラインで対応できるわけではないから
  • モダンなコンポーネント化に即して CSS も書けるようになる

see

https://mkai.hateblo.jp/entry/2018/08/25/135439

styled-components

  • CSS-in-JS のライブラリのひとつ

emotion

  • CSS-in-JS のライブラリのひとつ
  • styled-components などのライブラリに影響を受けている

CSS Modules

  • CSS の影響範囲をコンポーネント単位で閉じようという CSS の設計概念・指針
  • クラス名を Base64 エンコードすることでほかと衝突しないようにしている
    • 内部で css-loader という webpack loader を使っている
  • index.css に .button-normal を定義する形から button.css に .normal を定義する形に変えられる
  • BEM とは対照的に、各クラスには親子関係はなく全ての属性が含まれる

see

https://qiita.com/jagaapple/items/7f74fc32c69f5b731159
https://morishitter.hatenablog.com/entry/2015/09/28/103334
https://postd.cc/css-modules/

( ロストしてのでやり直した... )

BLoC

  • Business Logic Components とは UI から分離してロジックを実装する実装パターン
  • Google Flutter チームからも推奨されている
  • 入力内容の計算などのロジックと、表示や整形などの処理を分離する考え方
  • プラットフォームに依存しないようにする

see

https://qiita.com/kabochapo/items/8738223894fb74f952d3

分類 ( 叩き )

言語

  • JavaScript
  • TypeScript
  • JSX
  • TSX

仕様

  • ECMAScript
  • CommonJS

実行環境

  • V8 JavaScript Engine
  • Node.js
  • ts-node
  • Wasm
  • Deno

ライブラリ

  • React
  • Vue
  • Angular
  • AngularJS
  • Redux
  • Vuex
  • core-js
  • Polyfill.io

テスト

  • Jest

フレームワーク

  • React Native
  • Next.js
  • Nuxt.js
  • Remix

変換行為

  • コンパイル
  • トランスパイル

代替コード

  • Polyfill

変換ツール

  • Webpack
  • Babel
  • Gulp
  • Grunt
  • tsc

パッケージマネージャ

  • npm
  • npx
  • bower
  • yarn

アーキテクチャ

  • SFC
  • SPA
  • CSR
  • SSR
  • SSG
  • ISR
  • BFF
  • BLoC
  • Micro Frontend
  • Flux

スタイル

  • CSS
  • SASS
  • SCSS

スタイルフレームワーク

  • Tailwind

スタイルライブラリ

  • Chakra UI
  • Material UI

CSS アーキテクチャ

  • BEM
  • CSS In JS
  • CSS Modules

CSS ライブラリ ( FW? )

  • styled-components
  • emotion

デザインツール

  • Figma
  • XD

開発補助

  • ESLint
  • Prettier

戦略

  • SEO
  • OGP

開発環境構築

  • nodist
  • nodenv
  • nodebrew
  • n

番外

  • Flutter
このスクラップは2021/12/19にクローズされました
作成者以外のコメントは許可されていません