現在連載しているFE入門 - 未経験からコーダーではなくフロントエンドエンジニアになるために - で出てくる用語についてこちらで解説していきます。
連載記事の更新に際してこちらも継続的にアップデートしてきます。

連載トピックス

• フロントエンドの用語集
• 連載についての紹介
• 第1章 マインドや道筋の理解
• 第2章 必要スキルの学習
• 第3章 アプリケーション構築
• 第4章 チーム開発やプロダクト開発の理解
• 第5章 これからのキャリア

ITに関する用語

業界

Web系

Web系とはWebサービスを運営・提供するIT系の企業のことです。
具体的にはAmazon、Google、Twitter、LINEなどの会社です。

SIer（エスアイアー/エスアイヤー）系

SIerとは別名システムインテグレーター（System Integrator）の略で
エンタープライズシステムと呼ばれる、企業や国・自治体など
比較的規模の大きなシステムを開発し納品しているIT企業です。
具体的には日立製作所、野村総合研究所、伊藤忠テクノソリューションズなどの会社です。

技術

共有サーバ

共用サーバとは複数のユーザで１台のサーバを共有して利用するサービスになります。
サーバの種別としては目に見えるかたちで存在する物理サーバです。
さくらのレンタルサーバなどがあります。

専用サーバ

専用サーバとは１人で１台のサーバを占有して利用するサービスになります。
サーバの種別としては目に見えるかたちで存在する物理サーバです。

さくらの専用サーバ PHYなどがあります。

VPS

VPSとは（バーチャル・プライベート・サーバ）の略で仮想的なサーバを占有して利用するサービスになります。
サーバの種別としては仮想サーバで物理的に存在しないサーバをソフトウェア上（仮想空間上）で存在させるサーバになります。

さくらのVPSなどがあります。

職種に関する用語

Web系エンジニア

フロントエンドエンジニア

フロントエンドエンジニアとはWebアプリケーション開発でフロントエンドを担当するエンジニアです。

フロントエンド

フロントエンドとはユーザーの目に触れる部分になります。
具体的には画面のレイアウトの作成やボタンなどのユーザーインターフェース（UI）に加え
ユーザーが入力した情報をバックエンドへ送信する機能の実装などを行います。

バックエンドエンジニア

バックエンドエンジニアとはWebアプリケーション開発でバックエンドを担当するエンジニアです。
バックエンドはユーザーから直接見えない裏側のシステム部分を担当します。

具体的にはDBからデータ取得や計算処理を行ったり
画面表示に必要なインターフェイスの提供を行います

インフラエンジニア

インフラエンジニアとはWebアプリケーション開発でインフラを担当するエンジニアです。
インフラはアプリケーションが配置されている基盤の部分を担当します。

具体的にはアプリケーションを配置するサーバの構築から
サーバとやりとりを行うネットワークの設定に加え
運用フェーズではサーバの健康状態の管理基盤の保守なども行います。

SIer系エンジニア

プログラマー

プログラマーとはSE（システムエンジニア）が作成した仕様書や設計書をもとにコーディングを担当するエンジニアです。
具体的には必要な動作や処理のプログラムで記述、プログラムがうまく動作するかのテストや検証、バグやエラーの修正などを行います。

システムエンジニア

システムエンジニアとはシステム開発において主に企画・設計などの上流工程を担当するエンジニアです。
具体的にはユーザー側の業務を分析して必要な機能を洗い出したり
開発の予算や納期に応じて開発のスコープを絞り込んだりとシステムの要件を固めていきます。

業務に関わる用語

開発、製作物

Webサイト

WebサイトとはGoogle ChromeやSafariなどのWebブラウザから閲覧できるサイトのことを指します。
サイトはさまざまな情報を提供するページをまとめたもので
具体的には会社のホームページなどです。

Webアプリケーション

WebアプリケーションとはGoogle ChromeやSafariなどのWebブラウザから利用するアプリケーションです。
会社ホームページのようなWebサイトとは違い
商品をカゴに入れて購入したりや動画を見てコメント登録したりなど
ユーザーが操作できるシステムになります。
具体的にはショッピングサイト（Amazon）や動画サイト（Youtube）などです。

Webページ

WebページとはGoogle ChromeやSafariなどのWebブラウザから閲覧できるページのことを指します。
また仕様的にはHTMLで書かれたページのことで
WebページがまとまったものがWebサイトやWebアプリケーションになります。

技術に関する用語

言語

HTML（エイチティーエムエル）

HTML(Hypertext Markup Language、ハイパーテキスト・マークアップ・ランゲージ)とは
Webページのコンテンツ構造を指定する言語です。
構造は文章の見出しや段落、箇条書きリスト、画像、テーブルなどがあります。

HTMLの言語で構造的に要素を記述しブラウザを通すことによって
構造化されたレイアウトとして表示することができます。

MDN | HTML の基本

CSS（シーエスエス）

CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）とは
Webページのコンテンツにスタイルという見た目の装飾を指定するための言語です。

具体的には色をつけたり横幅を指定したり要素を動かしたりすることができます。

MDN | CSS の基本

JavaScript（ジャバスクリプト）

JavaScript (JS) とは Webページのコンテンツを操作したりサーバと通信を行なったりするためのプログラミング言語です。

具体的には要素を動かすアニメーションから
テキストボックスの入力に合わせてキーワードを表示したり
ページリロードせずにデータを取得して要素を切り替えたり
などの動的に要素を制御します。

MDN | JavaScript とは？

TypeScript（タイプスクリプト）

TypeScript（TS）とはマイクロソフトが開発したオープンソース言語で 型定義（変数に文字列、数値などの型を定義すること）ができるJavaScriptになります。

TypeScriptはaltJS（トランスパイル（変換）して
JavaScriptコードを生成する仕組み）になります。
書いたコードは最終的にJavaScriptへ変換して利用します。

そのためやれることはJavaScriptと同じなのですが
型があることでコードを書くときの品質担保・コード保管・新しい仕様が利用できるなどの
メリットがあります。

TypeScript Deep Dive 日本語版

フレームワーク・ライブラリ

React.js（リアクトジェイエス）

React.js（React）とはFacebookとコミュニティによって開発されている
ユーザインタフェース構築のためのライブラリです。

特徴としては宣言的なViewとコンポーネントベースです。

宣言的なView

宣言的なViewとはこの状態だったらこの見た目になるべきという宣言をベースに
アプリケーションが構築できる様になっていてこれができることで
コードが見やすくデバッグもしやすくなっています。

コンポーネントベース

コンポーネントベースとはコンポーネントを組み合わせて
複雑なユーザーインターフェースを構築していきます。

また他のライブラリと組み合わせていくことで大規模なアプリケーションの開発も可能です。

React公式ドキュメント

Vue.js（ヴュージェイエス）

Vue.js（Vue）とはオープンソースで開発されている
ユーザーインターフェイスを構築するためのプログレッシブフレームワークです。

プログレッシブフレームワーク

他の一枚板(モノリシック: monolithic)なフレームワークとは異なり
Vue は少しずつ適用していけるように設計されています。
中核となるライブラリは view 層（見た目の部分）だけに焦点を当てています。
そのため、使い始めるのも、他のライブラリや既存のプロジェクトに統合するのも、とても簡単です。

またモダンなツールやサポートライブラリと併用することで、洗練されたシングルページアプリケーションの開発も可能です。

Vue.js公式ドキュメント

Anguler（アンギュラー）

AngularとはGoogleと個人や企業のコミュニティによって開発されている
TypeScriptベースのWebアプリケーションフレームワークです。

Angular公式ドキュメント

Redux

Reduxとはアプリケーションの状態管理のための
オープンソースのJavaScriptライブラリです。

ユーザーインターフェイスを構築するために
React.jsやAngularなどのライブラリでよく使用されます。
FacebookのFluxアーキテクチャの影響を受けて
Dan AbramovとAndrew Clarkによって作成されました。

Redux

Vuex

VuexとはVue.jsが公式に提供している
アプリケーションのための状態管理ライブラリです。

Vuex 入門

RxJS

RxJSとはObservables というアーキテクチャを用いた
リアクティブ・プログラミング用のライブラリであり
JavaScriptでのイベントのハンドリングや非同期処理をラップし
扱いやすくするためのライブラリです。

リアクティブ・プログラミング

リアクティブ・プログラミングとはデータが流れるように来ること（ストリーム）に着目し
データを受け取るたびに関連したプログラムが反応（リアクション）して
処理を行うようにするプログラミングの考え方です。

RxJS

アーキテクチャ

SPA（シングルページアプリケーション）

SPAとは単一のページでコンテンツの切り替えを行う
Webアプリケーションのアーキテクチャのことを指します。

リンククリック時のページ遷移や問い合わせ送信などのユーザーの入力や操作に対して

通常はページ全体の読み込みリクエストを行い
ブラウザがページ全体を表示しなおすというのが一般的なパターンですが

SPAではリクエスト時にページ全体ではなく必要なデータのみリクエストし
ブラウザの処理は走らず、更新が必要な一部のみ書き換えを行います。

そのため動作も早く、画面全体が切り替わる無駄な処理がないため
ユーザーは快適にページ遷移の体験を得ることができます。

BFF（ビーエフエフ）

BFF（Backends For Frontends）とはフロントエンドのためのバックエンドサーバのことで サーバ自体を指す場合やアーキテクチャパターンを指す場合があります。

フロントエンドのためのバックエンドサーバ

フロントエンドがAPIから情報を取得する際に
画面表示に不要な情報や表示フォーマットとは違う形で提供されていることが多いです。
その場合不要な情報はデータ量が増すため通信時間が増えてしまうことにつながりますし 表示フォーマットと違った場合フロントエンドで取得した後に整形する必要があるため これも処理が重くなってしまうことにつながります。

この課題を解決するためのサーバがBFFです。 これらの処理を行う機構（BFFサーバ）をAPIとフロントエンドの間に作りここで処理を吸収することによってこれらの課題を解決します。

アーキテクチャパターン

フロントエンドのためのバックエンドサーバを含む
API + BFFサーバ + フロントエンドのアーキテクチャ設計パターンを
BFFパターンと呼んだりもします。

その他

キャリアに関する用語

ポートフォリオ

ポートフォリオとは実績やスキルがわかる作品集のことを指します。
エンジニアのポートファオリオに関してはこれまでに

• どんなアプリケーションを作ってきたか
• どういいたソースコードを書いてたか

などがわかるものになります。

具体的にはGithubや個人ブログや後悔しているWebアプリケーションになります。

メンター

メンターとは「指導者」という意味で
仕事上の技術的な指導や助言から精神面のサポートまでを行なってくれる 指南役のことを指します。

エンジニアのメンターに関しては

• プログラミング学習の相談
• 解決しないバグの質問
• ポートフォリオの作成
• コードレビュー

などをサポートしてもらいます。