はじめに

この記事はmacbook airでフロントエンド環境構築を行った経緯を記しています。

WEB制作会社に入社して8ヶ月の私が出来ること

HTML5, CSS3を用いたコーディング
EJS, SCSSを用いたHTML, CSSの生成
Javascript（jQuery）を用いた簡単なアニメーション・ウェブサイト内の動きの実装

実状

入社して半年が過ぎ、出来ることが増え、コーディングスピードも上がってきました。
しかし、先輩方が作ってくれた開発環境で、調べたり聞いたりしながら感覚で覚えた新しい環境の使い方。
EJS, SCSS, Gulpについての理解は乏しいままだったりします。

EJS, SCSSについてはなんとなく理解している定義を明確にしたい。
環境については1から自分で作ったら理解できそう！と自前のMacbookの前で気張りますが

・・・何から始めればいいのか？

となり、結局先輩方の手を借りながら環境構築を行いましたので、似た記事があることは承知で書き残そうと思います。(すでに自力やないんかい)

Qiitaの記事は知識の豊かな方が書かれていることが多いため、既知であることを前提として、用語がたくさん使われています。
**まず○○ってなんやねん、**みたいなことが沢山起こったので、そこも出来るだけ書きたいと思います。
私みたいな人のために、そして私が忘れそうなので。

EJS, SCSS, Gulpについて

EJSとは

EJSは、テンプレートエンジンと呼ばれるもので、コーディング作業を楽にしてくれる優れもの。
htmlのhead,header,footerなどの使い回すパーツをテンプレート化して、複数の他のEJSに読み込むことが出来ます。
また、プログラムちっくな記述をhtmlと混在させられるようなイメージ。
このEJSをGulpを使ってHTMLに変換します。

SCSSとは

SCSSとは、SASSをよりCSSに近い形で書けるようにしたSASSの記法。
CSSで正しいとされる書き方は、SCSSでも正しいとされます。

SASSとは
CSSの入れ子構造などが表現可能になったスタイルシート。
入れ子や関数の利用で記述スピードや視認性が上がる、CSSの拡張版。
SASS記法はCSSの書き方と少し異なるため、CSSの書き方を変えずに拡張機能を使えるSCSS記法が主流となっています。

Gulpとは

様々な作業を自動化してくれる便利なツール。
タスクランナーやビルドシステムヘルパーと呼ばれます。
EJS・SCSS編集後のHTML・CSSへの変換や、画像の圧縮、その他手間のかかる作業（タスク）を自動で行なってくれるため、作業の効率化に繋がります。
また、同じ設定（）で使うことで、開発者が誰であってもその作業の品質を保つことができます。
このGulpを使うためには、Node.jsのインストールが必要です。

この記事のゴール

####私は何がしたいのか。

私物のPC（macbook air）でHTML,CSS,JS(jQuery)を使った実験が出来る環境を作りたい。
HTMLはEJSを用いて、CSSはSCSSを用いて書きたい。
EJSとSCSSのコンパイルはGulpを使って自動でやりたい。

出来ることを増やす勉強をするための、環境づくりがしたかったんですね。

つまり、

EJS,scssを使ってコーディングしたい
→ EJSからhtmlに、scssからcssに変換（コンパイル）しなければならない。
→ コンパイルする方法の一つに、Gulpのプラグインを使う方法がある。
→ まず、Gulpの実行環境を整えよう！

ということになりました。

コンパイルとは
人間が見てわかりやすいように記述されたプログラミング言語を、機械が理解できるように翻訳すること
この記事では、主にEJSをHTMLに、SCSSをCSSに変換・出力すること（と私は捉えている）

プラグインとは
機能を追加するための追加のプログラム

ゴールに向けて必要なこと

［1］ OSのアップデート
［2］ xcodeのインストール（homebrewのインストールの為）
［3］ homebrewのインストール（nodebrewのインストールの為）
［4］ nodebrewのインストール（node.jsのインストールの為）
［5］ node.jsのインストール（Gulpのインストールの為）
［6］ Gulpのインストール
［7］ Gulpのプラグインを使うための設定
［8］ゴール！

Gulpの実行環境を作るために、この手順を踏みます。

Gulpを入れるためにnode.js…
を入れるためにnodebrew…
を入れるために…
と遡ってその度に沢山記事を読みました。

全ての何故？を解決しようとすると、時間がかかりすぎるのですが、なんとなく理解して進みたいですよね。

###［1］ OSのアップデート
先日、私のmacのOSは数年アップデートされていなかったことが判明しました。
OSが古すぎて流石に怖いので、「MacOS Mojave」を使って最新版にアップデート。
ここすら、自力で出来ていないのでタイトルはやっぱりほぼ嘘です。
このステップは踏まない人が多いと思いますが、みなさんアップデートは定期的にしましょう…！

###［2］ xcodeのインストール
次の手順で必要となるhomebrewを入手するために、XcodeのCommand Line Toolsが必要になります。
Command Line Toolsを入手するために、Xcodeをインストールします。
Xcodeは容量が大きいので、XcodeなしでCommand Line Toolsのみを使う方法を取る人もいるようですが、今回はXcodeもインストールします。

####Xcodeのインストール
Xcodeとは、Appleの開発者向けツールです。
Apple製品のアプリを作るために必須となるものですが、今回はhomebrewをインストールするために使います。
このXcodeはApp Storeで入手できます。

####XcodeのCommand Line Toolsのインストール
macでターミナルを立ち上げて、下記のように入力することでインストール出来ます。

$ xcode-select --install

ターミナルとは
コマンドと呼ばれる命令文でMacに操作指示を出すことが出来るアプリケーション
使い方参照：今さら聞けない！ターミナルの使い方【初心者向け】

下記のように入力し、インストールしたCommand Line Toolsのバージョンが確認出来たら

$ xcode-select -v

homebrewをインストールする準備が出来ました。

・
・
・

［3］以降の手順は次の記事で書きたいと思います。
この記事を書きながらやっと理解が深まっているところもあり、アウトプットって大事だな〜と改めて思ったのでした。

ちなみに、開発環境に関する知識があって手順［5］まで終わってる！
という人のための記事は先輩が書いてくれていますので、よろしければ。

【mac用】npmでgulpを使い、ejsとscssの環境を作る

では次週、Qiitaっぽい記事を目指して続きを書いていきたいと思います。