はじめに
この記事は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っぽい記事を目指して続きを書いていきたいと思います。