フロントエンド入門者へおすすめ動画&書籍おすすめ!

コラム バックエンドエンジニア フリーランスエンジニア フロントエンドエンジニア プログラミング

エンジニアが教えるコードリーディングのコツ (他人のコードを読む方法)

0
0

私はこのブログで、二回に渡って他人が書いたコードの読み方シリーズを展開してきました。

 

それが、下記の二つです。

 

 

私は思うのですが、つくづくプログラミングは書くよりも読むことの方が難しいです。

 

そう、コードリーディングこそエンジニアのスキルの見せ所なのです。

 

上記の二つの記事で私が伝えたかったことは、最初の記事では、

 

コードを読むときはまずはブラウザから動作確認をして、動作確認できたUIからコントローラーへ、

 

そしてモデルへと深く掘っていくようにコードを読んでいくこと、

 

そして、二つ目の記事では、ソフトウェアのフレームワークに従って、鳥の目でライフサイクルを追っていくこと。

 

まあ、詳しくは二つの記事を読んでもらいたいのですが、

 

今回の記事では、上記の二つの記事でカバー出来てなかった部分を扱います。

 

注意点としては、今回の主にウェブプログラミングの話ですっていうことと、

 

前回の記事と若干かぶるところがありますというところになります。

 

目次としては、下記のツイートを深ぼる感じでいきますね。

 

 

Chrome DevToolsの機能を全て暗記

 

まずChrome DevToolsに関してです。

 

Chrome DevToolsは、ウェブアプリのパフォーマンスを見たり、

 

HTMLやCSSのエレメントを見ることができたり、それらのファイルを見れたり、

 

JavaScriptのコンソールでログが確認できたり、

 

その他にも、ウェブアプリのAPI通信などネットワーク情報を見れたり、

 

まだまだありまして、ウェブアプリのパフォーマンスや、Reactとかでフロントエンド開発をやってる人は、

 

Reactのコンポーネントを可視化できたり、もう兎に角やれることが盛り沢山です。

 

それで、これらを有効活用できると、まずコードのデバックがめちゃくちゃ楽になります。

 

Reactとかでは無数のコンポーネントを改修していかなければならないので、どこのコンポーネントがレンダリングされてるのかとか探すのが面倒臭いし、

 

一体全体、どういう全体像をこのアプリが持ってるのか一瞬でDevToolsで見ることができます。

 

また、APIの通信では、何が帰ってきてるのか、どこにAPIを叩いているのか、ちゃんと値が叩かれて正しい値が返ってきてるのか?

 

確認できたりして便利です。

 

これらDevToolsを使いこなせてないと、確実にコードの改修で詰まります。

 

特に大きなコードの改修では、ブラウザで要素確認して、エディタでコード直すだけじゃ不十分になるでしょう。

 

必ず、これは抑えてきたいです。

 

VSCodeを超ハック

 

VSCodeは、フロントエンジニアには御用達だと思います。

 

Railsとか使ってる人はRuby Mineですかね、今はどうだか知りませんが、

 

僕が言いたいのは、テキストエディタをデフォルトモードで使ってるのは多分勿体ないです。

 

僕のような凡人は、十分にエディタが提供するデバックツールや、ログ情報とか、コードジャンプしたり、ブレイクポイント仕込んだり、

 

色々と有効活用していかないと、更地のままデフォルトでコード改修してたら仕事が遅くなったりしそうだし、

 

詰まらないところで詰まってしまうこともある。

 

今のエディタはデバックのサポートが本当に凄まじく便利なので、使いこなせるまで努力しましょう。

 

プログラミング言語、動くで終わらせず細かい仕様を完全理解

 

コードリーディングをうまくなっていくためには、コードを一言一句完全理解する丁寧さが必要です。

 

僕のような面倒くさがり屋は、仕事で忙しかったり、次のタスクが詰まってたりすると、ついつい面倒くさがってしまって、

 

とりあえず動いたから、一旦ここは後回しにして自分の仕事のタスク終わらせなきゃという感じになってしまいます。

 

でも、そうやって後回しにしたコードの技術的な部分は、絶対に忘れ去られる確率が大きいです。

 

プログラミング言語の小さな動きも、いちいち完全理解して次に進みましょう。

 

フレームワークのライフサイクルに徹底的に従う

 

他人のコードを読むにあたって、フレームワークのライフサイクルが大切ですとという話は、前の記事でも書いたわけですが、

 

大事なのでもう一回先ほどのツイートでは書きました。

 

とにかく、昨今のウェブやモバイルのソフトウェアは、何かしらのフレームワークに乗っているはずです。

 

それで、そういうフレームワークのライフサイクルは、非同期的だったりします。

 

だから、上から読んでもコードを追えなかったりします、そういう時に、フレームワークのルールを知らないと、

 

なんで、この変数って勝手に動いたんだ?みたいなことになりかねない。

 

まずデータの流れはどこから始まって、どこを監視していて、どこの変更を採用されるのかみたいな、

 

ルールをきちんと頭に入れていると、なんでこのデータはこう動いたのかというのがデバックできるようになります。

 

CSSとデザインの勉強を怠らない

 

最後です。

 

ウェブのエンジニアは、結構CSSとかデザインを疎かにする人が多いですよね。

 

Qiitaとかでデザインとかの投稿をしてるフロントエンドの人は尊敬します。

 

でもしかし、現場で色々と細かい仕事をしてたら、CSSとか、HTMLの詳しい部分を知ってるが故に、

 

コードをより鮮明に読むことができたり、細かい部分のデザインの修正も対応できたりします。

 

結局、ReactとかRailsを書いてても、ブラウザに表示されてるHTMLから、JSとかに繋がっていくじゃないですか。

 

だから、HTMLやCSSが読めないと、どこをどう直せばフロントが思い通りに動くのか分からなかったりします。

 

特に、Railsとかで古いJQueryとか書いてたら、CSSも読めないと操作できないしコード読めなかったりして、

 

改修できないこともあるかもしれません。

 

こんな感じで、CSSとHTMLに関して深く知ることは大事なのです。

 

終わりに

 

また、余談ですが、バックエンドはAIがすぐ優秀になるけれども、人が心地よく感じる些細なUIUXって、

 

まだまだ人間が付加価値出せる部分かなとも思うんで、僕はフロントの価値は今後、ずっと上がると思っています。

 

以上です。

Pocket
LinkedIn にシェア

りょすけ
毎月3万人以上のプログラマーが訪れるoff.tokyoで、プログラマーさん向けのアンケートを実施しています、アンケートに無料回答すると、他の人の投票も見ることが出来ます!

学びたいプログラミング言語は何ですか?

エンジニアにおすすめできる本

Card image cap
リーダブルコード

より良いコードを書くためのシンプルで実践的なテクニック

Card image cap
Webを支える技術

HTTP,URI,HTML,そしてREST

Card image cap
誰でもPythonで作れる

儲かるAIとソフトウェアの作り方

Card image cap
プログラマが知るべき97のこと

現場で使える実践哲学のマスターピース

Card image cap
情熱プログラマー

時代を超えて。ソフトウェア開発者の幸せな生き方

Card image cap
アジャイルサムライ

プログラミング達人開発者への道

Card image cap
Rubyを作った男 まつもとゆきひろ

コードの世界 スーパー・プログラマになる14の思考法

フロントエンド入門者へおすすめ動画&書籍おすすめ!

 vaaaval@gmail.com



  • この記事を書いた人
  • 最新記事

藤沢瞭介(Ryosuke Hujisawa)

りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています!

-コラム, バックエンドエンジニア, フリーランスエンジニア, フロントエンドエンジニア, プログラミング

Copyright© off.tokyo , 2021 All Rights Reserved Powered by AFFINGER5.