作成日:2021/04/12 更新日:2022/01/27
#1 コマンドラインを使おう
なぜコマンドラインを使うの?
コマンドラインとはマウスを使わずに、キーボードだけの操作を指します。 PCへの命令 する 入力行ですね。 コマンドラインはアプリケーション(コマンドラインツール)を使って実行します。フロントエンドエンジニア中級まではPHPのバージョンをMAMP(XAMPP)などのアプリケーションを使うことで管理してきました。
上級になるとNode.jsやPython、JAVAなどを扱っていきますが、これらの言語のインストールやバージョンアップするのに便利なのが「パッケージマネージャー」です。
上級者はPHPやMySQLもMAMP(XAMPP)を使わずにパッケージマネージャーで管理します。
コマンドラインツールで「パッケージマネージャー」をインストールしたり、そのパッケージマネージャーからプログラミング言語をインストール、アプリの実行をしていきます。
CLIとGUIの違い
CLI(Command Line Interface)とは文字でPCに命令を出す手法で、 下記のように画面上で命令文を打ち込み、ファイル操作やプログラムの実行を行います。※コマンドはJavascriptで学んだメソッドのようなものと思ってもらえれば大丈夫です。


コマンドラインツールを起動する
早速コマンドラインツールを起動してみましょう。MacとWindowsでは起動方法が異なるのでそれぞれの方法で起動してください。
▼ Macの場合
アプリケーションフォルダのユーティリティの中から「ターミナル」をダブルクリック

▼ 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でのインストール方法
- Xcodeのインストール
- Homebrewのインストール
- nodebrewのインストール
- Node.jsのインストール
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をインストールしましょう。


完了したら、下記のコマンドを打ち込んでHomebrewがインストールされているか確認しましょう。
▼ Homebrewバージョン確認コマンド
brew -v

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


コマンドを打ち込むと下記の表示が出ます。
▼ nodebrewバージョン確認コマンド
nodebrew -v

環境変数パスとは簡単に言うと、「コマンドを実行するファイルへの道順」です。
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

- Nodistのインストール
- Node.jsのインストール
Nodistのインストール
Nodistとは、WindowsでNode.jsを管理するためのツールです。HomebrewやNodebrewは現在、macのみに対応しているため、Windowsでは別のツールを使う必要があります。
Nodistのインストールは下記ダウンロードページからインストールします。
Nodistダウンロードページ
このページからインストーラーをダウンロードします。

ダウンロードが完了したら、インストーラーを起動してNodistをインストールしましょう。
インストールできたら、下記コマンドを打ち込んでインストールされているか確認しましょう。
nodist -v
v0.9.1 /** インストールしたバージョンが表示 **/
バージョンが表示されたらNodistのインストールは完了です。上記のコマンドを叩いても表示されなかった場合は以下を参照してください。環境変数にPATHを通す
環境変数パスとは簡単に言うと、「コマンドの実行ファイルが格納されている場所への道順」です。 先ほど、コマンドを叩いてもバージョンが表示されなかったのはPCがコマンドの実行ファイルを見つけられなかったのが原因です。なのでPCがわかるように道順を記述していきます。設定方法は以下です。
- 「コントロールパネル」を開く
- 「システムとセキュリティ」を開く
- 「システム」を開く
- 「システムの詳細設定」を開く
- 「環境変数」を開く
- 「PATH」という変数の中に「..\nodist\bin (nodist.cmd があるパス)」を設定
- 「NODIST_PREFIX」という変数の中に「...\nodist (package.json があるパス)」を設定
- 設定が完了したら、もう一度、「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を使って処理を自動化してみましょう。

インストールはnpmコマンドで行う
npmとはNode Package Managerの略称で Node.jsであらかじめ用意されている便利な機能を管理するためのツールです。「#1 コマンドラインを使おう」で説明した、- 「パッケージマネージャー」をインストール
- パッケージマネージャーからプログラミング言語をインストール、アプリの実行
gulp.jsのインストール
今回はLAMP環境を構築するときに作ったstgフォルダにインストールして、どのプロジェクトでもgulpを使えるようにしていきましょうまずはコマンドラインツールを起動してstgフォルダに移動します。コマンドでフォルダを移動するには
cd stgフォルダまでのパス

道順が設定できたら、Enterを押してディレクトリを移動しましょう。
stgフォルダに移動できたら、下記コマンドを打ち込みましょう。
npm init -y

コマンドを打ち込んだら、stgフォルダを確認しましょう、Pacakage.jsonファイルができているはずです。
特に直接編集することはないので、プロジェクト情報が載ったファイルが作られたんだなと思っていただければ問題ありません。
確認できたら、いよいよgulpをインストールします。
npm install -g gulp /* グローバルインストール(PC全体のイメージ) */
npm install -D gulp /* ローカルインストール(フォルダ内にインストール) */

- node_modules:Node.jsのパッケージを格納する保管庫です。
- package-lock.json:プロジェクトにどんなパッケージがインストールされたか記録されています
gulp -v
gulpが正常にインストールされていればgulpのバージョンが表示されます。

次からは実際に自動化する処理を書き込んでいきましょう。
ブラウザ自動リロードとサーバに自動アップロード
CBCの入門、基礎編でHTML/CSSコーディングをしていた時は- HTML、CSSファイルを編集
- ファイルを保存
- ブラウザに移動
- ブラウザをリロードして反映を確認
さらに実務では、この手順に加えてFTPソフトを使って、テストサーバにファイルをアップロードして
03と04を行います。
全て手作業でというのは時間効率が悪くなってしまいます。
インストールした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
