本記事は<a href="https://qiita.com/advent-calendar/2023/aldagram" target="_blank" rel="nofollow noopener noreferrer">株式会社アルダグラム Advent Calendar 2023</a> 14日目の記事です。
こんにちは！<a href="https://aldagram.com/" target="_blank" rel="nofollow noopener noreferrer">アルダグラム</a>の<a href="https://lp.kanna4u.com/" target="_blank" rel="nofollow noopener noreferrer">KANNA</a>の開発お手伝いをさせて頂いている@sho_uです。
iTerm2はMacのターミナルアプリです。
iTerm2はカスタマイズ性が高く、Mac標準のターミナルやIDE内蔵のターミナルよりも自分好みにカスタムすることができます。
WEB開発においてターミナルはコードエディタに次いで頻繁に使用するツールかと思います。
大きく作業効率が上がるとは言いませんが、頻繁に使用するため細かな使い勝手が向上することで開発のモチベーションは下がりづらくなり、作業効率も向上します。
そこで、今回は私が実際に開発で使用しているiTerm2の設定やよく使う機能をご紹介させていただきます。
<h1 id="%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E8%A8%AD%E5%AE%9A">
<a class="header-anchor-link" href="#%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> アプリの設定</h1>
iTerm2には多くのカスタマイズ項目がありますが、私が主に設定しているカスタマイズは下記の通りです。
<h3 id="%E3%83%9B%E3%83%83%E3%83%88%E3%82%AD%E3%83%BC">
<a class="header-anchor-link" href="#%E3%83%9B%E3%83%83%E3%83%88%E3%82%AD%E3%83%BC" aria-hidden="true"></a> ホットキー</h3>
iTerm2のウィンドウを表示・非表示にできるショートカットキーを設定する機能です。
使用時にすぐに表示でき、使用していない時には非表示にできるため、邪魔にもならずとても便利になります。デスクトップ画面の節約になるため、ディスプレイ数が少ないほどありがたみを感じます。
設定方法は下画像箇所で私は <code>^Control + i</code> で設定しています。お好みで
<img src="https://storage.googleapis.com/zenn-user-upload/33040a835582-20231213.png" loading="lazy" class="md-img">
<h3 id="%E4%BB%BB%E6%84%8F%E3%81%AE%E3%83%87%E3%82%B9%E3%82%AF%E3%83%88%E3%83%83%E3%83%97%E4%B8%8A%E3%81%AB%E3%83%95%E3%83%AB%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%81%A7%E9%87%8D%E3%81%AD%E3%81%A6%E8%A1%A8%E7%A4%BA">
<a class="header-anchor-link" href="#%E4%BB%BB%E6%84%8F%E3%81%AE%E3%83%87%E3%82%B9%E3%82%AF%E3%83%88%E3%83%83%E3%83%97%E4%B8%8A%E3%81%AB%E3%83%95%E3%83%AB%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%81%A7%E9%87%8D%E3%81%AD%E3%81%A6%E8%A1%A8%E7%A4%BA" aria-hidden="true"></a> 任意のデスクトップ上にフルスクリーンで重ねて表示</h3>
デフォルトの設定ではMac標準のターミナルアプリのようにターミナルのウィンドウが表示されます。もっと使いやすいように任意(カーソルがあるスクリーン)のデスクトップ上にフルスクリーンで重ねて表示する設定です。フルスクリーン以外にも画面上部の3分の1ほどに表示する等の設定もありますが、フルスクリーンの方がログなど確認しやすいため私はフルスクリーンで設定しています。
設定方法は下記２箇所です。まずはフルスクリーンの表示方法を変更します。
<img src="https://storage.googleapis.com/zenn-user-upload/7d865500d41d-20231213.png" loading="lazy" class="md-img">
このチェックがあるとフルスクリーン時、単独のデスクトップが立ち上がるため外します。
次にデスクトップ上にフルスクリーンで重ねる設定をします。
<img src="https://storage.googleapis.com/zenn-user-upload/5ece736b8f26-20231213.png" loading="lazy" class="md-img">
設定後サンプル(背景透過も設定済み)
<img src="https://storage.googleapis.com/zenn-user-upload/a4b5de7ae663-20231213.png" loading="lazy" class="md-img">
<h3 id="%E8%83%8C%E6%99%AF%E3%82%92%E9%80%8F%E9%81%8E%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#%E8%83%8C%E6%99%AF%E3%82%92%E9%80%8F%E9%81%8E%E3%81%99%E3%82%8B" aria-hidden="true"></a> 背景を透過する</h3>
この設定をすると上記の設定でデスクトップ上に重ねる設定をしたので、背景を透過させることで検索した情報やエディタのコードをターミナル画面越しに見ながら使用したりできます。主にデバック作業などが少し便利になる程度ですが、私は一色の画面が好きではないので気に入っている機能です。
設定方法は上記と同じ設定画面で下記の通りです。私は20前後で設定しています。
<img src="https://storage.googleapis.com/zenn-user-upload/b8bb4381535f-20231213.png" loading="lazy" class="md-img">
<h3 id="%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%82%B5%E3%82%A4%E3%82%BA%E8%AA%BF%E6%95%B4">
<a class="header-anchor-link" href="#%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%82%B5%E3%82%A4%E3%82%BA%E8%AA%BF%E6%95%B4" aria-hidden="true"></a> フォントサイズ調整</h3>
iTerm2のデフォルトのフォントサイズは12と小さくかなり見にくいです。なので好みのサイズまで調整します。私は15ぐらいがちょうど良かったです。
<img src="https://storage.googleapis.com/zenn-user-upload/91ffbb36483f-20231213.png" loading="lazy" class="md-img">
これだけです。同じ機能を備えた他のターミナルアプリも当然あるかと思いますが、iTerm2は導入が簡単で使用している人が多く、情報量が多いので困った時など自己解決するのが容易というメリットがあります。
<h1 id="%E3%82%88%E3%81%8F%E4%BD%BF%E3%81%86%E6%A9%9F%E8%83%BD">
<a class="header-anchor-link" href="#%E3%82%88%E3%81%8F%E4%BD%BF%E3%81%86%E6%A9%9F%E8%83%BD" aria-hidden="true"></a> よく使う機能</h1>
iTerm2の機能だけではありませんが、ターミナル操作で私がよく使うのはおおむね下記のような機能です。
<ul>
<li>
ホットキーで表示・非表示
上記で設定したショートカットキー
私の場合は <code>^Control + i</code>
</li>
<li>
タブ機能
<code>cmd + t</code> タブ追加
<code>cmd + w</code> タブ削除
<code>cmd + ← or →</code> タブ移動
</li>
<li>
文字列検索
通常の文字列検索の他に正規表現でも検索できる
正規表現検索は <code>Case-Sensitive Regex</code> に変更する
<code>cmd + f</code>
</li>
<li>
URLやパスを開く
ターミナル上のURLやパスを直接開けるため、URLをログに出力する場合がある環境などでは一手間省けます。
<code>cmd + 表示されているURLをクリック</code>
</li>
<li>
現在のタブをカレントディレクトリ含め保存→開く
再起動した際などもう一度作業ターミナルを起動する時に便利です。
<code>メニューバーのWindows &gt; Save Window Arrangement</code> 保存
<code>メニューバーのWindows &gt; Restore Window Arrangement</code> 開く
</li>
<li>
カーソル移動と編集
これはLinuxのショートカットキーなのでMacならエディタやブラウザでも使えて便利です。
日本語キーボードの場合 <code>caps lock</code> を <code>^Control</code> にすると指の位置的に使い易くなります。
<code>^Control + f</code> 右に１文字移動
<code>^Control + b</code> 左に１文字移動
<code>^Control + a</code> 先頭に移動
<code>^Control + e</code> 末尾に移動
<code>^Control + d</code> カーソル上文字を１文字削除
<code>^Control + h</code> カーソル上の左の文字を１文字削除(backキーと同じ動き)
<code>^Control + k</code> カーソル上の文字および右側の文字を全て削除
</li>
</ul>
<h1 id="%E7%B4%B0%E3%81%8B%E3%81%AA%E6%B3%A8%E6%84%8F%E7%82%B9%E3%81%AA%E3%81%A9">
<a class="header-anchor-link" href="#%E7%B4%B0%E3%81%8B%E3%81%AA%E6%B3%A8%E6%84%8F%E7%82%B9%E3%81%AA%E3%81%A9" aria-hidden="true"></a> 細かな注意点など</h1>
<h3 id="%E3%83%86%E3%83%BC%E3%83%9E%E3%81%AE%E8%A8%AD%E5%AE%9A">
<a class="header-anchor-link" href="#%E3%83%86%E3%83%BC%E3%83%9E%E3%81%AE%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> テーマの設定</h3>
デフォルトのテーマでも特に困らないのですが、よくお勧めされているテーマを２点紹介しておきます。下記で取得したファイルを <code>Profiles &gt; Colors &gt; Colors Paresets… &gt; import…</code> からインポートすると設定できます。
Iceberg
<div class="code-block-container"><pre class="language-bash"><code class="language-bash">curl -O https://raw.githubusercontent.com/Arc0re/Iceberg-iTerm2/master/iceberg.itermcolors
</code></pre></div>サンプル
<img src="https://storage.googleapis.com/zenn-user-upload/d5501e97d618-20231213.png" loading="lazy" class="md-img">
Japanesque
<div class="code-block-container"><pre class="language-bash"><code class="language-bash">curl -O https://raw.githubusercontent.com/aereal/dotfiles/master/colors/Japanesque/Japanesque.itermcolors
</code></pre></div>サンプル
<img src="https://storage.googleapis.com/zenn-user-upload/d7299a07daf6-20231213.png" loading="lazy" class="md-img">
<h3 id="%E3%82%B7%E3%82%A7%E3%83%AB%E3%81%AE%E8%A8%AD%E5%AE%9A">
<a class="header-anchor-link" href="#%E3%82%B7%E3%82%A7%E3%83%AB%E3%81%AE%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> シェルの設定</h3>
デフォルトの設定ではログインシェルを読み込むので別のシェルを使用している場合、設定を変更する必要があります。ただ、ログインシェルの方を変えたほうがいいかと思います。
設定場所 <code>Profiles &gt; General &gt; Command</code>
<h3 id="%E4%BF%9D%E5%AD%98%E8%A1%8C%E6%95%B0">
<a class="header-anchor-link" href="#%E4%BF%9D%E5%AD%98%E8%A1%8C%E6%95%B0" aria-hidden="true"></a> 保存行数</h3>
デフォルトの設定では保存行数は1000行となっているため、それ以上の行数のログを確認したい場合などは設定を変更する必要があります。
設定場所 <code>Profiles &gt; Terminal &gt; Scrollback lines</code>
<h1 id="%E7%B5%82%E3%82%8F%E3%82%8A%E3%81%AB">
<a class="header-anchor-link" href="#%E7%B5%82%E3%82%8F%E3%82%8A%E3%81%AB" aria-hidden="true"></a> 終わりに</h1>
Mac標準ターミナルに似た作りなため、iTerm2に変えたことで困ったりできなくなったりすることはほとんどないかと思います。開発環境の好みは人それぞれあるかと思いますが、標準ターミナルやIDE内蔵のターミナルを使用しているという方は一度試してみるのをお勧めします。
ITerm2のインストールはこちらから 
<a href="https://iterm2.com/" target="_blank" rel="nofollow noopener noreferrer">iTerm2 - macOS Terminal Replacement</a>
もっとアルダグラムエンジニア組織を知りたい人、ぜひ下記の情報をチェックしてみてください！

開発が少しやり易くなるiTerm2の設定と使い方

任意のデスクトップ上にフルスクリーンで重ねて表示

Discussion