【フロント用語が怖くない】30代以上のエンジニア向けフロントエンド用語集
早速ですがこの記事は、フロントエンドという名の魔境で使われている言葉が全くわからん！って人向けの記事です。
これを書いたのは私自身がフロントエンドエンジニアと話したり、ネットでの用語を見たりする時、こう思っていたことがきっかけです。
「言っていることが全然わからん・・・」
「横文字多すぎ、なんとかjs多すぎ」
「意味を調べても、説明の用語がそもそもわからん」
聞けばいいじゃんと思うかもしれませんが、根底にあるのが「そんなことも知らないのかと思われたくない」ということ。30代になると見栄も張りたくなってしまいます。
ということで「これではいかん」と思い、たくさん調べ自分なりにまとめていたものを公開します。同じように「フロント＝魔境」と感じている人に役に立てると思います。
なお、この単語集のレベル感としては、「使ったことはないけど、〇〇というくらいだったら知ってるよ」と言えるようなレベル感、最低限恥をかかない程度になっています。
※当面、ブラッシュアップを随時し、ある程度固まったら有料記事にしようと思っています。誤った情報があるかもしれませんが、温かく教えて下さい。
では、本題の用語集です。
★フロント系用語（基本用語）★
ライブラリ
◆これだけおさえる
便利な機能（プログラム）がまとまっているもの。
◆補足
・使いたい機能をゼロから作るのではなく、用意されているものを使うことで作業効率が上がるというメリットがある
・他のツール同様、ライブラリ側に脆弱性が見つかるというケースもあり、管理や対策は必須
フレームワーク
◆これだけおさえる
アプリケーションを開発するのに必要な機能が、デフォルトで揃っているもの。
◆補足
・ライブラリとの違いは、フレームワークの場合、プログラムを追記しなくてもフレームワーク単体で最低限のアプリケーションとして動作する点が異なる
※ライブラリは関数やクラスの集合体のため、ライブラリ単体では動作しない
★フロント系用語（CSS）★
CSS3（読み：シーエスエススリー）
◆これだけおさえる
CSSの最新版の仕様こと。
◆補足
・最初のCSS(=CSS1)は1996年、CSS2が1998年、CSS2.1が2011年に勧告された。CSSの後にある数字はバージョンではなく、レベルという言い方をする
・CSSは互換性があり、従来のCSSで使えるものはそのままCSS3でも使える
ベンダープレフィックス
◆これだけおさえる
CSSのプロパティまたは値の前に書くにつける文字のこと。
◆補足
・CSSでの正式採用の前に、ブラウザ側でその新機能を先行して使えるようにすることがあり、その機能を使いたい（有効化させたい）時に記述するもの
・「-webkit-」：Google Chrome、「-moz-」：Firefoxなど、決まった文字が使われる
・現状では試験的な実装から正式実装になったものも多く、一般的に仕様されるCSSにはベンダープレフィックスは（ほぼ）不要となった
BEM（読み：ベム）
◆これだけおさえる
CSSのクラス名をつける時の、厳格な命名ルールのこと。
◆補足
・BEMは最もメジャーなCSS命名規則
・全員が好き勝手なクラス名をつけるととんでもないことになるため、明確なルールを共有しましょうという目的のもの。
・「Block__element--modifier」の形で命名され、可読性、拡張性、メンテナンス性に優れている
・BEM以外の命名規則としては、OOCSS(オーオーシーエスエス)、SMACSS(スマックス)、FLOCSS(フロックス)が有名
レスポンシブデザイン
◆これだけおさえる
閲覧するデバイスに合わせて、レイアウトを自動調整するデザインのこと。
◆補足
・レスポンシブ（responsive）：とは「敏感に反応する」という意味
・CSSに『画面幅が○○px以下ならばこのスタイルを適用』といった記述を行い見た目を変化させる
・ユーザーの利便性に直結するため、現在の主流でありかつGoogleの推奨する方法
viewport（読み：ビューポート）
◆これだけおさえる
表示領域のことで、レスポンシブデザインに対応するためにhtmlにviewport…という記述をする必要がある。
◆記述
・htmlのheadタグに次の文を入れる
<meta name="viewport" content="width=device-width, initial-scale=1">◆補足
・ネットで調べると、initial-scaleの値について「1」、「1.0」と両方の記載があるがどちらも同じ
・上の構文について意味を理解しようとすると深みにはまるため、意味を理解せず定型文として入れているくらいの人も結構多い様子
メディアクエリ
◆これだけおさえる
レスポンシブデザインをするために使う記述のこと。
◆記述
・『@media screen and …』という書き方をする
@media screen and (max-width:480){
480px以下の画面サイズではこうして下さいという記述を書く
}◆補足
・このメディアクエリを使用するには上のワード「viewport」の記述が必要
コンテナクエリ
◆これだけおさえる
レスポンシブに対応するために使うもので、メディアクエリより便利に使えるようになったもの。
◆補足
・メディアクエリではウインドウサイズを基準にするのに対し、コンテナクエリは任意の要素を基準にできる点がパワーアップした※例えば「ある要素の横幅が600px以下の時、子要素のレイアウトを変更する」等、手軽に実現できるになった
・2023/2/14、Chrome、Edge、Firefox、Safariすべてのブラウザに対応
Sass（読み：サス ※人によりサース）
◆これだけおさえる
変数が使える、入れ子構造（ネスト）が使える等、CSSを効率的に書けるようになったもの。
◆補足
・拡張子「.scss」。このファイルをコンパイルし、「.css」の形式で使用する
・慣れてくるとSASSを見るだけでCSSとhtmlがイメージできる
・記法が２つある（SASS、SCSS）。基本的にはSCSS記法を使う（こっちの方が人気）。また、SassとSASSは別物ということに注意。SassとそのSassの記法の一つであるSASSがある。
カスタムプロパティ（CSS変数）
◆これだけおさえる
CSSでも変数が使えるようになった。
◆補足
・変数を使うメリットはいうまでもないが、それをCSSでも使えるようになった（2015年に勧告）
・Chrome、Safari、Edge、Firefox等、メジャーなブラウザーで利用可能
・Sass（前述）でも変数機能は提供されているが、コンパイルしなければならない。一方、CSS変数はブラウザ上でそのまま処理され（コンパイル不要）、JavaScriptから値にアクセスできるという点が大きく異なる
※Sassは不要になるのでは？という問いには現状「No」。ネスト、継承などSassの便利な点もあるためSassは不要にならず併用するのが現実的となる。
Bootstrap（読み：ブートストラップ）
◆これだけおさえる
Twitterが開発したCSSのフレームワーク。
◆補足
・知識がなくても見栄えの良いサイトできる、工数が削減できるといったメリットがある。レスポンシブデザインにも対応。
・使用率はぶっちぎり1位（State of CSS 2022より）。だが徐々に減少傾向
・用意されているものを使うため、独自性のあるデザインにはあまり向かない。Bootstrapにないパーツが必要になった時に、作成に時間がかかるなどのデメリットあり
Tailwind CSS（テールウィンドウシーエスエス）
◆これだけおさえる
たくさんの便利なクラスを用意してあるCSSのフレームワーク。
◆補足
・普通、スタイルを作る時に「クラスを作って⇒htmlにそのプロパティを入れる」という流れだが、「クラスを作って」がなくなるため、開発効率がアップする
・クラス名を見ただけで（例：font-bold、text-red）何を設定するものなのかわかりやすい、クラス名の命名というダルイことがなくなるというメリットも
・レスポンシブ、ダークモード対応も比較的簡単にできる
・2、3年前から流行りだし現在も利用者増加中
★フロント系用語（JavaScript）★
DOM（Document Object Model、読み：ドム）
◆これだけおさえる
JavaScriptからHTMLの内容を操作する（書きかえる等）時に使うもの。
◆補足
・DOMのDはDocumet = HTML文書、XML文書を指す
・HTMLやXMLにあるものはすべてDOMを使って操作ができる
・DOMはHTMLをブラウザが読み込んだ時、ブラウザが解析する過程で生成される。その後、DOMにCSSのスタイルをあてて、画面に表示（レンダリングという）する動き
ECMAScript（読み：エクマスクリプト）
◆これだけおさえる
JavaScriptの標準仕様のこと。過去のJavaScriptはブラウザ毎に異なった書き方をしていたが、それを統一する為に出来た。
◆補足
・JavaScriptの標準化を担当する団体であるECMAによって定義
・ここ7，8年は毎年6月に新しいバージョンがリリースしている
・最新は2023年6月27日に承認されたECMAScript 2023（ES2023、ES14）
・ブログや記事などには、ES＋年（例：ES2022）と表記される場合と、ES＋バージョン（例：ES13）と表記される場合が混在しているので注意
ES2015（ES6）
◆これだけおさえる
ECMAScriptの2015年にリリースされたもの。ES6とも表記される。let、const、クラス、モジュールの概念、アロー関数、などなど多くの新しい機能が追加された。
◆補足
・ES2015ダイナミックに改訂されたため、「ES5以前とES6(ES2015)以降」というように線引きされ、比較区別されることも多い
Polyfill（読み：ポリフィル）
◆これだけおさえる
IEでも新しいJavascriptの機能を使えるようにしてくれるもの。
◆補足
・新しい機能を無理やり古い機能で置き換えるようなイメージ。これを使うと本体のソースコードを書き換えずに対応が可能
・簡単に導入できる（headタグに追加すればOK）が、ページの表示速度が遅くなる可能性がある
・IEのサポートは切れているため知識の片隅程度に
AltJS(オルトジェーエス)
◆これだけおさえる
JavaScriptの問題点を解決できるものとして、多数生み出された言語たちを総じてAltJSという。
◆補足
・「alternative JavaScript」の略で、直訳では「代替JavaScript言語」
・例として、TypeScript(タイプスクリプト)、CoffeeScript（コーヒースクリプト）、Haxe（ヘックス）、Dart（ダート）などの言語がある
・JavaScriptで記述するよりも少ないコード量にできるため、コードの読みやすさや保守性が高まる
・altJSで書かれたプログラムは、コンパイルすることで最終的にJavaScriptコードを生成することができる
・コンパイルの知識が必要になることや、学習コストが増えるなどのデメリットもあり
jQuery（読み：ジェイクエリー）
◆これだけおさえる
jQueryとはJavaScriptのライブラリ。今はもう使わない。
◆補足
・jQueryの活躍していた当時、IEとその他のブラウザの挙動が異なっていたため、ブラウザの違いを吸収してくれるこのjQueryが爆発的に流行った
・ブラウザ、CSSの進化によりjQueryを使うということはなくなった（現在はReactやVue.jsなどの別のものを使用）
React（読み：リアクト）
◆これだけおさえる
Facebook社が開発したWebサイト上のUIパーツを構築するためのJavaScriptライブラリ。State of JavaScript 2022では、フロントエンドフレームワークでの利用率部門で7年連続1位。動作が早く、大規模なアプリケーションの開発に採用されることが多い。
◆補足
・Facebook開発チーム2011年に開発。2013年にオープンソース化
・1つ目の特徴としてシンプルな記述が可能。また、コードの可読性が高いため、品質が維持しやすく保守性が高い
・2つ目の特徴として部品化（コンポーネントという）し、それらを組み合わせていく手法をとる。改修や管理、再利用性を高めることができる
・SPA（Single Page Application）の構築で活用されることが多い
・VueやAngularと比較されることも多いが、React自体はフレームワークではなくあくまでもライブラリ
Next.js（読み：ネクストジェーエス）
◆これだけおさえる
ReactをベースにしたWebアプリケーションフレームワーク。Reactの進化系ともいえる。Reactとは違いNext.js単体でWebアプリを動作させることが可能。
◆補足
・Vercel（バーセル）社が開発したオープンソースのWebアプリケーションフレームワーク。2016年10月に最初のリリース
・Next.jsとReactの1番の違いは、サーバー機能の有無。Next.jsはサーバー機能を持っているが、Reactにはサーバー機能がない。つまり、Next.jsは単体でWebアプリを動作させることができるが、Reactは別途サーバーの用意が必要という違いがある
・Next.jsはURLルーティングという、初期化時に生成されたフォルダにファイルを配置すると、それに合わせてURLが生成される機能がある
TypeScript（読み：タイプスクリプト）
◆これだけおさえる
JavaScriptの上位互換で、JavaScriptに型定義などの機能を追加したもの。コンパイル時に型の整合性をチェックしてくれる。（大規模プロジェクトでは特に）型が明示されていた方が何かと便利だよねというもの。
◆補足
・2012年にMicrosoftが開発
・JavaScriptとの互換性がある
・コンパイルしてJavaScriptにすることが必要
Angular（読み：アンギュラ）
◆これだけおさえる
TypeScriptをベースとしたフレームワーク。企業が使用するアプリケーションの開発に使用されることが多い。
◆補足
・Googleが開発したオープンソースのフレームワーク。
・AngularJSという前身があったが再開発によりAngularとなった（互換性はない）
・2012年AngularJS（バージョン1）、2016年にAngularがリリース
・「フルスタックフレームワーク」を自称し、フロントエンド開発にはAngularだけで事足りるような設計を目指して開発された
・機能が豊富。しかし、豊富がゆえに学習コストが高い（＝時間がかかる）という意見もある
・AngularはTypescriptを使用して記述することが必須となっている
Vue.js（読み：ビュージェイエス）
◆これだけおさえる
JavaScriptフレームワーク。シンプルで小規模な開発に適していると言われる。
◆補足
・Googleの元エンジニアが開発、2014年2月にリリース
・State of JavaScript 2022のフロントエンドフレームワーク利用率ランキングで3位
・DOMを直接書き換えて画面全体を再描画するJavaScriptやjQueryに対し、仮想DOMという差分のみをDOMに反映させる仕組みにより高速化が可能
・Vue.jsのインストールにはNode.jsが必要。（Vue.jsのインストールにはnpmを使う方法があり、npmはNode.jsが必要なため）
Svelte.js（読み：スヴェルト）
◆これだけおさえる
コンパイラ。軽量で高速なのが特徴。
◆補足
・.svelteファイルの中にHTML, CSS, JavaScript相当のコードを記述してコンパイルすると、JavaScriptファイルとCSSファイルが生成される。コンパイル後のファイルサイズは小さく、クライアント側ではファイルのロード時間もかからないため高速に動作する
・コードの記述量自体も、他のライブラリ・フレームワークに比べると少ない
Vanilla JS（読み：バニラジェーエス）
◆これだけおさえる
何もフレームワークを使っていない素のJavaScriptのこと。
◆補足
・なぜ「Vanilla」なのかは、アイスクリームの標準的な風味であるバニラ味ということからきているらしい。
Node.js（読み：ノードジェイエス）
◆これだけおさえる
本来Webブラウザ上のみで動作するJavaScriptをサーバー上でも動作できるようになるもの。
◆補足
・Node.jsは言語でもなく、フレームワークではない。python.exeがPythonコードを実行するアプリケーションであるように、node.exeはJavaScriptコードを実行するアプリケーションである
・Node.jsではJavaScriptがブラウザ上で動作していた時にはできなかった、OSの機能にアクセスするプログラムを組むことができるようになる
npm（読み：エヌピーエム）
◆これだけおさえる
npmはNode.jsのパッケージ管理ツール。
◆補足
・Node package manager（Node.jsのパッケージを管理するためのシステム）の略語
・Pythonにおけるpip、Rubyにおけるgemと同じと思うとわかりやすい
モジュール
◆これだけおさえる
機能ごとに分割されたJavaScriptファイルのこと。
モジュールシステム
◆これだけおさえる
作ったファイル（モジュール）を別のファイルから読み込んだりできること（できるようにするための仕組みのこと）。
JavaScriptファイルから別のJavaScriptファイルを読み込む仕組みのこと。
◆補足
・具体的にはimport、exportを使ってJavaScriptファイルから別のJavaScriptファイルを読み込んだりすること
・JavaScriptの歴史の流れから2つのモジュールシステム（CommonJS、ESモジュール）がある（他の言語では複数のモジュールシステムがあることは珍しい）
・現在ではESModulesを使うことが多い
CommonJS（読み：コモンジェーエス）
◆これだけおさえる
JavaScriptでは広く普及している2つのモジュールシステム(CommonJSとES Module)があり、その内の1つ。
ES Moduleよりも前からあり、JavaScriptをサーバーサイドで使えるようにすることを目指し発足したプロジェクト。
◆補足
・昔のJavaScriptには、他のJSファイルを取り込む標準的な仕様(モジュールシステム)が存在せず、2009年JavaScriptをサーバーサイドで使えるようにすることを目指して発足。最初はServerJSという名前だったがCommonJSに改名。
・Node.jsがモジュールシステムとしてCommonJSを採用（その当時はES Moduleはなかった）し、発展した。
ES Module（読み：イーエスモジュール）
◆これだけおさえる
JavaScriptでは広く普及している2つのモジュールシステム(CommonJSとES Module)があり、その内の1つ。いままで CommonJS で実現していたことをJavaScriptの標準仕様にしたという感じ。CommonJSの上位互換的な立ち位置だが、CommonJSが普及しすぎていたため、現在は共存している状況となっている。
◆補足
・ECMA Script Modulesの略、ESMとも書く。
・JavaScriptの大規模アップデートであるES2015（ES6）で策定された
・ES Modulesは標準としてNode.jsとブラウザ両方に対応した仕様となっている
・ES Module→CommonJSの呼び出しはできるが、CommonJS→ES Moduleの呼び出しはできない
・Node.jsが最近のバージョンでES Modulesに対応するなどの流れもあるが、まだESModulesに対応していないライブラリも多く、CommonJSはなくなっていない（ES Moduleと共存している状態）
bundle（読み：バンドル）
◆これだけおさえる
JavaScriptファイルを一つにまとめること。
◆補足
・HTTP/1.1では一度に処理できるリクエストの数が限られており、リクエストが増えるとパフォーマンス（表示速度）が落ちる可能性があった。そのため、パフォーマンスを落とさないようにモジュールはできるだけ1つにまとめたほうがいいとなり、そのまとめる処理のことをバンドルという
・しかし同時接続数制限が無くなったHTTP/2が普及したことにより、現状パフォーマンスの問題はなくなっている
ビルド
◆これだけおさえる
ファイルを1つにまとめたりして実行可能なファイルを作成する作業のこと。バンドル結果を出力するまでの一連の処理のこと。
◆補足
・「なぜJavaScriptでビルド？」という疑問があると思うが、パフォーマンスの問題であったり、JavaScriptのバージョンの違いの問題であったり、開発の効率化などいろいろな面を解決しようとした結果、プログラムの変換やコードをまとめるなどの作業が必要になり、それを1発でやってくれるビルドが便利だし必要となった。
・代表的なビルドツールはwebpack＋bableの組み合わせで行う。webpackがバンドルとミニファイを、bableがトランスパイルをしている。
※トランスパイル、ミニファイ、webpack、bableは後述
minify（読み：ミニファイ）
◆これだけおさえる
インデント（字下げ）やコメントなどを取り除くこと。
◆補足
・ソースコードから実行上意味のないスペースや改行を取り払い、命名された名前を短いものに置換する
・ファイルサイズを小さくすることで、パフォーマンスの向上や、アプリケーションの脆弱性を見つけることを難しくしたり、ソースコードの盗用を防ぐことが可能
transpile（読み：トランスパイル）
◆これだけおさえる
新しいバージョンで記述されたJavaScriptを、古いJavaScriptに変換すること。または、TypeScriptをJavaScriptにコンパイルすること。
◆補足
・そもそもの意味は「あるプログラミング言語から、他のプログラミング言語に変換するという技術」だが、フロント系の文脈で用いるときは①新しいバージョンで記述されたJavaScriptを古いJavaScriptに変換すること、②TypeScriptをJavaScriptにコンパイルすることのどちらかを示す。
・①について、ブラウザのバージョンによって、対応しているJavaScript(ECMAScriptのバージョン)が異なる。比較的新しい以降の仕様で記述したJavaScriptが古いブラウザなどでは動かない可能性があるため、互換性のあるコードに変換をする処理が必要。この場合のメリットとしては、プログラマは新しい記法で書ける（環境を考えなくてよい）、ユーザーは古い環境でも利用できるということが挙げられる
・②については、TypeScriptファイルはそのまま実行することはできないため、JavaScriptファイルにコンパイルする必要があり、そのことを指す
webpack（読み：ウェブパック）
◆これだけおさえる
複数のファイルをまとめたファイルを出力するツールのこと（＝モジュールバンドラという言い方をします）。
◆補足
・webpackで「ビルドする」 = 「バンドルするまでの一連の処理を実行する」という意味。
・webpackを使う利点は、「機能ごとにファイルを分割（モジュール化）する開発ができる」「自分が作成したモジュールだけではなく、外部モジュール（npmなどでインストールできるパッケージなど）も利用できる」「リクエスト数を減らせる」「依存関係を解決したファイルを出力できる」などなど
・使いきりのコードや2〜30行程度のコンパクトなコードを書く程度なら使う必要はない
・2023年現在、開発は事実上終了している
・設定ファイルが難しく、やる気をなくす人も多い。
Babel（読み：バベル）
◆これだけおさえる
新しいバージョンの書き方で書いたJavascritpコードを、古いバージョンでも動くように変換するトランスパイラ。
◆補足
・トランスパイラは、トランスパイル（前述）をするもののこと
・JavaScriptのバージョン（ES2015）では、大幅な機能が追加されたが、ブラウザの実装状況によっては使用することができなかったものもあった。ブラウザの対応を待っていてはいつまでもES2015を導入できないため、ES2015以降等で書かれたコードを従来の環境でも動くように古いJavaScriptに変換するコンパイラが2014年に誕生。それがBabel
・webpack × Babel の組み合わせがよく見られる。webpackは基本的にはモジュールのバンドラーだが、実行する際にBabelを取り込ませる事でバンドルの過程でJavaScriptの構文の変換を実行できる。
タスクランナー
◆これだけおさえる
フロントエンドの仕事で面倒なタスクを自動的にやってくれる便利なツール。
◆補足
・フロントエンド開発に特化しているビルドツールをタクスランナーというイメージ
・タスクランナーで有名なのはgulp（ガルプ）, Grunt（グラント）
・主要なタスクランナーは、JavaScriptで動いているため、Node.jsを用意する必要がある
ビルドツール、モジュールバンドラ、タスクランナーのくくり
◆これだけおさえる
ビルドツールという大枠に、モジュールバンドラ（webpack）とタスクランナー（gulp、Grunt）がある。
◆補足
・言い換えればタスクランナーはビルドツールであるが、モジュールバンドラではない。モジュールバンドラもビルドツールであるが、タスクランナーではない（くどい？）
・タスクランナーでできることの多くはwebpackでも可能。しかし、webpackはいろんなファイルをまとめちゃうので、CSSや画像をそのまま扱いたい時はタスクランナーの出番となる
・言い方は人によるため、文脈から察することが必要
Electron（読み：エレクトロン）
◆これだけおさえる
Windows、macOS、Linuxで実行できるデスクトップアプリを、HTML＋CSS＋JavaScriptといったWeb技術で開発できるフレームワーク。
◆補足
・GitHub社が開発
・Webの技術をある程度すでに習得している人であれば、少しのプラスアルファを加えるだけでクロスプラットフォームなアプリを実現できる
・Visual Studio Code、Slackなど著名なアプリケーションがElectronの技術を基盤として製品化
mBaaS（読み：エムバース）
◆これだけおさえる
Mobile Backend as a Serviceの略。バックエンド環境をクラウド上で処理してくれるサービスのこと。
◆補足
・スマホアプリでよく利用されている汎用的な機能（例えばログイン機能など）をクラウドから提供するサービス。つまり、サーバーサイドの開発作業をする必要がない
・インフラ周りやバックエンドを構築、管理する必要がなく、アプリ開発に集中できる
Firebase（読み：ファイアベース）
◆これだけおさえる
Googleが提供している開発ツール。Webアプリ、モバイルアプリの開発に必要な機能を一通り提供してくれている。サービスの種類としてはmBaaS（前述）にあたる。
◆補足
・フロント側の実装しかできない（バックエンド側の知識があまりない）人でも、Firebase側でバックエンド側の処理を簡単に実装できるためコストを抑え、アプリ開発にその分集中できる
・用意されている機能は、例えば、認証機能（ログイン実装）やデータベース、ファイルのアップロード機能など
・インストールではなくサイトを開くだけで使える。具体的にはFirebaseのサイトを開いて右上の「コンソールへ移動」をクリックすると開く（厳密にはGCP上で動いている）
・JavaScriptで開発が可能。（その他、PythonとGoで記述可能）
・基本的に無料で使えるが、データの使用量に応じて従量課金制となる
クロスプラットフォーム開発
◆これだけおさえる
異なるデバイス（iOSとAndroid）のアプリを一つのコードで開発できること。
Flutter（読み：フラッター）
◆これだけおさえる
iOSとAndroidアプリ、両方のアプリを同時に開発できる（＝クロスプラットフォーム）フレームワーク。ホットリロードというプログラムの変更を即座に確認することのできる機能が魅力。
◆補足
・Googleが提供するモバイルアプリのフレームワーク
・1回プログラムを書けばどのプラットフォームでも動くということを目指しているもの
・使う言語は「Dart（ダート）」
・ありがちな「iOSでは動くけど、Androidではあまりうまく動かない」といった互換性の不具合がほとんどない
Dart（読み：ダート）
◆これだけおさえる
Flutterの開発に使用されるプログラミング言語。
◆補足
・2011年にGoogleがJavaScriptの代替言語としてリリースした。たがGoogle自体が社内標準にTypeScriptを採用したこともあり衰退していた
・Flutterでの開発言語として一躍脚光を浴びる
・TypeScriptと似ている（加えてJavaやC#の影響も受けている）ため比較的楽に知識を身に着けられる
React Native（読み：リアクトネイティブ）
◆これだけおさえる
Meta社が開発した、クロスプラットフォームのアプリ開発用フレームワーク。同じ機能を持つFlutterに人気が集まっているため、Flutterより早く世にでていたReact Nativeの人気はだいぶ下火。
◆補足
・React Nativeの開発言語は、JavaScript
・やりたいこととしてはFlutterと同じであるが、React Native派とFlutter派がいる。理由として○○が好きだからというより、△△が嫌いだからこっちを使ってますが多いイメージ。個人的な印象としてはReact Nativeを嫌いな多いと感じる。
Amplify（=AWS Amplify、読み方：エーダブリューエス アンプリファイ）
◆これだけおさえる
AWS上のソリューションの一つ。モバイルアプリやウェブアプリを構築するための開発プラットフォーム。
◆補足
・Amplifyでは、アクセス権限や認証機能など「実現したい機能ではないが、運用として必要な機能」が簡単に実装することができるため、本来の「実現したい機能」に時間を割くことができるようになる
・AWS上にあるため、AWSの様々なサービスを使ったアプリケーションを簡単に開発できる
・Amplifyを使ってWebアプリやサイトを公開すると、Amazon S3、Amazon CloudFrontが自動的にセットアップされるため、負荷に強いサイトが作成できる
・Amplifyは、OSS（オープンソースシステム）としてGitHub上で公開されている
レンダリング
◆これだけおさえる
ブラウザ画面に表示すること。
◆補足
・細かく言うと、WebブラウザはWebサーバーからの情報を受け取ってhtml、css、JavaScriptや、画像の情報を解析して画面に表示しますが、このときブラウザは私たちが見ることができるように情報を成型してブラウザに表示させてます。このデータを元にして表示内容を作ることを「レンダリング」といいます
MPA（読み：エムピーエー）
◆これだけおさえる
従来のブラウザとWebサーバーの動きのこと。つまりブラウザからHTTPリクエストをサーバーがもらい、Webサーバーが内部でWebページを構築してJavaScriptやCSSと一緒にHTTPレスポンスを返す動きをするアプリケーションのこと。SPA（後述）などの技術が生まれたため対義語のような形でMPAと呼ぶようになった。
◆補足
・Multiple Page Applicationの略。※Multiple：多数の、多種多様の
・SPAと比べてMPAがダメということはなく、向き・不向きがあるので考慮し選択して使う必要がある
SPA（読み：エスピーエー）
◆これだけおさえる
初回通信で単一のWebページを読み込み、そのページに含まれるJavaScriptを使ってページの中身を切り替えることにより、ページ遷移のような動きを表現するアプリケーションのこと。
◆補足
・Single Page Applicationの略
・ページ遷移の際に時間がかからなくなり、ユーザー体験が向上する
・毎回HTMLをやりとりするMPAに比べ、SPAは差分を更新していく点が異なる
CSR（読み：シーエスアール）
◆これだけおさえる
クライアントサイド（ブラウザ）で行うレンダリングのこと。画面遷移の度にWebサーバーにHTMLを要求する必要がなく、ブラウザで行うため画面遷移が高速。
◆補足
・クライアントサイドレンダリング（Client-Side Rendering）の略称
・CSRとは、ブラウザ上でJavaScriptを実行し、APIからデータを取得して、取得したデータをもとにクライアント側でHTMLを生成する手法のこと
・画面遷移の度にWebサーバーにHTMLを要求する必要がなく、ブラウザで行うため画面遷移が高速（くるくるならない）
・SPA=CSRと紹介される場合があるが、SPAはアプリケーションの種別、CSRはレンダリング技術のことなので厳密には別物
SSR（読み：エスエスアール）
◆これだけおさえる
SSR とは、サーバー上で JavaScript を実行し、API からデータを取得して、取得したデータをもとにサーバー側で HTML を生成する手法のこと。
◆補足
・サーバーサイドレンダリング（Server Side Rendering）の略語
・Webサーバーでレンダリングする環境が必要であり、JavaScriptを使用する場合はNode.jsを準備する必要がある。そのためSPAと比べると実装が複雑
SSG（読み：エスエスジー）
◆これだけおさえる
事前にビルドという形でHTMLに全部書き出しておき、リクエストがきたらそれを返すことで高速化を図るツールのこと。
◆補足
・Static Site Generator（静的サイトジェネレーター）の略
・ユーザーがリクエストをしてからかなりの速度で表示することができる点が魅力
・逆にいうとビルドするまでずっと同じページが表示されるということになる。更新頻度の低いブログ・サービスなどで好まれる
・ページが多いとビルド時間がかかりすぎる問題があり、そしてその問題を解決した「ISG」、データが更新されても再ビルドするまでページの内容が更新されない問題を解決した「ISR」という技術もある
MPA～SSGについて補足
◆補足
・MPA、SPA、SSR、CSR、SSGという単語がでたが、結局のところ①レンダリングを行う場所の違い（サーバーなのか、クライアントなのかの違い）と、②レンダリングのタイミングの違い（ユーザーリクエストの前にレンダリングするか、リクエスト後にレンダリングするか）が大きく異なっている
Jamstack（読み：ジャムスタック）
◆これだけおさえる
静的サイトジェネレーター（SSG）などを利用して事前にAPIのデータやテキストデータを埋め込んだHTMLを生成（ビルド）しておき、JavaScriptでAPIを叩いて動的コンテンツを扱うアーキテクチャのこと。「高速のページ表示」という高いパフォーマンス性が魅力。
◆補足
・「Jamstack」はサービス名やツール名ではなくアーキテクチャのこと。
・2016年当時はJavaScript、API、Markupの3つの技術からなる構成とし頭文字をとって「JAM」としていたが、2019年に考え方が拡張され、JavaScriptとAPIは必須ではなくなった。そのため表記もJamstackとなっている
・リアルタイム性が求められるWebサイトや、動的にコンテンツを変化させるようなウェブサイトにはあまり適さない
・SSGとの違いとして、SSG（前述）は静的サイトを生成するためのソフトウェアのことを指し、JamstackはSSG等の要素技術を組み合わせてをしたようなサイトを実現する手法全体・アーキテクチャを意味する点が異なる
フロント系用語（その他知っておいたほうがいいもの）
ネイティブアプリ
◆これだけおさえる
App StoreやGoogle Play ストアからデバイスにダウンロードしてインストールできるアプリのこと。
◆補足
・反対に、ダウンロードは不要でWebブラウザ上で動くアプリを「Webアプリ」という
ホスティング
◆これだけおさえる
「サーバを借りること」。インターネットサービスプロバイダの立場で言うと「サーバーを貸すこと」です。
◆補足
・レンタルサーバとホスティングは（ほぼ）同義。いう人によって若干ニュアンスの違いあり
・自分でサーバーを用意するよりもコストを抑えることができる
・クラウドと「サーバーを借りる」という点は同じだが、契約内容（例えばホスティングは契約内容が固定、クラウドは柔軟に変更可能）や、カスタマイズ性などが微妙に異なる。
・ざっくりではあるが個人向けはホスティング、コーポレート向けはクラウドが適すると言える
プリミティブ
◆これだけおさえる
JavaScriptはデータ型の種類が２つあるが、その内のひとつ。
◆補足
・JavaScriptのデータ型（文字、数字など）には「プリミティブ型」と「オブジェクト型」がある
・直訳では「原始的なもの」「原型」「根源的な」といった意味
・『プリミティブ』、または『プリミティブ値』と言った言い方で使われることが多い
・プリミティブ形の種類は次の通り
数値（Number）、文字列（String）、長整数（BigInt）、論理値（Boolean）、null、undefined、シンボル（Symbol）
・すべてのプリミティブ値は、値自体の変更はできない（=これをイミュータブルという）ことが特徴
同期処理と非同期処理
◆これだけおさえる
同期処理とは、最初のコードから次のコードへと順次処理（実行）されていくことです。対して、非同期処理とは、ある処理が終了するのを待たずに、別の処理を実行することです。
非活性
◆これだけおさえる
見えるけど押せない・入力できない状態のこと。
◆補足
・disabled属性を付与した場合にこの状態になる
・非活性の逆は「活性」で、要素を有効化（使用可能な）状態のことenabledで設定可能。
JavaScriptのエコシステム
◆これだけおさえる
ビルド、ライブラリなどのいろいろなツールなどが共存している様子のこと。
◆補足
・エコシステムの単語の意味としては「生態系」
・IT系でエコシステムというと「ある特定の技術とその周辺や関連する技術・手法をまとめて指した言葉」に近く、JavaScriptでは上で書いたように「ビルド、ライブラリなどのいろいろなツールなどが共存している様子」を表している
オプショナルチェーン（オプショナルチェイニングとも）
◆これだけおさえる
JavaScriptの記述の方法の一つ。オブジェクトのプロパティにアクセスする際、.の左側がnullまたはundefinedの場合は通常エラーとなるが、エラーにならないようにするもの。
◆補足
・「?.」という書き方をする 「例：user?.id」
・プロパティの値がない場合にはundefinedを返す
inert属性（読み：イナートぞくせい）
◆これだけおさえる
HTML属性の一つ。これを有効にすると、要素が押せない・入力できない状態になる。
◆補足
・主要なブラウザで使用可能
・inert属性を有効にすると、子孫要素を含め要素が非活性な状態となる
※非活性：見えるけど押せない・入力できない状態のこと。
・カルーセルなど、非アクティブな要素が操作されないようにしたい時に使用する
Open Props（読み：オープンプロップス）
◆これだけおさえる
CSSフレームワークの一つ。
◆補足
・Webサイトの設計に必要になる設定、cssカスタムプロパティ（＝CSSの変数）があらかじめたくさん定義されている
・レスポンシブにも対応、一貫したスタイルを保つことができるメリットがある
・超メジャーというわけではないため、ふーん程度でOK
WebXR（ウェブエックスアール）
◆これだけおさえる
XR（VR、ARなどの現実感を扱う技術の総称）をWebブラウザ上で実現するための技術のこと。
◆補足
・XRとはVR（仮想現実）、AR（拡張現実）、MR（複合現実）といった先端技術の総称
・WebXRそのものを定める仕様がないため、WebXRについて明確な定義はない状況
・WebXRはHTML、CSS、JavaScript等の一般的なWeb技術のみでXRを構築することができる
・XR関連サービスを活用したコンテンツのことをXRコンテンツという
サポート頂いたご支援は、ブログの運営費として使用させていただきます。その経験や知識をnoteで還元してきます。読んでくださり、ありがとうございました。