開発環境を変えることによってコードリーディングを快適にすることは可能でしょうか？

リモートワークが一般的になったことに伴って、国内外問わず他のソフトウェアエンジニアの自宅での開発環境をブログや動画を通じて目にする機会が増えました。その中でディスプレイを縦置きにしてコードリーディング用に使っているという方を時折見かけます。今回は縦型ディスプレイを実際に設置してみてコードリーディングにどういう影響や変化があるのか検証してみます。

縦型ディスプレイの設置

通常時はノートパソコンに27インチの4Kディスプレイを外部モニターとして接続しています。今回の検証のために外部モニターを縦置きにしてみました。固定のためにアームを使っています。

座っている位置から前方60cmのところに縦型の27インチディスプレイがあると、写真で見る以上に存在感があります。このように真正面に縦型ディスプレイを置いている方はほとんど見かけませんが、今回はコードリーディングのための縦型ディスプレイの効果を検証するために、このスタイルで進めていきます。

コードを表示したときの画面比較

通常時（横型）のときにテキストエディタを全画面表示にしてコードを表示すると以下のようになっています。

フォントサイズ12の設定で55行のコードが表示できています。縦型ディスプレイにしたときは以下のようになりました。

同じくフォントサイズ12の設定で102行のコードが表示できました。読みやすいフォントサイズで倍近い行数が一度に見えているという状態は非常にインパクトがあり、想像していたよりも見やすく読みやすいという印象を受けました。

コードリーディングのための縦型ディスプレイのメリット

実際に縦型ディスプレイを設置してコードリーディングを行ってみた感想になりますが、やはり コードの一覧性が良い ことが最大のメリットだと言えます。数十行程度なら読もうとしている部分（関数定義など）がすべて見えているので、処理の流れを読み進めていく上での見通しが立てやすいです。また、1行ずつ読み進めていってわからない部分に行き当たったとしても、その先の処理をスクロールなしで確認できるため、手早くヒントを得ることができました。結果的に完全に行き詰まってしまう状態に陥りにくいので、これも一覧性が良いことのメリットだと感じました。

どこまでコメントが続くのか、どこまで関数定義が続くのかという不安感が大きく削減されるという精神面への良い効果もあるように思います。逆に言えば、今まで当たり前だと思っていた横型ディスプレイの表示には、何か窮屈なものを感じていたのかもしれません。

検証していて気がついたのですが、 縦型ディスプレイにしたときの中央寄りのコード表示位置と左右余白のバランスの良さも好印象に寄与している ようです。さきほどの画面キャプチャではVisual Studio Codeを使い、サイドバーを表示しミニマップを非表示にしています。サイドバーを非表示にすると、コードの表示位置が中央寄りの配置から左寄せになってしまい、途端に読みにくさや不快感が生まれました。またミニマップを表示したときは、さほど広くもなかった右余白が圧迫されたせいで画面全体が煩雑に感じるようになりました。Webサイトのデザインと同様に、コードリーディングのためのコード表示においても表示位置と余白が重要であることがわかりました。

ここまでの検証もあくまで主観評価なのですが、さらに個人的な感想を挙げておきます。

（一時的かもしれないが）非日常感があって気分が高揚しコードリーディングも捗りそうな気持ちになる
コードのフォールディング（折りたたみ）が気持ちいい
やや大げさに言えば、紙に印刷してコードまたは文章を読むような感覚に近づく

最後の感想は、縦型ディスプレイを自分の真正面に置くという今回の検証の特殊な環境のせいかもしれません。しかし、これもたまにやってもいいかなと思うくらいには快適だと感じた要因でした。

コードリーディングのための縦型ディスプレイのデメリット

思った以上に好印象だった縦型ディスプレイですが、 左右方向の幅が狭いという制約 から、前述の通りミニマップなどを追加しただけで急に印象が変わってしまいます。普段テキストエディタで左右にペインを並べてコードを表示している方には、縦型ディスプレイは全くおすすめできません。それぞれのペインでの表示領域が狭すぎます。

またターミナルアプリからVimを使ってコードを表示させると、確かに縦長の画面のメリットを活かして行数は多く表示できますが、かんたんに中央寄りの配置と左右余白のバランスを調整することができないため、快適とは言えませんでした。Vimに限らず、テキストエディタ側で左右の余白を確保しつつ中央寄りの配置にする、全画面表示で使わない場合はテキストエディタと背景のコントラストを極力小さくするなどの工夫が必要となります。

なぜ縦型ディスプレイを使うエンジニアがいるのか？

縦型ディスプレイを使うことでコードリーディング環境を改善できることはわかりました。しかし、そもそもコードリーディング専用のディスプレイを導入する手間やコスト、設置スペースなどの課題もあります。では、 なぜこうした課題を乗り越えてでも縦型ディスプレイを使うエンジニアがいるのでしょうか？

もちろん縦型ディスプレイを開発環境として導入するための経済的・空間的余裕があるという条件が大前提としてあるでしょう。しかし、それだけではないと思います。コードの一覧性の良さやコードリーディング時の快適性というメリットを優先させることの裏には、 コーディングとコードリーディングは別物の作業であると認識・理解しており、コードリーディングに集中するために煩雑さを排除したい という思いがあるのではないでしょうか？

別の言い方をすれば、 あえて専用の環境を取り入れても良いと思うほどコードリーディングへの優先度が高い のでしょう。こうしたエンジニアは、概してコードリーディングに費やす時間がもともと長く、それだけにコードリーディングをもっと快適にしたいという欲求が浮かびやすかったのかもしれません。長時間もしくは高頻度でコードリーディングに取り組んでいるからこそ、縦型ディスプレイというコードリーディング環境の改善が効果的であることに確信があり、ためらわずに縦型ディスプレイを導入したのでしょう。

一方で大多数のエンジニアは縦型ディスプレイを使っていません。実は、コードリーディング環境の改善というアイデアに気が付かず、コードリーディングへの不快感を抱きながらも現在の開発環境で我慢しているのではないでしょうか？

横型ディスプレイで縦型ディスプレイのメリットを再現できないか？

コードリーディング環境を改善したいと思っても、誰しもが縦型ディスプレイを導入できるわけではありません。コードリーディングのためにディスプレイやアームを追加で購入することにはためらいがありますし、在宅での開発環境なら設置するスペースがないという事情もあります。

横型ディスプレイを使いつつ、縦型ディスプレイのメリットを再現してコードリーディング環境を改善する方法はあります。まずは多くのテキストエディタに搭載されている ペイン機能を使いこなす ということです。横型ディスプレイは縦方向に表示できる行数こそ少ないですが、横方向には十分な余白があり、ペインによってこの左右にあるスペースにコードを表示するようにしましょう。

例えばVisual Studio Codeの場合、メニューのView - Editor LayoutにSplit Right（現在のファイルと同じものを右側にペインを追加して表示する）やThree Columns（左右方向に3つのペインを配置する）といったペイン機能が用意されています。同じところにあるSingleというメニューを選択すれば、かんたんにもとの1ペインに戻すことができますので、ぜひ試してみてください。

このペイン機能を活用するために、縦型ディスプレイの検証でも触れたように 読もうとしているコードを画面中央に配置しペイン間の余白も十分に確保する ことに注意して調整することも大切です。あまり画面内に詰め込みすぎると、一覧性は上がっても煩雑でノイジーな印象が増えてしまうため、かえって不快感が増してしまいます。

手前味噌ながら、個人開発として取り組んでいる Read it easy というコードリーディング専用アプリでもペイン機能を使いやすくして、画面中央でコードを読みやすく配置することでコードリーディング環境を改善しています。

ペイン機能はテキストエディタに搭載されている基本的な機能ですので、この機会にコードリーディング環境の改善という観点で使ってみてはいかがでしょうか？

おわりに

コードリーディング環境を縦型ディスプレイで改善できるのかという視点で実際に縦型ディスプレイを設置してみて検証してきました。コードの一覧性の良さだけでなく、中央寄りの配置や余白とのバランスの良さなどからコードリーディングへの快適性も向上することがわかりました。

横型ディスプレイでもテキストエディタのペイン機能をうまく活用することでコードリーディング環境を改善することができます。現在の開発環境を少し見直してみて、コードリーディングへ快適に取り組めるように工夫してみましょう。