このノートはkkゼミ、アドベントカレンダー2018の20日目として書かれたものです。

現代のフロントエンド業界は疑問に思ったこと、ちょっと理解が追いつかないことなどは、Google先生に聞けば大抵解決できると思います。
これはフロントエンドの業界だけではなく他の分野でも言える事なのではないでしょうか。

しかし今回話すEChartsというライブラリは話が違いました。
検索するとたくさんの記事がヒットしましたが、よくよく中身を見てみると。。

ほとんどの記事が日本語以外で書かれていました。。。

「日常英語なら読める」程度の私の力では技術面の記事を理解する力はありませんでした。また、英語ならなんとかなりそうですが中国語で書いてある記事も多く、結果的にGoogle先生からは何も教えていただけないという状況になってしまいました。
もちろん日本語で書かれている記事もありましたが、業務レベルで扱う場合参考になる記事はありませんでした。

じゃあどうしたの？

結果から言うと、Echartsのコードを2,3週間かけて読みながら実際に動かしてみました。
毎日コードを書いている現場の方々からすると、非効率的発想なのかもしれませんが当時の私はこれがフロントエンドエンジニア としての初業務だったので前知識も経験もないのでこの方法で行く発想しかありませんでした。

大型コードを理解するために。

私が意識した点はこちらです。

・大元となっている場所を見極める
・浮気せずに知りたいデータが処理されている場所まで探しに行く。
・多少コードを書き換えてみる。
・実際に動かしてみる。

・大元となっている場所を見極める
コードを読む上でまずやるべき事だと私は考えています。
Echartsはとても綺麗なコードだったので分かり易かったですが全てのコードがこれらの品質で書かれているわけではありませんので、大元になっている場所を探すと言うコードはかなり大切です。

・浮気せずに知りたいデータが処理されている場所まで探しに行く
これをせずに一気に全てのデータを追いかけると迷子状態になり無駄な時間を費やすことになります。

・多少コードを書き換えてみる
個人的にかなり重要なことだと考えています。
コードを書き換えてみることで、
「なぜこれが動かないのか？」「どうすれば解決できるのか？」
と大型コードを開発した側の視点でコードを読むことができます。
私はこれに気がついてからEchartsへの理解が数倍に跳ね上がりました。

・実際に動かしてみる
一番重要なのは実際の動きをみてみることです。
ただコードを見ているだけで100%理解できる人間は殆どいないと思います。
ですので、自分のイメージと実際の動きを照らし合わせ理解度を上げていく必要があります。

これらの事を意識してコードを読み、ある程度理解できるまでに上記の通り2、3週間かかりました。
最初の1週間に関しては自分が何を読んでいるのか分かりませんでしたが、2週間、3週間と読み続ける事である程度の理解度を得ることができました。
ですので、これといって近道はないので根気強く頑張って読むしかありません。

また今回私が読んだEchartsはかなり綺麗にコードが書かれていたので、私自身にコードを通し良い影響を与え多少ですが自分のコードの保守性が高い物に近づいたのかなと思っています。

最後に。

長々と書いてきましたが個人的に言いたい事は、
「人のコードを読んで欲しい」です。
僕の感覚なのですが他人が書いたコードはその人の自己啓発本に近いと思っています。なぜならコードにも癖・特徴があり、人によって最終的なコードが大きく変わってきます。そこから人の考えを覗けると思うと、コード版の自己啓発本だと言えるのではないでしょうか。
また、良いと感じた部分を自分に取り入れていくことで自分の枠を飛び出したコードを実装できるようになると私は思っています。

最初は簡単なものでも良いので自分のスキルアップだと思ってコードを読んでみてはいかがでしょうか？

最後まで読んでいただき有り難うございました。