全て与えられてきた新人が自力でフロントエンド環境構築［1］

# はじめに
この記事は**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」](https://itunes.apple.com/jp/app/macos-mojave/id1398502828?mt=12)を使って最新版にアップデート。
ここすら、自力で出来ていないのでタイトルはやっぱりほぼ嘘です。
このステップは踏まない人が多いと思いますが、みなさんアップデートは定期的にしましょう…！

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

####Xcodeのインストール
[Xcode](https://itunes.apple.com/jp/app/xcode/id497799835?mt=12)とは、Appleの開発者向けツールです。
Apple製品のアプリを作るために必須となるものですが、今回はhomebrewをインストールするために使います。
この[Xcode](https://itunes.apple.com/jp/app/xcode/id497799835?mt=12)はApp Storeで入手できます。

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

```
$ xcode-select --install
```

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

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

```
$ xcode-select -v
```

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


・
・
・



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

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

[【mac用】npmでgulpを使い、ejsとscssの環境を作る](https://qiita.com/irie_toku/items/5e255b203e60cf15d122)

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