#1 コマンドラインを使おう

なぜコマンドラインを使うの?

コマンドラインとはマウスを使わずに、キーボードだけの操作を指します。 PCへの命令コマンド する 入力行ラインですね。 コマンドラインはアプリケーション(コマンドラインツール)を使って実行します。

フロントエンドエンジニア中級まではPHPのバージョンをMAMP(XAMPP)などのアプリケーションを使うことで管理してきました。
上級になるとNode.jsやPython、JAVAなどを扱っていきますが、これらの言語のインストールやバージョンアップするのに便利なのが「パッケージマネージャー」です。
上級者はPHPやMySQLもMAMP(XAMPP)を使わずにパッケージマネージャーで管理します。

コマンドラインツールで「パッケージマネージャー」をインストールしたり、そのパッケージマネージャーからプログラミング言語をインストール、アプリの実行をしていきます。

CLIとGUIの違い

CLI(Command Line Interfaceコマンドラインインターフェース)とは文字でPCに命令を出す手法で、 下記のように画面上で命令文を打ち込み、ファイル操作やプログラムの実行を行います。
※コマンドはJavascriptで学んだメソッドのようなものと思ってもらえれば大丈夫です。
CUI操作画面
GUI(Graphical User Interfaceグラフィカルユーザーインターフェース)とは、普段私たちがマウスやキーボードで画面を操作していることをさします
GUI操作画面
現在ほぼ全てのPCがGUIで操作していますが、上記で紹介した仕事効率化ソフトのインストールや操作をするときはコマンドラインで操作することがありますので今のうちに慣れておきましょう。

コマンドラインツールを起動する

早速コマンドラインツールを起動してみましょう。
MacとWindowsでは起動方法が異なるのでそれぞれの方法で起動してください。

Macの場合
アプリケーションフォルダのユーティリティの中から「ターミナル」をダブルクリック
ターミナル.app

Windowsの場合
【Win(Windowsマーク)+R】で「ファイル名を指定して実行」機能を起動して下記を入力しましょう。

cmd
Windowsはこれだけで起動します。

コマンド画面の見方

ターミナルを起動すると以下の画面が出ると思います。
※画面と文字の色に関しては設定によるものなので同じでなくて問題ありません。
実際に打ち込んでいくのはメソッドと引数の部分になります。
PC名、ディレクトリ、ユーザ名の部分はなにが表示されているかが分かっていれば問題ありません。

#2 パッケージマネージャーHomebrewを使う

Homebrewホームブリューはパッケージ管理ソフトです(Windowsの場合はChocolateyなど)。
フロントエンドエンジニア上級コースで使うプログラミング言語のバージョン管理が簡単に行うことや、jsライブラリ、PHPフレームワークをインストールできる便利なアプリです。(インストールにはXcodeが必要になります。)

まず最初にWeb制作における「仕事効率化」をするために、 Gitギット Node.jsノードジェイエス gulpガルプ) などを習得しましょう。 Node.jsノード ジェイエスとは簡単に言うとプラグインをインストールするためのライブラリです。 厳密に言えばライブラリとしての機能は使い方の一部ですが今はそれだけ覚えていれば大丈夫です。

インストールの手順

インストール手順ですが、MacとWindowsで異なりますので自分が使っているOSの手順を見てください。
▼ Macでのインストール方法
  1. Xcodeエックスコードのインストール
  2. Homebrewホームブリューのインストール
  3. nodebrewノードブリューのインストール
  4. Node.jsノードジェイエスのインストール
Macの手順を表示する/非表示にする

Xcodeのインストール

XcodeはIDE(統合開発環境)の1つです。
iOS向けのソフトやアプリ制作に特化しているIDEです。
実際に使うのはXcodeに含まれている、command line developer toolsコマンドライン・デベロッパー・ツールのみ使いたいのでIDEは起動しなくて大丈夫です。
インストール方法は2種類ありコマンドでインストールするか、AppStoreからインストールするかです。 今回はコマンドからインストールしましょう。

xcode-select --install
上記のコマンドを入力すれば、下のポップアップが出てくるので「インストール」を選択しましょう
インストールが完了したらもう一度上のコマンドを打ち込んでインストールされているか確認しましょう。

xcode-select -v
xcode-select version 2354.
この表示が出たらXcodeのインストール完了です。

Homebrewのインストール

Homebrewはツールの「実行ファイルや設定ファイルをひとまとめにしたもの=パッケージ」と呼ばれるもののインストールやアンインストール、アップデートを人間の代わりに管理してくれるツールです。
下記の公式サイトにインストールするためのコマンドが用意されています。
Homebrew公式サイト
▼ Homebrewインストールコマンド

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
コマンドを打ち込んでHomebrewをインストールしましょう。
コマンドを入力すると
インストールされるファイルが表示されます。 このまま続行するので「Enter」を押しましょう。 そうすると下記の箇所で止まります。
PCにログインする時のパスワードを入力して、インストールが完了するのを待ちます。
完了したら、下記のコマンドを打ち込んでHomebrewがインストールされているか確認しましょう。
▼ Homebrewバージョン確認コマンド

brew -v
この表示が出たらHomebrewのインストール完了です。

nodebrewのインストール

nodebrewは自分のPC内でnode.jsのバージョン管理をする時に使用するツールです。
プロジェクト毎に使用するnode.jsのバージョンが違う時にそれぞれのプロジェクトに異なるバージョンのnode.jsをインストールすることができます。
▼ nodebrewインストールコマンド

brew install nodebrew
コマンドを入力すると、下記の表示が出ます。
この表示が出たら、nodebrewがインストールされているか確認しましょう。
コマンドを打ち込むと下記の表示が出ます。
▼ nodebrewバージョン確認コマンド

nodebrew -v
こrでインストールは完了ですが、nodebrewに関しては環境変数パスを通す必要があります。
環境変数パスとは簡単に言うと、「コマンドを実行するファイルへの道順」です。
nodebrewインストールしただけでは、道順が設定されていないので今から設定していきます。
▼ 環境変数パス設定コマンド

echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile
「bash_profile」と言う設定ファイルに「.nodebrew/current/bin」までのパス「$PATH」と言う変数にいれて設定しています。
パスが追加されているかを確認しましょう。
▼ 環境変数パスの確認コマンド

echo $PATH  /*コマンドを打ち込むと*/

/Users/ユーザ名/.nodebrew/current/bin:  /*この表示が出てくればOKです。*/
これで、nodebrewに関しては完了です。

Node.jsのインストール

ここまでの準備お疲れ様です。
いよいよNode.jsのインストールです。これが完了できれば今使っているPCでNode.jsが使えるようになるので頑張りましょう。
Node.jsをインストールするコマンドは複数あります。

nodebrew install-binary stable  /**安定板のインストール**/
nodebrew install-binary latest  /**最新版のインストール**/
nodebrew install-binary バージョン  /**特定のバージョンを指定してインストール**/
今回は安定板をインストールしましょう。

nodebrew install-binary stable
このコマンドを打ち込むと自動的にインストールされます。
正しくインストールされているか確認します。

node -v
この表示が出ればOKです。
▼ Windowsでのインストール方法
  1. Nodistノーディストのインストール
  2. Node.jsノードジェイエスのインストール
Windowsの手順を表示する/非表示にする

Nodistのインストール

Nodistとは、WindowsでNode.jsを管理するためのツールです。
HomebrewやNodebrewは現在、macのみに対応しているため、Windowsでは別のツールを使う必要があります。
Nodistのインストールは下記ダウンロードページからインストールします。
Nodistダウンロードページ
このページからインストーラーをダウンロードします。
ダウンロードが完了したら、インストーラーを起動してNodistをインストールしましょう。
インストールできたら、下記コマンドを打ち込んでインストールされているか確認しましょう。

nodist -v

v0.9.1 /** インストールしたバージョンが表示 **/
バージョンが表示されたらNodistのインストールは完了です。上記のコマンドを叩いても表示されなかった場合は以下を参照してください。
環境変数にパスを通す

環境変数にPATHを通す

環境変数パスとは簡単に言うと、「コマンドの実行ファイルが格納されている場所への道順」です。 先ほど、コマンドを叩いてもバージョンが表示されなかったのはPCがコマンドの実行ファイルを見つけられなかったのが原因です。
なのでPCがわかるように道順を記述していきます。設定方法は以下です。
  1. 「コントロールパネル」を開く
  2. 「システムとセキュリティ」を開く
  3. 「システム」を開く
  4. 「システムの詳細設定」を開く
  5. 「環境変数」を開く
  6. 「PATH」という変数の中に「..\nodist\bin (nodist.cmd があるパス)」を設定
  7. 「NODIST_PREFIX」という変数の中に「...\nodist (package.json があるパス)」を設定
  8. 設定が完了したら、もう一度、「Nodist -v」を叩いてみる。

Node.jsのインストール

Nodistがインストールできたら、次はNode.jsをインストールしていきます。
▼ Node.jsのインストールコマンド

nodist stable /** 安定板のインストール **/
nodist latest /** 最新版のインストール **/
nodist + 任意のバージョン /** バージョンを指定してインストール **/
インストールするためのコマンドは複数ありますが今回は安定板をインストールしましょう

nodist stable
Node.jsのインストールが出来たら、ちゃんと入っているかを確認します。

node -v
バージョンが表示されたらインストール完了です。

#3 タスクランナー(gulp.js)で処理の自動化

タスクランナーとは?

タスクランナーとはある作業を自動で処理することができるようになるツールです。
例えばsassからcssへのコンパイルHTML文章の整形Javascriptのデバッグなどを自動で行ってくれます。
タスクランナーが世に出るまではこれらの作業を全て手動で行う必要がありましたが、 タスクランナーを使用することで自動で処理することができるようになり作業時間を大幅に削減することが可能になりました。
さらにはプロジェクトや個人の好みに応じて、自由に処理する機能を自由にカスタマイズが可能です。
一番有名なタスクランナーで、gulp.jsガルプ ジェイエスというものがありますので今回はgulp.jsを使って処理を自動化してみましょう。
gulp.jsをインストールには前の項目でインストールしたNode.jsノード ジェイエスを使用します。

インストールはnpmエヌピーエムコマンドで行う

npmとはNode Package Managerノード パッケージ マネージャーの略称で Node.jsのあらかじめ用意されている便利な機能を管理するためのツールパッケージ マネージャーです。「#1 コマンドラインを使おう」で説明した、
  1. 「パッケージマネージャー」をインストール
  2. パッケージマネージャーからプログラミング言語をインストール、アプリの実行
上記の操作はnpmコマンドを打ち込んで実行していきます。

gulp.jsのインストール

今回はLAMP環境を構築するときに作ったstgフォルダにインストールして、どのプロジェクトでもgulpを使えるようにしていきましょう
まずはコマンドラインツールを起動してstgフォルダに移動します。コマンドでフォルダを移動するには cdチェンジディレクトリコマンドを使います。

cd stgフォルダまでのパス
上記のように移動したいフォルダをコマンドラインツールにドラッグ&ドロップすると自動的にパスが設定できます。
道順が設定できたら、Enterを押してディレクトリを移動しましょう。
stgフォルダに移動できたら、下記コマンドを打ち込みましょう。

npm init -y
上のコマンドではプロジェクトの情報が記載された「Pacakage.jsonパッケージジェイソン」というファイルを作成しています。jsonファイルとはJavaScript Object Notationジャバスクリプト オブジェクト ノーテーションという単語の頭文字を取って命名されたファイルのことですが。ここでは簡単に、データを書き込めるテキストファイルと覚えておきましょう。
コマンドを打ち込んだら、stgフォルダを確認しましょう、Pacakage.jsonファイルができているはずです。
特に直接編集することはないので、プロジェクト情報が載ったファイルが作られたんだなと思っていただければ問題ありません。
確認できたら、いよいよgulpをインストールします。

npm install -g gulp /* グローバルインストール(PC全体のイメージ) */

npm install -D gulp /* ローカルインストール(フォルダ内にインストール) */
stgフォルダを確認して、下記がインストールされていれば成功です。
  1. node_modulesノードモジュール:Node.jsのパッケージを格納する保管庫です。
  2. package-lock.jsonパッケージロックジェイソン:プロジェクトにどんなパッケージがインストールされたか記録されています
2つのファイルが確認できたら、下記コマンドを打ち込んで確認します。

gulp -v
gulpが正常にインストールされていればgulpのバージョンが表示されます。
ここまでで、gulpのインストールは完了です。
次からは実際に自動化する処理を書き込んでいきましょう。

ブラウザ自動リロードとサーバに自動アップロード

CBCの入門、基礎編でHTML/CSSコーディングをしていた時は
  1. HTML、CSSファイルを編集
  2. ファイルを保存
  3. ブラウザに移動
  4. ブラウザをリロードして反映を確認
のような手順を行なっていました。
さらに実務では、この手順に加えてFTPソフトを使って、テストサーバにファイルをアップロードして
0304を行います。
全て手作業でというのは時間効率が悪くなってしまいます。
インストールしたgulpを使い、以下のタスクを作成してみましょう。
ファイルが更新されたら、ブラウザを自動でリロード
コマンドを叩いたら、特定のファイルをアップロード

プロジェクトフォルダの準備

stgフォルダに「template」というフォルダを作り中身にレストランのレスポンシブ対応したファイルをコピーします
ここでgulp環境のテンプレートを作成して、MAMP(XAMPP)管理するものが増えても、gulpを使えるようにしてみます。

stg
└ template  NEW!
  ├ css
  │ └ style.css
  ├ img
  │ └ 画像ファイル
  └ index.html

templateフォルダにgulpプラグインをインストール

処理を自動化するためにプラグイン(機能)をインストールします

cd templateフォルダまでのパス

/** ↓↓↓↓↓↓↓↓↓ **/

npm install --sav-dev browser-sync gulp-ftp
このコマンドでbrowser-syncブラウザーシンクgulp-ftpガルプエフティーピーの2つのプラグインをインストールします。 ここまで出来たら、次は実際にタスクを書いていきます。

gulpfile.jsの作成

gulpfile.jsとはgulpで行う命令を書き込むためのファイルです。
書き方はJavascriptで記入していきます。
プロジェクトフォルダのpackage.jsonファイルと同じ場所に新規ファイルでgulpfile.jsを作成します。

stg
└ template
  ├ css
  │ └ style.css
  ├ img	
  │ └ 画像ファイル
  ├ index.html
  ├ package.json
  └ gulpfile.js	NEW!
gulpfile.jsを作成したら、早速タスクを書いていきます。

var gulp = require('gulp');
var browser = require('browser-sync').create();

/* ローカルサーバを立ち上げるタスク */
gulp.task('server', function (done) {
  browser.init({
   server: {
    baseDir: "../template",
    index: 'index.html'
   }
  });
  done();
});

/* ファイルを監視するタスク */
gulp.task('watch', function(done) {
 gulp.watch("*.html", gulp.task('browser-reload'));
 gulp.watch("*/*.css", gulp.task('browser-reload'));
 gulp.watch("*/*.js", gulp.task('browser-reload'));
 done();
});

/* ブラウザを自動リロードするタスク */
gulp.task('browser-reload', function(done) {
 browser.reload();
 done();
});

/*デフォルトで起動させるタスク*/
gulp.task('default', gulp.series('server', 'watch', function(done) {
 done();
}));

gulpfile.jsの解説

変数を宣言して、gulpプラグイン(機能)を読みこむ

/** gulpという名前の変数にgulpのを読み込んでいます。 **/
var gulp = require('gulp');

/** browsersyncという名前の変数にbrowser-syncプラグインを読み込んでいます。 **/
var browsersync = require('browser-sync');

/** gulpsftpという名前の変数にgulp-ftpプラグインを読み込んでいます。 **/
var gulpsftp = require('gulp-ftp');
ローカルサーバを立ち上げるタスクを記述

/** タスク名をserverという名前にする **/
gulp.task('server', function (done) {

 /** broser-syncの設定 **/
 browser.init({

	/** ローカルサーバの設定 **/
  server: {

   /** templateフォルダをルートにする **/
   baseDir: "../template",

   /** templateフォルダ内のindex.htmlを初期表示 **/
   index: 'index.html'
  }
 });

 /** タスク終了の合図 **/
 done();
});
ブラウザをリロードするタスク

/** タスク名をbrowser-reloadという名前にする **/
gulp.task('browser-reload', function(done) {

 /** ブラウザをリロード **/
 browser.reload();

 /** タスク終了の合図 **/
 done();
});
ファイルを監視するタスク

/** タスク名をwatchという名前にする **/
gulp.task('watch', function(done) {

 /** 拡張子が.htmlのファイルが更新されたらbrowser-reloadタスクを実行 **/
 gulp.watch("*.html", gulp.task('browser-reload'));

 /** cssフォルダ内の拡張子が.cssのファイルが更新されたらbrowser-reloadタスクを実行 **/
 gulp.watch("css/*.css", gulp.task('browser-reload'));

 /** jsフォルダ内の拡張子が.jsのファイルが更新されたらbrowser-reloadタスクを実行 **/
 gulp.watch("js/*.js", gulp.task('browser-reload'));

 /** タスク終了の合図 **/
 done();
});
gulp起動時に行うタスク

gulp.task('default', gulp.series('server', 'watch', function(done) {done();}));

/** ↓↓↓↓ 分解 ↓↓↓↓ **/

/**
タスク名をdefaultという名前にする。
※defaultはgulp側で決められているタスク名です。
**/
gulp.task('default',

  /** serverタスク、watchタスクの順番でタスクを起動する。 **/
  gulp.series('server', 'watch', function(done) {

  /** タスク終了の合図 **/
  done();
}));

gulpの起動

タスクを書いたらコマンドを叩いて、gulpを起動します。

gulp

wainashimotonoiMac:template y.nashimoto$ gulp

[02:58:05] Using gulpfile ~/stg/template/gulpfile.js
[02:58:05] Starting 'default'...
[02:58:05] Starting 'server'...
[02:58:05] Finished 'server' after 7.2 ms
[02:58:05] Starting 'watch'...
Server was launched
[02:58:05] Finished 'watch' after 10 ms
[02:58:05] Starting ''...
gulp watch started
[02:58:05] Finished '' after 372 μs
[02:58:05] Finished 'default' after 19 ms
default all task done!
[Browsersync] Access URLs:
 ------------------------------------
       Local: http://localhost:3000
    External: http://192.168.0.3:3000
 ------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 ------------------------------------
[Browsersync] Serving files from: ../template
起動すると、ブラウザに自動で画面が表示されます。
ファイルを編集、保存して自動リロードされるか確認してみましょう。
これでブラウザの自動リロードのタスクは完成しました。
次はサーバに自動でアップロードするタスクを作っていきます。

gulpfile.jsに自動アップロードのタスクを追記


var gulp = require('gulp');
var browser = require('browser-sync').create();

/** 追記 **/
var ftp = require('gulp-ftp');

/** 追記 **/
gulp.task('upload', function (done) {
 return gulp.src([
  '../template/*.html',
  '../template/**/*.css',
  '../template/**/*.js'
 ])
 .pipe(ftp({
   host: 'ホスト名',
   user: 'ユーザ名',
   pass: 'パスワード',
   remotePath: '/****/****/'
  })
 );
});

/* ローカルサーバを立ち上げるタスク */
gulp.task('server', function (done) {
  browser.init({
   server: {
    baseDir: "../template",
    index: 'index.html'
   }
  });
  done();
});

/* ファイルを監視するタスク */
gulp.task('watch', function(done) {
 gulp.watch("*.html", gulp.task('browser-reload'));
 gulp.watch("**/*.css", gulp.task('browser-reload'));
 gulp.watch("**/*.js", gulp.task('browser-reload'));
 done();
});

/* ブラウザを自動リロードするタスク */
gulp.task('browser-reload', function(done) {
 browser.reload();
 done();
});

/*デフォルトで起動させるタスク*/
gulp.task('default', gulp.series('server', 'watch', function(done) {
 done();
}));

追記の解説


/** ftpという名前の変数を作り、gulp-ftpを読み込んでいます。**/
var ftp = require('gulp-ftp');


/** uploadという名前のタスクを設定 **/
gulp.task('upload', function (done) {
 
 return gulp.src([

  /** template内の拡張子がhtmlのファイルを検索 **/
  '../template/*.html',

  /** template内のフォルダ内、拡張子が.cssのファイルを検索 **/
  '../template/**/*.css',

  /** template内のフォルダ内、拡張子が.jsのファイルを検索 **/
  '../template/**/*.js'
 ])

 .pipe(ftp({

   /** アップするサーバ情報 基礎で自分のフォルダを作った方のサーバ情報を記載 **/
   host: 'ホスト名',
   user: 'ユーザ名',
   pass: 'パスワード',

   /** アップするディレクトリ **/
   remotePath: '/****/****/'
  })
 );
});

サーバ情報の書き方について

サーバ情報ですが、今回はファイルに直接書かれていますが、その状態だと第3者に閲覧されてしまう可能性があります。
防ぐための手段として、別ファイルでjsonファイルを用意し、そこに記述する手法があります。
web制作をする際はこういったセキュリティも考えて作る必要があること覚えておきましょう。
ここまでタスクが記述できたら、コマンドを叩いて
・htmlファイル
・cssファイル
・jsファイル
3種類のファイルをサーバにあげてみましょう。

gulp upload
ファイルがサーバに上がったら、実際にURLを表示させてみましょう。
コピーしました
RSS https://cbc-study.com/rss.xml
質問などあればSlackで