ライブラリの効率的な勉強法(Reactを例にとって)

はじめに

最近会社に入社したので会社で使われているフレームワークとライブラリ理解する必要がありました。
私はとりあえず先輩方が書いたコードを普通に1から読んでいました。
そして、わからないコードや概念にぶつかるたびにググったり、人に聞いたりということをしていました。

やってみるとわかるのですがこのやり方でフレームワークやライブラリを理解することは非常に難しいものでした。
なのでやり方を変えなければという発想にいたり、試行錯誤して良さげなやり方を見つけました。

過去の自分に見せてあげたい一心で書きました。
おそらく何あたりまえのこと言ってるのという感じの内容だと思いますが、誰かの役にたてれば嬉しいです。

簡単なアプリを実際に作ってみる。

これにつきます。理解しなければならないコードを読むのもいいですが、本当に0から新しいライブラリを学ぶ場合は読んで理解するのは非常に時間がかかります。
「このファイルはどういう役割なの？」
「実際にいじるファイルはどこなの？」
「逆にいじったらダメなファイルはどこなの？」
というように溢れてくる疑問にはコードをただ読むだけでは答えることができないと思います。

その疑問に答えつつ根本からライブラリを理解するには
実際に作ってみるのが近道だと思います。
具体的な方法を書いていこうと思います。

公式サイトを見てインストールからやってみる。

公式ドキュメントを読んでインストールからやります。
僕の場合はReactを学ぶ必要があったので
https://reactjs.org/docs/add-react-to-a-new-app.html
このサイトにしたがってインストールを進めていきました。

サイトを読んでいくとオンラインでReactを試すことができるページを紹介してくれたり、
自分のPCに環境はつくらずにとりあえずReactを学ぼうぜというような記述にも出会いますが
今回の目的は実際に自分でゼロから作ってみるということなのでそういう部分はスルーしていきます。

このReactのサイトの例でいくと

$ npx create-react-app my-app
$ cd my-app
$ npm start

こういう部分をしっかりと自分で手を動かしてやっていく感じです。
この作業をすることで、
「このタイミングでこのファイルができるのか」
「ああこのコマンドこのタイミングで使うのね」
といったことが体系的にわかっていきます。

また、中心人物となるライブラリ(この例ではReact)を先に押さえておくことで周辺のライブラリ（サブキャラ）を中心人物であるReact様の上で試すことができるようになるのでその後の学習も捗ります。

核となるライブラリ(React)のHello World的なアプリを作ることができたので、
次はReactの中で使う他のライブラリの学習方法を見ていきたいと思います。

他のライブラリの学習方法

GithubのREADME.mdを読んで実際に試してみる。
これも当たり前かもしれませんがすごく大事だと思いました。
README.mdを読むと「わかったような気」にはなるのですがいざ書こうという時に
「これってそもそもどういうことだっけ。。」という状態に陥ってしまいます。

また、読むだけで自分で実際にそのライブラリを導入するという作業をしていないので
実際に自分でそのライブラリを使って0からアプリを作るというレベルには達しないのかなと思いました。

例をあげます。
僕の場合はReactの中でCSSを使うためのライブラリであるaphroditeを学習しようとした段階で詰まりました。

これはaphroditeのリンクです。
https://github.com/Khan/aphrodite
このリンク先のREADME.mdを読めばなんとなく文法などはわかるようにはなるのですが
導入方法をしらないので自分でこのaphroditeを使ってアプリを作るというレベルには達することができません。

そのレベルに達するためにやはりREADME.mdを表面的に読むのではなく
導入からやっていくことが大事なのかなと思いました。

この記事でいうと

$ npm install --save aphrodite

このような部分です。
これを先ほど作ったReactの簡易アプリの上で試すことで
「どのようにReactにaphroditeを導入するのか」
「実際にaphroditeを使うときの手順」
といったことがわかるようになるので理解度が跳ね上がります。

まとめ

なんだかんだ一番下にある土台を作ってその土台の上でコツコツ
ライブラリを動作検証しながら試していくのが近道なのかなと思いました。

公式ドキュメントを英語で読まざるをえないから英語もうまくなるし一石二鳥ですね。

「他にこんな勉強法あるよーー」
「ライブラリはこうやって学ぶといいよーー」
というのがあったらぜひ教えてください！