12月 16, 2022

プログラマーの認知負荷 – Stitcher.io

(jp) =

プロのプログラマーとして、私は日常的にコードを読んだり書いたりしています。新しいプロジェクトに取り組んだり、コードレビューを行ったり、レガシーコードを操作したり、ドキュメントを読んだりしています。私自身や同僚の経験に基づくと、プログラマーになるには実際にコードを書くよりも多くのことを読む必要があります。

自分のコードであろうと他人のコードであろうと、ファイルを開くときはすべてを受け入れる必要があります。自分のコードを書く前に、何が起こっているのかを理解する必要があります。

ほぼ毎日コードを処理する必要があるため、このプロセスを簡単にする方法を見つけることが重要です。脳にかかる認知的負荷をできるだけ軽減しようとします。

コードを読みやすくすると、作業がより速く、より良くなり、精神状態と気分も改善されます。

認知心理学では、認知負荷とは、作業記憶で使用される精神的努力の総量を指します – ウィキペディア

今日は、コーディング中の認知的負荷を軽減するのに役立ついくつかのテクニックを紹介したいと思います。最近の「視覚的負債」の提唱者とは対照的に、コードベースの一部を取り除くことについては触れません。純粋に視覚的な側面、つまり、コードが読みづらく理由付けが難しい理由と、それを簡単にする方法について見ていきます。

# フォントと間隔

フォントは私たちの気分に影響を与えます。 Crew の人々は、フォントが私たちをどのように感じさせるかについて興味深い記事を書きました。選択するフォントは、画面上のテキストを処理するために脳にかかる負荷に大きな影響を与えます。ちなみにフォントだけではなく、サイズ、行の高さ、文字間隔も重要です。

タイポグラフィ自体は、本が書かれているトピックです。現在のフォントの選択と、それがコードの読み方にどのように影響するかについて考えてみることをお勧めします。

私の経験では、あまり良くないフォント構成とより良いフォント構成の比較を次に示します。

# 折りたたみ

CRUD アクションを提供するコントローラーを使用したことがありますか? いくつかのメソッドを持つクラス? デフォルトでメソッド本体を折りたたむと、ファイルを開くときにクラスの概要がより明確になります。スクロールして検索する代わりに、行きたい場所を簡単に決定できます。次の例を見てください。

IntelliJ のような IDE は、デフォルトでコードを折りたたむことができます。 Settings > Editor > General > Code Folding. デフォルトで有効にするのは少しためらいましたが、慣れれば素晴らしい機能であることは間違いありません。

また、多くの IDE やエディターが提供するファイル構造ナビゲーターよりも便利です。このアプローチにより、クラスの視覚的な構造、色、およびインデントを確認できます。

折り畳みに関連するキーバインドについても学びたいと思うでしょう。 IntelliJ を搭載した Mac では、これらがデフォルトです。 ⌘⇧+、 ⌘⇧-、 ⌘+ と ⌘-.

＃ドキュメンテーション

ドキュメントとコメントは、コードが実際に何をするかを明確にするための優れたツールです。さらに、一部の言語と IDE は、適切な静的分析を提供するためにコメントメタデータに依存しています。ただし、やり過ぎてはいけません。docblocks とコメントは、コードを読むことで既にわかっている明白なことを記述していることがよくあります。

数年間のプログラミングの後、コメントの約 80 ～ 90% が冗長であると断言できます。これらは視覚的な過負荷を解消するために削除する必要がありますが、代わりに何かを提供する必要もあります。

メソッド、変数、定数などの明確な命名。
適切な型の注釈と定義を使用する

自己文書化されたコードは、コメントに頼るよりも優れています。コメントを追加するときの私の経験則は、次の質問をすることです。答えが「いいえ」の場合、コメントはそこにあるべきではありません。

これらのコメントを削除すると、コードが解放され、視覚的な「息抜きのスペース」が得られます。

# 名前付け

覚えておくべきもう 1 つの重要な点は、名前の付け方です。変数には、より長くわかりやすい名前を付けたほうがよいでしょう。できるだけ短くするのではなく。

コードを書いている時点では、短く不可解な名前は理にかなっています。しかし、それらを書いてから数日経っても、それらはすでに曖昧で無意味になります。

過去に書いたことを理解するために、10 倍も読むよりも、もう少し多く書く方がよい.

私のプロジェクトからのいくつかの例を次に示します。

改名しました createPage() に createPaginatedPage().
$process なりました $pageRenderProcess.
testStitcher() 複数のメソッドに変更され、そのうちの 1 つが呼び出されました test_stitch_multiple_routes().

# 色

これは多くの人にとってデリケートなトピックかもしれません。少しの間、疑念の恩恵を私に与えていただきたいのですが。私たちは皆、暗くてクールな配色が好きですが、問題があります.

調査によると、人間の目は、明るい背景にある暗いテキストを読む方が、その逆よりも優れていることが示されています。パーソナルコンピューティングの人気が高まっていた 80 年代にさかのぼると、Etienne Grandjean という人物が、画面上でテキストを読むのに最適な方法について広範な研究を行いました。

ほとんどすべての人にとって、明るい配色がより良い選択であることが判明しました。

明るい配色は実際には目を痛めるのではないかと最初に考えるかもしれませんが、これは配色自体よりも画面の明るさに関係しています。

画面の明るさを下げないと、明るい配色が頭痛や目の痛みを引き起こす可能性があるのは事実です。一方、明るさを抑えた画面と明るい配色を組み合わせると、目への負担が少なくなり、長時間コードを読んでも疲れにくくなります。

もちろん、言いたいことは言えますが、私にできる最善のことは、1週間のトライアウトに挑戦することです. 私はこれまで多くのプログラマーに挑戦してきましたが、ほとんどのプログラマーは数日後には軽いテーマであることに確信を持っていました。

それはあなた次第です！最近の私のコードは次のようになります。