この記事は2024team411アドベントカレンダーの2日目です。
team411のアドベントカレンダーはこちらをご覧ください。
昨日はぬか喜びの庭さんの「VRCのワールドを作ってみよう」でした。VRCのワールドは作ろうとして挫折した記憶があるのでまた頑張ってみたいです。ただ、U#の情報が少ないのは不安ですね (笑)。
はじめに
皆さんは開発環境の見た目にこだわりはありますでしょうか？ プログラミングを始めたばかりだったりすると、「とりあえずおすすめされた環境で開発する」というような状況で、なかなか見た目にこだわるというところまで行かない方も多いのではないでしょうか。
この記事では、そんな方に向けて、開発環境の中で見た目をこだわれる部分を一覧的に紹介します。「〇〇10選」や「おすすめの〇〇」みたいな話は別の記事を参照してください。
また、新しい技術だの、便利な開発手法だのといった話ではありません。
この記事で紹介すること
- カラーテーマ
- フォント
- VS Codeの拡張機能
- シェルのカスタマイズ
この記事で紹介しないこと
- VS Code以外の開発環境
- GitHub CopilotやDevContainerなどの開発支援ツール
- キーボードなどのハードウェア
カラーテーマを選ぶ
メインのテーマ
まずはカラーテーマの選定です。基本的にはVS Codeのテーマを中心に決めていくのがいいでしょう。
以下のサイトがおすすめです。
ここでのコツは、ファンが多いテーマを選ぶことです。もちろん、自分の好きなものであることが最優先ですが、ファンが多いテーマであれば、他のツールでも同じテーマを利用でき統一感が出ます。インストール前にGoogleでテーマ名を検索して、どの程度他のツールに対応しているかを確認するといいでしょう。
例えば、私が愛用しているCatppuccinはコミュニティにより各種ツールのテーマが提供されています。
VS Code拡張をインストールできたら、左下の設定項目から「配色テーマ」をクリックし、テーマを選択します。
アイコンテーマ
同様に、VS Codeのアイコンテーマも選びます。アイコンテーマを設定すると、VS Code上のファイルやディレクトリの表示が格段に見やすくなるため、おすすめです。
メインのテーマと同じ系統のアイコンが存在すればそれを選ぶのが良いです。ない場合はVS Codeの拡張機能の検索にtag:icon-theme <検索ワード>と入力すると、アイコンテーマが検索できます。
おすすめはvscode-iconsです。人口の多いイメージがあります。
ちなみに私はCatppuccin Icons for VSCodeを利用しています。
フォントを選ぶ
VS Codeは標準フォントでも問題なく使えますが、この後行うシェルのカスタマイズではNerd Fontsに対応したフォントが必要です。そのため、Nerd Fontsに対応したフォントをインストールしておきましょう。
Nerd Fontsとは、通常のフォントに加えて、さまざまなアイコンや記号を追加したフォントです。
上記サイトでは欧文フォントのみ紹介されていますが、日本語フォントも存在します。
以下のあたりがおすすめですが、他にもあるので好みのものを探してみてください。
VS Codeにフォントを適用するにはテーマと同様設定が必要なので、忘れずに設定しておきましょう。
VS Codeの拡張機能
通常、VS Codeの拡張機能は開発支援をするものが多いですが、ここでは開発支援どころか逆に見た目がゆえに開発効率を下げるようなものを紹介します。
vscode-pets
VS Codeの左下にペットを表示する拡張機能です。色々な動物が追加できたり、ボール遊びができたりします。かわいいですね。
Power Mode
文字を入力すると画面が振動し、エフェクトが表示されます。また、画面上にコンボ数も表示されます。かっこいいですね。
使用するには、Ctrl(Cmd)+Shift+Pでコマンドパレットを開き、Enable Power Modeと入力後、Enterキーで有効化する必要があります。
シェルのカスタマイズ
プログラミングに関わる皆さんなら、きっとシェルやターミナルをさまざまな用途で使用しているかと思います。もしまだ殺風景なターミナルやシェルを使用しているなら、これを機にカスタマイズしてみましょう。
PowerShell
PowerShellのカスタマイズには、Oh My Poshがおすすめです。インストールしてテーマを選択しましょう。テーマはVS Codeのテーマに合わせるといいでしょう。
中にはWindowsにもzshを入れるような変態な人もいるようなので、物好きは調べてみてもいいかもですね。推奨はしません。
zsh
zshのカスタマイズにおすすめなのが、Oh My Zshです。これをインストールしてテーマを選択することで、プロンプトの見た目を変更できます。その上で、ターミナルの色設定を先に設定したVS Codeのテーマに合わせることで幸せになれます。
また、zshにはさまざまなプラグインや便利な外部ツールもあるので、調べてみてください (自動補完とかlsdとか)。
bash
bashを使っている人はzshに乗り換えましょう。bashが使える環境ならおそらくzshも使えるはずです。zshの方が利便性やカスタマイズ性が圧倒的に高いです。
その他のシェル
それ以外のシェルを使っているような人はこの記事の対象じゃないと思うので自分で調べてください。
ターミナルのカスタマイズ
多くの標準ターミナルはカスタマイズの幅が狭いため、別のターミナルエミュレータを使うのもおすすめです。どんなターミナルエミュレータがいいかという話は趣旨から外れる上、宗教戦争になるのでここでの言及は避けます。
見た目だけで言えば、自分で選んだメインのテーマが対応しているものがいいと思います。
私はWezTermを使っています。
Vimのカスタマイズ
多分、多くの人はターミナル上でテキストファイルを扱うときにはVimを使っているはずです。(そうでない人はお帰りください。) ここはもう詳しい人に任せたいのですが、Vimにもテーマが設定できるので、こちらもVS Codeのテーマに合わせるといいでしょう。
まとめ
とにかく、例を挙げればキリがないのですが (LaTeXとか)、自分の選んだテーマを中心に、開発環境を自分色に染めてみると楽しいですよ。開発環境をカスタマイズすることで、自分の作業効率が上がるかどうかはわかりませんが、少なくとも楽しく作業できることは間違いありません。
最後に、私の環境を紹介して終わりにします。ここまで読んでいただきありがとうございました。
環境紹介
| 項目 | MacBook | Windows | WSL (Ubuntu) | Endeavouros + KDE |
|---|---|---|---|---|
| OS | macOS Sequoia | Windows 11 Home | ||
| シェル | zsh | PowerShell | zsh | zsh |
| ターミナル | WezTerm | WezTerm | Windowsと共通 | WezTerm |
| ブラウザ | Vivaldi | Vivaldi | なし | Google Chrome |
| プロンプト | Oh My Zsh | Oh My Posh | Oh My Zsh | Oh My Zsh |
| VS Codeのテーマ | Catppuccin Mocha | Catppuccin Mocha | Windowsと共通 | Catppuccin Mocha |
| アイコンテーマ | Catppuccin Mocha | Catppuccin Mocha | Windowsと共通 | Catppuccin Mocha |
| VS Codeのフォント | HackGen35 Console | HackGen35 Console | Windowsと共通 | HackGen35 Console |
| OSのテーマ | Catppuccinコミュニティで愛用されている謎壁紙 | catppuccin-wallpapers | なし | Catppuccin Frappe Mauve |
| プロンプトテーマ | ys | Catppuccin | ys | ys |
| ブラウザのライトテーマ | Catppuccin Latte Lavender | Catppuccin Latte Lavender | なし | |
| ブラウザのダークテーマ | Catppuccin Frappe Lavender | Catppuccin Frappe Lavender | なし | |
| Stylus | Catppuccin | Catppuccin | なし | Catppuccin |
| マウスカーソル | 標準 | Catppuccin Mocha Mauve | なし | Catppuccin Frappe Mauve |
明日はあくあさんのVercelとOpenCVの記事です。どんなインテグレーションがあるのか非常に気になるところです。
Discussion