【Jade・Sass】役に立つメタ言語の基本的な使い方の解説Web制作2017年11月24日Webサイトを製作する上で、HTMLやCSSが必要になり、欠かすことのできない言語です。HTMLやCSSを記述する量が多く、手間がかかることが問題でした。そのような問題を解決できるのが、メタ言語です。メタ言語は作業の効率化だけでなく、他にもたくさんのメリットがあります。本記事では、メタ言語であるJadeとSassの使い方を紹介します。実際に、Web製作の現場でもこの2つの言語は、頻繁に使われており、コーディングの時間を大幅に短縮できるため、この機会に覚えておきましょう。初心者の方も最後までお読みいただければ、2つのメタ言語をマスターすることができます。メタ言語とはメタ言語とは、HTMLやCSSなど特定の言語を作成するための言語です。この言語を使用することで、記述するコードの量を減らすことができ、冗長化を防ぐことができます。メリットはこれだけではなく、HTMLファイルの分割など、役に立つ便利な機能を補完できます。現在は、メタ言語を採用している企業が多く、この言語をマスターすることで、就職や転職の際にスキルとしてアピールできます。今回、紹介するメタ言語は、JadeとSassですが、他にもメタ言語は存在しており、HTMLであれば、Slim、Hamlなどが挙げられ、CSSの場合は、Lessなどがあります。JadeとはJadeを簡単に説明すると、HTMLを簡単かつ効率的に記述できるマークアップ言語です。SassとはSassとは、CSSの記述量を減らしたマークアップ言語になります。動作環境を整えるJadeとSassを使用するためには、それぞれの動作環境を設定する必要があります。JadeとSassのセットアップについて説明します。Jadeをインストールする手順Jadeを利用するために必要な手順は以下の2つです。・STEP1:Node.jsをインストール・STEP2:JadeをインストールSTEP1:Node.jsをインストールJadeはNode.jsで動いているので、Node.jsをインストールする必要があります。公式サイトにアクセスして、ボタン1つでダウンロードできます。Jade公式サイトURL:https://nodejs.org/en/download/STEP2:JadeをインストールNode.jsのインストールが完了した次は、コマンドを入力します。Windowsの方はコマンドプロンプト、Macの方はターミナルを開きます。インストールするためのコマンドは、以下のようになります。jadeこのコマンドを入力して、このようなメッセージが表示されていれば、準備完了です。–versionSassをインストールする手順Sassのインストール手順はWindowsとMacによって違うので、それぞれのやり方を紹介します。Windowsの場合Sassを利用するためのスッテプは以下のようになっています。・STEP1:Rubyをインストール・STEP2:SassをインストールSTEP1:RubyをインストールSassを利用するためには、Rubyをインストールする必要があります。Rubyの公式サイトにアクセスして、ダウンロードします。Ruby公式サイトURL:https://rubyinstaller.org/ダウンロードが完了した次は、「RubyInstaller」を立ち上げます。新たにウィンドウが開かれるので、「実行」ボタンをクリック。次に、セットアップの画面が開かれるので、以下の項目にチェックを入れます。関連づける上記の2つの項目にチェックが入っていることを確認した後に、「インストール」ボタンをクリック。以上でRubyのインストール作業は完了です。インストールされていることを確認するために、コマンドプロンプトを開いて以下のコマンドを入力します。-vこのようにインストールしたバージョンが表示されていれば、問題ありません。[x86_64-darwin14]引き続き、Sassのインストールをするので、コマンドプロンプトを開いた状態にしてください。STEP2:Sassをインストールコマンドプロンプトに以下のコマンドを入力します。sassSassのインストールはこれで終わりです。インストールが完了するまで、しばらく時間がかかります。念のために正しくインストールされているかを確認するため、以下のコマンドを入力します。-v下のようにバージョンが正しく、表示されていれば、正しくインストールされています。3.5.3Macの場合Macの場合、Rubyがデフォルトで搭載されているため、Rubyのインストール作業は必要ありません。Sassをインストールするだけになります。Sassのインストール手順はWindowsのインストール方法とほとんど同じです。Sassをインストールするため、ターミナルに以下のコマンドを入力します。sassパスワードを聞かれるので、OSのパスワードを入力します。(注意:パスワードは入力しても表示されません。)ダウンロードが開始すると以下のように表示されます。ffi-1.9.18インストールができているか確認するため、以下のコマンドを入力します。-vSassのバージョンが表示されていれば、インストール作業は完了です。実際に記述する前に、基本的な書き方を覚える必要があります。基本的な記法を説明します。閉じタグは不必要Jadeを使ってコーディングする場合は、閉じタグは必要ありません。HTML<p>サンプルです。HTML<h2>サンプルです。</h2>入れ子を作る半角スペースかタブを使って、インデント構造を表します。インデントを表すために、半角スペースとタブの両方を使用するとエラーになるので、注意してください。