フロント単語帳

ピン留めされたアイテム

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

我、本物の素人

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

モチベーション

個々の文法は調べればわかる
ただし読む資料を選別するには、関係する技術としない技術の把握が必要になる
- 記事の早期除外と流用ができるようになる
A と B は新旧置き換えるものか、選択するものか、変換されるものか、などの把握が必要
技術の名前か、構成の名前か、ライブラリの名前か、などの把握が必要
地図とか木とか、そういう形で単語帳を作りたい
そういう形で関係が俯瞰できれば、ある点より先の学習を計画的に遅延することができる

ピン留めされたアイテム

JS

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

see

ECMAScript

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

see

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

Polyfill

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

see

大体→代替

！！

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

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

yarn

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

npx

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

see

React

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

see

React Native

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

Vue

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

SPA

１ページだけのウェブページで提供されるもの ( 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

Angular

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

see

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

see

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

Babel

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

Gulp

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

Grunt

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

SSR

サーバサイドレンダリング ( Server Side Rendering )
SEO とパフォーマンスの点でメリットがある

see

BFF

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

see

CSS

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

Sass

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

SCSS

Sassy CSS

Figma

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

Tailwind CSS

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

see

Chakra UI

React の UI コンポーネントライブラリ
TypeScript でできている
class と style ではなく JSX ( TSX ) でレイアウトする
いったいどんな HTML になるんだろう: fixme

see

Material UI

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

see

ESLint

JavaScript のリンタ
リンタなのでコードの問題を指摘する静的解析ツール
- 未使用変数があるとか、if や for がおかしいとか、再代入に関する警告とか
コードフォーマットの問題も検出できる

see

Prettier

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

see

SEO

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

see

OGP

Open Graph Protocol
SNS や LINE などで Web ページをシェアしたときにタイトルや概要や画像を表示させる仕組み
HTML の Meta タグを用いて設定する
見かけたユーザが開いてくれる可能性を上げるためのもの

see

Remix

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

see

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

nodenv

macOS 向けの Node.js と NPM のバージョンマネージャ
brew などで nodenv を入れ、それで node を入れる

see

nodebrew

macOS 向けの Node.js と NPM のバージョンマネージャ
nodebrew を入れ、それで node を入れる

see

n

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

see

Flutter

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

Redux

状態管理のための JavaScript ライブラリ
React や Angular で使われる
Flux の影響を受けている
純粋な JavaScript で実装されており、Vanila JS や jQuery でも使える
React 専用の API が用意された react-redux も存在する

see

Flux

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

see

Vuex

Vue.js のための状態管理パターンとライブラリ

see

Micro Frontends

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

see

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

CommonJS

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

see

AMD

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

see

UMD

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

Native JS

ES6 に提供される export と import のこと
import が実装されているブラウザならそのまま動作する
未実装ブラウザではトランスパイルが必要

see

Deno

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

see

BEM

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

see

CSS-in-JS

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

see

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

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

BLoC

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

see

分類 ( 叩き )

言語

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