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