シェルスクリプトでフォルダ構造からhtml、css、jsファイル作成、git連携まで一発で作成する

はじめに

シェルスクリプトはターミナルコマンド（Unixコマンド）をまとめたコマンドのこと。

【例】シェルスクリプトとはどんなものか？

そもそもは**ターミナルコマンド(Unixコマンド)**をまとめたプログラムです。
試しに以下に、非常にシンプルな文字を出力するだけのシェルスクリプトを書きます。

デスクトップに新規ファイル「trial.sh」を作成しましょう。

trial.sh

# !/bin/sh
　　　
echo "Hello, CodeShip!"

#!/bin/shはシェルスクリプトの冒頭に書く約束になっています。
echoは画面に文字を表示させるコマンドです。

作成したtrial.shファイルを保存して、ターミナルで以下を入力します。
またshファイルは初期状態では実行ができないよう設定されているので、chmodコマンドで実行許可を与えます。

設定変更

$ cd ~/Desktop/ #デスクトップに移動
$ chmod 755 trial.sh #実行許可を与える
$ ./trial.sh #実行

結果

terminal
Hello, CodeShip!

という風になります。

シェルスクリプトを使うとこんなことができる。一連のコマンド入力を一発入力。

例えば「ちょっとWebサイトのソースを書きたいな」と思った時に、

「HTML, CSS, JavaScriptをしまうフォルダを作って、新しいindex.htmlを作って その中にCSS, JSフォルダを作って、それぞれ中にstyle.cssとmain.jsを作って、gitも使うことにして…」

という決まり切ったファイル・フォルダ作成の手順をこなすことはよくあると思います。
これを一瞬で実装してくれるコマンドを実装します。

新規ファイル「mkfiles.sh」を作成します。
中身のコードはこんな感じです。

mkfiles.sh

# !/bin/sh

mkdir $1
cd $1
touch index.html
mkdir css js
touch css/style.css js/main.js
code . 
git init 
git add .
git commit -m "最初のコミット"

コマンドの解説

コマンドの解説

mkdir $1
cd $1
# 省略
mkdir css js

mkdirは今いる場所にディレクトリ(フォルダ)を作成するコマンドです。
cdがディレクトリに移動するコマンドなので、作成したディレクトリの中に入ることになります。
$1にはコマンドライン引数が入り、呼び出すときに与えた文字が代入されます。
あとで呼び出すときに確認しましょう。
さらにその中でもcss, jsフォルダを作成していますね。

css,jsフォルダを作成

touch index.html
# 省略
touch css/style.css js/main.js

touchはファイルの最終処理日時を更新するコマンドですが、存在しないファイル名を打つとファイルを新規作成できます。
コマンドからindex.htmlを作成しました。
またcss/style.cssのように、フォルダの中にファイルを直接作成もできます。

code . 

codeでVSCodeをターミナルから直接開けます。
code .コマンドは今いるディレクトリをプロジェクトとしてVSCodeを開きます。
ただし事前にVSCodeを開いてこのコマンドをインストールしておく必要があります。

1. Command + Shift + Pでコマンドパレットを開く
2. “Shell”で検索
3. Shell Command: Install ‘code’ command in PATHを選択した状態でEnterでインストール

gitも使えるように

git init 
git add .
git commit -m "最初のコミット"

ついでにディレクトリ内でgitを使えるようにしておきました。
必須ではないですね。
先ほどと同様に実行してみましょう。

実行する

$ chmod 755 mkfiles.sh
$ ./mkfiles.sh myapp

実行するとき、作るディレクトリ名にmyappが$1に代入されます。
myappディレクトリがmkdirされ、そこにcdします。
以下のようなファイル構造が出来上がっていて、
VSCodeがmyappをプロジェクトとして起動していたら成功です！

デスクトップ

- myapp 
    - index.html
    - css
        - style.css
    - js 
          - main.js

シェルスクリプトはこのようの使うことができます！
ご参考までに！

まとめ

ここまで書いておいて特に必須というわけではありませんが、普段よく使う操作コマンドだったりディレクトリやファイルの作成などの一連の作業を、このようにおシェルスクリプトで組んでおくと非常に楽です。

もし興味がある方はぜひ小さなライフハックを。

参考

この記事は「CodeShip」内での実際の質疑応答や指導・アドバイスの一部を基に作成しています。