Posted at

フロントエンドエンジニア用のコマンド関連

More than 1 year has passed since last update.

Webデザイナーやコーダー、マークアップエンジニアにとってはCLI(いわゆる黒い画面)に抵抗感を抱く人は割と多いのではないでしょうか。

フロントエンドを本格的にやる場合、CLIでの操作が必要になってきます。

最近ではpackage.jsonのnpm-scriptsにコマンドを記述しておき、CLI側でキーを入力して実行することが多いです。(npm run * とか yarn * とか)

よく使うコマンドやパッケージの調べ方あたりを簡単ではありますが、紹介します。


Linuxコマンド

仕様頻度の高いものだけにとどめておきます。

オプションで詳細設定や違うこともできますが、その辺は参考記事をご確認ください。

コマンド
内容

ls
ファイル・ディレクトリを表示
参考:【 ls 】 ファイルやディレクトリの情報を表示する

cd 移動先ディレクトリ
ディレクトリの移動
cd ../:一つ上のディレクトリへ移動
cd js/vendor:js/vendorへ移動
cd /home/user1:/home/user1へ移動
参考:【 cd 】 ディレクトリを移動する

mkdir ディレクトリ名
ディレクトリの作成
下層ディレクトリを作成する場合は-pが必要
参考:【 mkdir 】 ディレクトリを作成する

touch 作成ファイル名
空ファイルの新規作成
参考:【 touch 】 ファイルのタイム・スタンプを変更する


npm公式サイト(英語)に慣れる

「npm パッケージ名」で検索するとよく上位に出てきます。

日本語で紹介されていないパッケージはどうしても公式を読むことになります。

英語がわからなくてもコマンドやコードを読めばなんとなくわかるようになってきます。

知りたいことは


  • どうやってインストールするか(Installation)

  • どうやって使うか(Usage)

  • どのようなオプションがあるか(Options)

  • 例えばどのように書くか(Examples)

だいたいこれくらいだと思います。

インストールは極力グローバル(-g)は避けましょう。ローカルにインストールする場合、バージョンの差異で将来苦しむ可能性があります。

-gはつけず-Dでpackage.jsonでプロジェクトごとの管理にしましょう。

npm-scriptsの中に


package.json

{

"scripts": {
"test": "使いたいコマンド"
}
}

と書いておき、CLIで

$ npm test

と実行すれば大体はOKです。(※後述)

最初は慣れないかもしれませんが、オプションは同じようなものを使うことが多いので慣れてしまえばラクです。

パッケージによっては「***-cli」という名前で提供しているものがあり、CLIを使用したい場合はこちらのインストールが必要な場合があります。

※オプションは大文字・小文字がパッケージによって違うことがあるので使用前に必ず公式を確認してください。


よくあるオプション

オプション
内容

-h, --help
ヘルプを表示

-v, --version
バージョンを表示

-w, --watch
監視

-d, --dir
出力先ディレクトリの指定

-o, --output
出力先ファイルの指定


注意事項

CLIに直接入力して実行する場合とnpm-scripts側に用意し呼び出して実行する場合(※前述)があります。

npm-scripts側に用意し呼び出して実行する場合、Linuxコマンド

がそのまま通らないことがあったりOSごとに記述が違って複数OSでの実行ができなかったりします。

そこを解決するパッケージが存在するので、もしエラーを吐いてしまった場合にLinuxコマンドを使用していれば確認してみると良いでしょう。


Linuxコマンドの機能を提供するパッケージ

パッケージ名

rimraf
ファイルやディレクトリを削除する
rm -rfを実行するツール
参考:【 rm 】 ファイルやディレクトリを削除する

mkdirp
ディレクトリ作成をnpm-scriptsで使用できる機能を提供
mkdir -pを実行するツール


さいごに

フロントエンドの作業をおこなう時のCLIに関する内容をまとめました。

他にもたくさんできることはありますが、最初の取っ掛かりとして参考になればと思います。