フロントエンドエンジニアがWeb開発で使う言語の役割と特徴【HTML、CSS、JavaScriptほか】

Web開発には、役割に合わせた様々な種類の言語があります。
その中でもフロントエンド開発によく用いられる代表的な言語をまとめました。

基本的な3つの言語とそのメタ言語、合わせて5つについてそれぞれ見ていきます。

未経験からプログラミングを始めてみたいなら、まずは無料相談！
案件の取り方から就職・転職のキャリア相談、面接練習までできるのでおすすめです。
新規無料相談はこちらから【ZeroPlus】

フロントエンドとは

そもそもフロントエンドとは、WebサイトやWebアプリの中でも実際にユーザの目に見える部分のことです。
一方バックエンドは、それらの裏側で動いているシステムのことを指します。

Webはクライアントとサーバという異なる役割を持つコンピュータによって成り立つ「クライアントサーバシステム」です。
サーバはWebサイトやWebアプリが設置されており、それらのサービスを提供する役割を持つコンピュータです。
クライアントはサーバが提供するサービスを実際に利用するコンピュータです。

Webサイトを閲覧するユーザは、クライアントとなるコンピュータを通してサーバにアクセスすることでサービスを利用できます。

つまりフロントエンドとはクライアントがユーザに提供する機能であり、バックエンドとはサーバ側の処理を指します。
また、フロントエンドエンジニアやバックエンドエンジニアはそれぞれ、クライアントサイドエンジニア、サーバサイドエンジニアとも呼ばれます(サーバの持つ役割は大きいので、バックエンドエンジニアとサーバサイドエンジニアを分ける場合も多いです)。

今すぐWeb業界で活躍したいなら、エンジニアの無料相談を受けてみませんか？
開発現場が求めるレベルのプログラミングスキルを身につけ、就活に強いポートフォリオを作成しましょう！
エンジニア発オンラインスクール【RUNTEQ】

Webコンテンツの骨組み「HTML」

正式名称： HyperText Markup Language
難易度　： ☆★★★★

HTMLは、Webコンテンツの骨組み(Frame)を作ります。
これが書けないとWeb制作はできないので、最初に学ばなければならない必須言語であると言えます。
HTMLはWebコンテンツ全体に要素を配置し、それらを構造化(マークアップ)するマークアップ言語と呼ばれるものです。
(ちなみに、マークダウン言語というものもあります)

マークアップについてもう少し詳しく説明します。
Webコンテンツには「タイトル」や「本文」、「ボタン」といった様々な要素がありますね。
デザインを見れば、「ページの上部にあり本文よりも大きい文字で書かれているのがタイトル」「青色の文字で下線が引かれいるのがリンク」といった具合に何となくそれが何の要素なのかわかると思います。
しかしこれは人間的な感覚です。

コンピュータから見ればそれらはただの文字列として認識されてしまいます。
文字の大きさや色で要素がどんな役割を持っているのかを判断することはコンピュータには難しいのです。
そこで、機械目線でもわかるように要素を意味付けし構造化することをマークアップといいます。

また、HTMLはツリー構造になっています。
何かの要素の中に複数の子要素があったり、さらにその子要素があったりと、各要素が階層(レベル)ごとに分かれているという構成です。
これを知っておくことで、CSSやJavaScriptの理解がぐっと楽になります。

実際のコード

HTMLは普通のメモ帳などで簡単に記述することができます。
保存する際の拡張子を「.html」あるいは「.htm」とすることでHTMLファイルとして認識され、ブラウザで開くことでWebページとして閲覧することができます。

HTMLではタグと呼ばれる目印で要素を挟むことで、マークアップすることができます。
<～>の中に書かれているのが要素の種類、開始タグと終了タグの間に挟まれているのが実際に表示されるコンテンツです。

要素には属性と呼ばれる追加情報を付与することもできます。

<div>
  <h1 class="page-title">Hash Drip Cake</div>
  <p>当店で大人気のケーキです！ぜひ足を運んでお楽しみください！</p>
  <table>
    <tr>
      <td>ショートケーキ</td>
      <td>500円</td>
    </tr>
    <tr>
      <td>チョコレートケーキ</td>
      <td>400円</td>
    </tr>
    <tr>
      <td>チーズケーキ</td>
      <td>450円</td>
    </tr>
  </table>
</div>

以下は上記のHTMLの実際の表示例です。
テキストエディタにコピペするだけなので、ぜひ試してみてください。

Webサイトを飾り付ける「CSS」

正式名称： Cascading StyleSheets
難易度　： ☆★★★★

CSSは、Webコンテンツの外観(Appearance)を整える言語です。
HTMLだけでは質素な見た目の最低限の機能を備えたページしか作ることができません。
CSSはHTMLで構造化された要素に対して様々なスタイルを適用する、スタイルシート言語です。

例えば、テキストの色や大きさ・太さを変更したり、ボックスのサイズを調整したり、背景に画像を適用したりといったことができます。
さらには簡単なアニメーションもつけることができます。

実際のコード

CSSはHTMLとは別のファイルに記述して、HTMLから読み込むのが一般的です。
この時の拡張子は「.css」です。
また、HTML中に直接書き込むこともできます。

CSSでは、セレクタでどの要素に対してスタイルを適用するかを、プロパティでどのようなスタイルを変更するかを指定します。

{}の前に書かれているのがセレクタ、{}の中に書かれているのがスタイルの指定です。
コロン(:)の左側がプロパティで、右側がその値となっています。

.page-title
{
    color: #ff7f50;
    font-size: 24px;
    margin: 10px;
}

table
{
    border-collapse: collapse;
}

td
{
    border: 1px solid black;
}

以下は先ほどのHTMLで作成したページに対して上記のCSSを適用した例です。

CSSをより機能的に使いこなす「Sass・SCSS」

正式名称： Syntactically Awesome StyleSheets
難易度　： ☆★★★★

Sassは、バックエンドでよく使われる言語であるRubyで実装されたCSSのメタ言語(拡張言語)です。
ですから基本的にはCSSと同じく、HTML要素に様々なスタイルを適用するためのルールを記述します。

SassやSCSSはCSSに比べて以下のような違いがあります。

• コンパイル(プログラムを翻訳する作業)が必要
• ネスト(入れ子)構造が使えるので、HTMLのツリー構造に対応させコードのの管理が可能
• 変数やミックスイン(mixin、関数のようなもの)、条件分岐、継承などの概念がある
• コードの記述量が減り、メンテナンス性が向上する

これらの特徴を見るとCSSをプログラミング言語のように扱えるようになっていることがわかります。
コンパイルする手間はかかりますが、CSSに様々な機能が追加されており非常に便利になっています。

実際のコード

Sass・SCSSを使い始めるにあたっては、HTMLやCSSとは異なり少し準備が必要になります。
Rubyのインストールとコンパイラソフトの導入です。

Rubyのダウンロードはこちら

Sass、SCSSファイルの拡張子はそれぞれ「.sass」と「.scss」です。
これらのファイルをコンパイルによってCSSファイルに変換した後にHTMLファイルからCSSファイルを呼び出す、といった手順を踏みます。

コンパイルするためのツールはいくつかありますが、Koalaというソフトを使うのが簡単です。
また、後程紹介するTypeScriptなどもまとめてコンパイルできるタスクランナーであるwebpackもおすすめです。
webpackを利用するには、Node.jsという環境が必要になります。

コンパイラソフト(Koala)のダウンロードはこちら
Node.jsのダウンロードはこちら

SassとSCSSの違いは記法です。

SassはCSSの中括弧({})やセミコロン(;)を省略して書くことができます。
これはRubyに似た書き方で、コードの量をかなり減らすことができます。

しかし、CSSに慣れているならばSCSS記法の方が見慣れていてわかりやすいのではないでしょうか。
実際こちらの方がやや好まれているようです。

下記のコードをコンパイルすると、どちらも先ほど紹介したCSSと同様の内容のCSSファイルを生成することができます。

.page-title
    color: #ff7f50
    font-size: 24px
    margin: 10px

table
    border-collapse: collapse
    tr
        border: 1px solid black

.page-title
{
    color: #ff7f50;
    font-size: 24px;
    margin: 10px;
}

table
{
    border-collapse: collapse;
    tr
    {
        border: 1px solid black;
    }
}

動的なWebコンテンツを開発する「JavaScript」

別　名： JS、ECMA Script(JavaScriptの標準化規格)
難易度： ☆☆★★★

JavaScriptは、Webコンテンツに動きをつける筋肉(Muscle)の役割を持った言語になります。
Webサイトに様々な機能を実装するためのクライアントサイドのプログラミング言語です。

JavaScriptでできることはかなりたくさんあり、ここでは紹介しきれません。
近年ではさらにサーバサイド(バックエンド)にまで活躍の領域を広げています。
以下はJavaScriptでできることの例です。

• HTMLやCSSを動的に書き換える(DOM操作)
• ユーザのアクションに対応して様々な処理を行う(イベント処理)
• サーバとデータのやり取りを行う(Ajax、非同期通信)

このような複雑な処理を応用することで、スマホアプリやゲームなどのコンテンツを実装することもできます。

JavaScriptはHTMLやCSSとは異なり、プログラミング言語ということもあって未経験の方にとってはとっつきにくいかもしれません。
しかし、プログラミング言語の中ではかなり易しい部類になりますので、入門向きだと思います。

実際のコード

JavaScriptはCSSと同様、HTMLとは別ファイルに記述してHTMLから読み込みます。
拡張子は「.js」です。
また、HTML内に直接書くこともできます。

以下のコードの詳細な説明は省きますが、少しでもプログラミングの経験がある方なら全く問題なく理解できるかと思います。

let num;
num = parseInt(window.prompt('ショートケーキの個数：'));

if( ! Number.isInteger(num) )
{
    document.write('整数を入力してください');
}
else
{
    price = 500 * num;
    document.write(`合計金額は${price}円です。`);
}

このプログラムを先ほど作ったページに反映させると、次のようにプロンプトからの入力をもとに合計金額を計算する処理が実行できます。

保守性の高いJSを記述できる「TypeScript」

難易度： ☆☆☆★★

TypeScriptはJavaScriptのメタ言語で、近年非常に人気が上昇しています。
この言語で書いたプログラムをJavaScripにトランスコンパイルすることで処理を行います。
トランスコンパイルとは、プログラミングにおいてある言語から別の言語に変換(コンパイル)することです。

JavaScriptとの違いの一例としては以下のようなものがあります。

• JavaScriptは動的型付け言語だが、TypeScriptでは静的型付けができる
• 厳格なJavaScriptが記述でき、動作の安定が期待できる
• クラスが使える

JavaScriptに比べ、コードの保守性が高く大人数での開発にも適しています。

実際のコード

TypeScriptを始めるには、Node.jsが必要です。
Node.jsに内包されている、npmと呼ばれるパッケージ管理ツールでTypeScriptをインストールしたり、tscというツールでTypeScriptをJavaScriptにコンパイルしたりします。

Node.jsのダウンロードはこちら

TypeScriptの拡張子は「.ts」です。
TypeScriptによる静的型付けの例を見てみましょう。
以下のように変数の型を明確に宣言することで、プログラムの予期せぬ動作を防ぐことができます。

let num: number = 10;
let price: number;

console.log(`合計金額は${num * price}円です。`);

まとめ

今回紹介したフロントエンドWeb開発に用いる言語の役割をまとめると、以下のようになります。

• HTMLでWebコンテンツを構造化し、骨格(Frame)を作る
• CSSでWebコンテンツを飾り付け、外観(Appearance)を整える
• JavaScriptでWebコンテンツに動きをつけ、筋肉(Muscle)を与える

これらが、Webコンテンツを制作する際の基本的な知識となります。
フロントエンドで用いる言語はどれも難易度が低く未経験の方でも取り組みやすいので、ぜひ挑戦してみてください。

業界で活躍できるフロントエンドエンジニアを目指すなら、まずはプログラミングスクールでその基礎をしっかり叩き込みましょう。
本物のエンジニアに学ぶことで、時間がない方でも最短でスキルを身につけることができます。
フロントエンドコース

お悩みの方は、まずは無料キャリアカウンセリングにお申込みください。

関連記事

この記事のタグ