開発環境のおすすめツール4選

目次

1. 開発環境について
2. 新たに追加したフォント
3. 1. HackGen
3. 新たに追加したツール
4. 1. bat
   2. tig
   3. exa
4. 参考文献

開発環境について

• macOS(会社の支給PCがMacBook Proのため)
• Homebrewをインストール済みでバージョンはv2.6.0以降

新たに追加したフォント

HackGen

HackGen is a composite font of Hack and GenJyuu-Gothic.
白源 (はくげん／HackGen) は、プログラミング向け英文フォント Hack と、源ノ角ゴシックの派生フォント源柔ゴシックを合成したプログラミングフォントです。

HackGenはGitHubリポジトリに記載がある通りプログラミング向けに作られたフォントで、

• 半角1:全角2の等幅フォントである
• プログラミング上エラーの原因となる全角スペースを可視化できる
• パイプ記号( | )の破断線化

などの特徴からプログラミングする上で見やすく設計されたフォントです。
元々はRicty Diminishedを使用していたのですが、ターミナルエミュレーターをAlacrittyに変えた際にiTerm2のようにサブフォントの設定ができず、AlacrittyでNerd Fontを使いたい場面で不都合があった為HackGenにNerd Fontが追加されたHackGenNerdに乗り換えました。

インストール手順

$ brew tap homebrew/cask-fonts
$ brew install font-hackgen-nerd

VSCodeでの設定方法

settings.json(VSCodeの設定ファイル)に設定を1行追加して保存するだけで設定が反映されます。

{
  "editor.fontFamily": "HackGen Console NFJ"
}

次のように表示されていればフォントの適用に成功です。※わかりやすいフォントを例に取って確認します

新たに追加したツール

bat

ターミナル上でファイルの閲覧をする際に使用されるcatコマンドにシンタックスハイライト、Git統合が盛り込まれたCUIツールがbatです。
余談ですがRustで開発されているようです。
実際にcatとbatで同じファイルを出力して比較した方がイメージしやすいと思うので例を見てみましょう。

• catで出力した場合

• batで出力した場合

全く同じファイルですがbatの方では、

• シンタックスハイライト
• ファイル名の表示
• 行数の表示
• git管理しているファイルの場合、変更行の表示(9行目の ~ が変更を表しています)

などファイルを閲覧しやすくする工夫がなされています。
例でお見せしたファイルは行数も少なくシンプルでしたが、コード量の多いファイルをサッと確認したい時などに便利なツールです。

batのGitHubリポジトリにオプションの説明も記載されています。
デフォルト設定のbatコマンドでも十分見やすいですが、ご自身の必要に応じて設定してみて下さい。

インストール手順

$ brew install bat

ターミナルでbatコマンドを使用してファイルを確認してみましょう。先程の「batで出力した場合」の例のような表示になっていればインストールは成功です。

$ bat /path/to/your/file

tig

tigはターミナル上でのGit操作を便利にしてくれるCUIツールです。公式ページでは「主にGitリポジトリブラウザーとして機能する」と記載されています。
tigを使用して行う操作は主に、

• Gitのコミットログの確認(log)
• Gitステータスとファイルの差分の確認(diff)
• 変更差分のステージング(add)
• ファイルの差分のコミット(commit)

などがあります。
これだけだと普段gitコマンドを使用するのと比べ良さが分かりにくいですが、gitコマンドに比べ視覚的に大変見やすくなっているのと、一度操作を覚えるとgitコマンドで毎回オプションを指定してGit操作する手間が省けたりして便利です。
※gitコマンドも設定ファイルにまとめる等便利に扱う為のやりようはあるので、一概にtigの方が優れているといった話ではありません

• コミットログの表示例
  ※ターミナルを使用しGitリポジトリで tig を実行

• Gitステータスと差分の表示例(左側にgit status、右側に選択したファイルの差分が表示されます)
  ※コミットログが表示された画面で s を入力するとステータスが表示され、カーソルでファイルを選択しEnterを押すと差分が表示される

• 変更差分のステージングとアンステージングの表示例
  ※gitステータスが表示された画面でステージング、アンステージングしたいファイルを選択し u を入力を指定しています

インストール手順

$ brew install tig

カスタマイズ

ホームディレクトリに.tigrcというファイルを用意することで、コマンドや表示のカスタマイズを行うことができます。
各設定内容についてはマニュアルに記載があるのでそちらを参考に好みの設定に変更してみて下さい。
一例として.tigrcの内容を載せておきます。

#==============================
# General
#==============================
set line-graphics = utf-8
set mouse = true
set vertical-split = yes
set ignore-case = true
set diff-options = -m --first-parent
set editor-line-number = yes
set diff-highlight = true

#==============================
# View
#==============================
set main-view = id date author:full commit-title:graph=yes,refs=yes
set stage-view = line-number:yes,interval=1 text
set diff-view = line-number:yes,interval=1 text
set log-view = line-number:yes,interval=1 text
set blob-view = line-number:yes,interval=1 text

#==============================
# Color
#==============================
color cursor 255 default underline
color status 255 default
color title-focus black green
color title-blur white default
color main-tracked 105 default bold
color diff-header black cyan

#==============================
# Key bindings
#==============================
bind generic g move-first-line
bind generic G move-last-line
bind main G move-last-line
# git関連
bind generic U ?git pull $(remote)
bind generic F ?git fetch %(remote)
bind main F ?git fetch %(remote)

exa

A modern replacement for ls

exaは公式サイトで「lsコマンドの代替」と表現されている通り、通常のlsコマンドにテキスト色や情報の表示の仕方などの工夫が加えられていて、ファイル・ディレクトリのリスト表示を格段に見やすくしてくれる便利なCUIツールです。
exaも先程紹介したbat同様Rustで開発されているようです。
こちらも通常のlsコマンドとexaで表示のち外を比較してみましょう。

• ls で表示した場合 ※オプションに-laを指定しています

• exaで表示した場合 ※オプション指定あり。カスタマイズで紹介します。

インストール手順

$ brew install exa

カスタマイズ

exaコマンドを直接実行してもいいのですが、exaをインストールした以上は通常のlsコマンドを使用するケースはほぼ無くなると思うので、lsコマンドをexaに置き換えて実行するように.zshrcでエイリアスの設定を行っています。
その際、便利そうだと思ったオプションも併せて指定してしまっています。オプションについてはexaのGitHubリポジトリに記載があるので、ご自身で必要だと思ったものを設定してみて下さい。

• 注意
• • 話の本筋からは逸れますがご紹介する設定サンプルでは l だけでリストを表示するようにエイリアスを設定しているので、好みにあわせて設定して下さい。
  • 今回は.zshrcにエイリアスの設定を記載していますが、みなさんがお使いのshellの設定ファイルに適宜置き換えて下さい。

# リスト表示のエイリアス設定例
alias l='exa --header --git --time-style=long-iso -agl'

また、exaを使ったツリー表示も重宝するので併せてご紹介します。
ツリー表示も.zshrcにエイリアスを設定しているので、ご自身の環境にあわせて設定して下さい。

# ツリー表示のエイリアス設定例
alias lt='exa --icons -T -L 2 -a'

ツリー表示はこのような感じになります。

さいごに

ここまで読んで下さりありがとうございます。
今回ご紹介したツールは世の中にある便利ツールの極一部に過ぎません。
必要に応じてツールをうまく活用しながら快適な開発ライフを！

参考文献

• HackGen: GitHub
• bat: GitHub
• tigホームページ
• tig: GitHub
• exa公式サイト
• exa: GitHub