見出し画像

同時進行中の開発プロジェクトをスムーズに切り替える2つの小技


弊社では受託開発を主に請け負っているため、複数案件を同時並行で進めることが多く、

🤔「npm run start でエラー… あ、バージョン変ええないと…あれ 8.何.何だったかな…」
😩「npm run start… いや違う、こっちでは npm run dev やん!」
😇「案件A進めようとしてvscode開いてて、なぜかファイルが無いと思ったら、案件Bのプロジェクトを開いていた!」

といったことが、時々ありました。

ですが、

1. コマンド一発で node.js バージョン切り替えとプレビューサーバー起動まで行う
2. プロジェクトごとにウィンドウの色を変える

という、ちょっとした小技を導入したら、これらの問題を(だいぶ)解決できたので、共有しておこうと思います👍

※ gitとnodejsを使用した基本的フロント開発の知識を前提とします。


1.コマンド一発で node.js バージョン切り替えとプレビューサーバー起動まで行う

案件によって、node.jsのバージョンが 8系だったり11系だったりと違うことがあるので、プロジェクトを切り替えてとりあえずプレビューしようと、おもむろに「npm run start」とか実行しても、バージョン違いによりエラーが出てプレビューできなかったりします。

さらにはバージョンを切り替えても、案件によってスクリプトが微妙に異なるため、「npm run start」と「npm run dev」を間違えたりすることもあります。

そこで、シェルスクリプトを使って、一発で切り替えられるようにします。

たとえば、プロジェクトのルートに下記のようなファイルを作成しておくと…

# .sh/run.sh 
nodebrew use v8.9.4
npm run start

ターミナルで 「.sh/run.sh」というコマンド一発だけで、正しいnode.jsバージョンへの切り替えと、正しいコマンドでプレビューできます。
これでプロジェクト切り替えてから、そのプロジェクトのnode.jsのバージョンやプレビュースクリプトを確認するという地味に面倒な手間がなくなります!

頻繁に実行する&覚えにくいコマンドは、このようにシェルスクリプトとしてファイル書いておくとラクになります。

ちなみに、普通にテキストファイルのように作成しただけでは、ファイルの実行権限が無いので、「 .sh/run.sh」 コマンドだけでは実行できません。(. .sh/run.sh とする必要あり)
あらかじめ「chmod 777 .sh/run.sh」を実行して、シェルスクリプトファイルを実行できるようにしておきましょう。

※補足:nodebrewについて

上記コマンドにはnodebrewというnodejsのバージョンを管理するためのツールが必要になります。

個人で初めてnode.js触った頃は、バージョン切替の必要はなかったのでnodebrewは入れてなかったですが、会社でnodeのバージョンが異なる複数案件進めるとなったら、これがないとやってられないです…😇

もしnodebrewをインストールせずにnode.jsバージョン切り替えしてるなら、すぐインストールすることを強く勧めます。。

nodebrewのインストール方法等の詳細は下記記事が参考になります。
https://qiita.com/mame_daifuku/items/373daf5f49ee585ea498

2.プロジェクトごとにウィンドウの色を変える

今何のプロジェクトを開いているかをひと目で判別できるように、vscodeではプロジェクトごとにタイトルバー(一番上)や、アクティビティバー(一番左)のを変更できます。

たとえば、最近自分が手がけてる案件のプロジェクトでは、こんな感じにウィンドウの色を変えてます↓

スクリーンショット 2020-04-28 17.51.20a

基本的に、そのプロジェクトのキーカラーを設定したり、同時に似たような色のプロジェクト進めてたら、片方はアクティビティバーは別の色にしたり。

メインのプロジェクトではなく、参考としてvscodeでファイルを開いてるウィンドウではデフォルトテーマになるので、それとも判別つきやすくなります。

これは、プロジェクトルートの .vscode ディレクトリ内に、ファイル名 settings.json で下記のように記述すれば設定できます。

{
  "workbench.colorCustomizations": {
  "titleBar.activeBackground": "#e78d00",
  "titleBar.activeForeground": "#ffffff",
  "activityBar.background": "#e78d00",
  "activityBar.foreground": "#ffffff",
  }
}

エディタエリアの背景や文字の色なども設定できるようですが、個人的には一番上のタイトルバーと、一番左アクティビティバーの背景色と文字色さえ変更できれば、色で判別するには十分かと思います。

他の色設定プロパティは下記記事が詳しいです。
https://qiita.com/deren2525/items/6bc099ae8c05e3076055

補足: 設定用ファイルを git管理から除外する(.gitignore_global)

これらの設定には、プロジェクトに自分用の設定ファイルを追加することになります。

複数人でgit管理してるプロジェクトなら、それらのファイルはgit管理に含めないようにする必要があります。他の人には不要なファイルなので。
かといって、プロジェクト自体の .gitignore に勝手に追記するわけにもいかない…

そういうときに使えるのが .gitignore_globalです。

ホームディレクトリ(/Users/UserName)に、.gitignore_global という名前のファイルを用意して、そこに除外したいファイル・ディレクトリ名を記述すると、自分のPCのすべてのgitプロジェクトで、記述したファイル・ディレクトリがgit管理から除外されるようになります。

下記のコマンドで .gitignore_global をvimで開くor 新規作成できます。

vim ~/.gitignore_global

たとえば、上記で解説した、 .sh ディレクトリと、.vscode ディレクトリを除外したいなら、 下記のように記述すればOKです。

.sh
.vscode

もし設定が反映されない場合は、下記コマンドで実行できるようです。

git config --global core.excludesfile ~/.gitignore_global

参考: https://qiita.com/elzup/items/4c92a2abdab56db3fb4e


地味な小技ですが、こういうところで少しでも作業効率を上げていけるといいですね😁

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
3

こちらでもピックアップされています

SPREAD SYSTEMS INC. TECH BLOG
SPREAD SYSTEMS INC. TECH BLOG
  • 17本

SPREAD SYSTEMS INC. ( https://www.spreadsystems.co.jp/ )が運営するTECH情報BLOGです。

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。