フロントエンド（Jamstack）開発で知っておきたいことば10選

  • 投稿日
  • 更新日
  • 著者 ともすた
  • カテゴリー ブログ

Webサイト制作、特にフロントエンド開発の現場は流れが速く、次々に新しい技術・新しいことばが登場します。そこでこの記事では、そんなフロントエンド、特にJamstack開発をするに当たって、覚えておきたいことばを10個紹介していきましょう。

Jamstack

まずはそもそも、Jamstackとはなんでしょう。これは、元々「JAMstack」と「JAM」の部分を大文字で表記することばでした。「JAM」は、「JavaScript」と「API」、「Markup」の頭文字を取ったことばで、stackは「積み重ねる」といった意味の英単語。

ちなみに「Markup」というのは、マークアップ言語のことで主にHTMLのことを指しているので、ここでは「HTMLとJavaScript、API（後述）という技術を積み重ねて、WebサイトやWebのアプリなどを開発する手法」のことを指します。

近年では、特定の技術に縛られることなくモダンなフロントエンド開発環境をさして、一般的に「Jamstack」と呼ぶようになったため、表記も1つの単語として「Jamstack」と先頭だけ大文字にして表すことが多くなっています。

Node.js

フロントエンド、Jamstackの発展に欠かせなかったのが、Node.jsという存在です。近年のWeb開発には欠かせないアプリの1つと言えるでしょう。

Node.jsを理解するには、まずは「JavaScript」というプログラミング言語について知る必要があります。JavaScriptというプログラミング言語は元々、Firefoxの前身と言える「Netscape Navigator」というWebブラウザ上で、簡単なスクリプトを動かすために作られたプログラミング言語でした。

このJavaScriptというプログラミング言語を、Webブラウザ以外の環境でも動作できるようにしたのが、Node.jsという実行環境です。これにより、JavaScriptで作成したプログラムをWebサーバー上や、自分のコンピュータ上でも動作させることができるようになったため、便利なアプリが続々と開発されています。

npm

Node.js上で開発されたアプリは「パッケージ」と呼ばれ、これをインストール作業などをすることができます。このパッケージを管理するためのしくみが「npm」です。

Node Package Managerの略称で、同名のコマンドとWebサイトがあり、このサイトに掲載されているパッケージは簡単なコマンドでインストールすることができます。今、フロントエンド開発をするときにnpmを使ってパッケージを追加して開発するのは非常に一般的になりました。

このおかげで、フロントエンドにさまざまな技術が登場して、技術の進化を促しています。

フレームワーク

今、フロントエンド開発をする場合はNext.jsやNuxt、Astro等の「フレームワーク」と呼ばれるものを導入することが多いでしょう。このフレームワークとは、元々「枠組み」とか「骨組み」といった意味のことばで、プログラミング開発においてよく使われる概念です。

プログラムを1から作るのではなく、骨組みとなるベースのプログラムを準備して、そこに肉付けをしながら全体を作り上げていきます。これによって、基本的なしくみをあらかじめ準備されたものを利用できたり、ファイル構成や命名規則など、開発におけるルールをフレームワークがあらかじめ定めているものをチームで採用できるなど、開発をスムーズに行うことができるようになります。

コンポーネント

フレームワークを使った開発の時に重要な概念に「コンポーネント（Components）」があります。「成分」といった意味の英単語で、Webサイト内で使うパーツをファイルごとに分けて開発することができます。フレームワークによっては、コンポーネントごとにCSSやJavaScript等を分けることもでき、これまでのサイト制作では悩みの種であって、CSSが他の場所に悪影響を与えてしまうと言った被害を抑えることができます。

ルーティング・ダイナミックルーティング

フレームワークを使うもう一つの大きなメリットの1つが、URLを生成できる「ルーティング」というしくみです。

通常Webサイト内にWebページを制作する場合、フォルダやファイルを、そのパス上に配置しなければなりません。

しかし、ルーティングというしくみを使えば、Webブラウザからのリクエストを、あるプログラムが一手に引き受けて、プログラムで処理した結果でWebページを生成することができます。

ブログなどのように、記事の数がどんどん増えていくようなWebサイトの場合は、複数のアドレスをその場で生成できるダイナミックルーティングといったしくみも利用することができます。

ヘッドレスCMS

CMSはコンテンツ管理システムのことですが、通常のCMSは管理画面部分と表示画面部分がセットになっています。この表示画面部分を「ヘッド」と呼び、ヘッドレスCMSはこの表示画面部分がないCMSのことを言います。

そのため、入力したデータを表示したい場合は、JavaScript等のプログラミング言語を利用して、データを加工し、表示する必要があります。

Jamstack開発の場合、逆に表示部分は作ることができるので、コンテンツの管理部分を、このヘッドレスCMSに任せることで、Webサイトなどのコンテンツを管理できるようにすることが多く、ヘッドレスCMS+Jamstackという開発が主流になっています。

API

APIは、Application Programming Interfaceの略称でプログラムとサービスなどの橋渡し（インターフェイス）となるしくみを指します。ヘッドレスCMSには、このAPIというものが備わっていて、例えば、JavaScriptでヘッドレスCMSで作成したコンテンツを取り出すときなどに、このAPIを通じてコンテンツを取り出すことになります。

Web上のサービスでのAPIの場合は、基本的には専用のURLが提示され、そのURLに固有の「APIキー」というキーと一緒にアクセスすることで、データを取り出すことができます。

APIということば自体は、ソフトウェア開発などで非常に幅広く利用されることばであるため、Web上のAPIのことは特別に「Web API」などと呼ばれることもあります。

JSON

データ形式の種類の1つで、JavaScript Object Notationの略称。データを管理するためのデータ形式としてはこれまで、CSVやXMLといった形式がよく使われていました。が、CSVはデータの順番が入れ替わると何のデータなのか分からなくなってしまう等の問題点があり、XMLはタグが各データに入るため、データ容量が大きくなってしまうというデメリットがありました。

JSON形式はこれらを解消し、簡単な記述でデータをしっかり分類できることから、愛用されています。名前に、JavaScriptという名前があるとおり、当初はJavaScript用のデータ形式でしたが、現在ではその他にもさまざまな用途で利用されています。

Ajax

通信方式の1つで、非同期通信と呼ばれる種類の通信方法。通常、Webサイトで使われる通信は同期通信と呼ばれ、データを受信している間は画面が真っ白になったり、操作不能になったりします。

逆に、画面上でなにか作業をしていたとしても、データの送信作業を行わなければ、サーバー側にデータは送信されません。しかし、非同期通信の場合は、サーバー側の処理とユーザーの操作を同時に（非同期で）行うことができるため、ストレスなく利用することができます。

当初、このような非同期通信は「AJAX」ということばが使われていました。これは、「Asynchronous JavaScript And XML」の頭文字を取ったことばですが、その後JavaScriptやXMLを利用しない非同期通信にも利用されることばになり、「Ajax」と表記もかわりました。現在では、このことば自体があまり利用されることなく、単に「非同期通信」と呼ばれることの方が多いです。

ということで、10選解説してみました。他にも、解説して欲しい言葉などありましたら、リクエストいただければ幸いです。