新しい技術やフレームワークを学んで、どれだけ読んでも、どれだけ情報を取り込んでも、なんとなく身についた感じがしない。そんな経験、ありますよね?インプットの仕方や得意不得意もあるでしょうが、自分はあるあるだったりします。
特に新しい言語やフレームワークの理解、設計思想などチュートリアルを読んでも解像度が荒い状態だし、使いこなせている感もないなーと思ってしまいます。
直近だとVue周りのチュートリアルをインプットしたので、何か作りたいなーと思ってフロントをVue, バックを比較的苦手意識のあるRuby on Railsで↓のようなものを作りました。
自分が映画好きだったので映画の検索や見たい映画のお気に入り機能をベースに、その他自分が実装したい機能を詰め込んだサンドボックス的なWebアプリケーションですが、自分の中ではかなり言語、フレームワークの理解につながったと思います。
ざっくり以下の機能を作りました。
- Google OAuth2.0のソーシャルログイン
- APIで映画情報を引っ張ってくる
- 映画をタイトル、ジャンル（ホラー、コメディとか）で検索
- お気に入り登録
- チャット機能
なぜ、インプットだけでは使いこなせる感が少ないのか？
-
忘れるのが早い
ラーニングピラミッドというものが提唱されているくらいで、書籍を読んだくらいではスキルとして定着しづらいです。大体受動的にインプットしている身につくのは20~30%程度と言われています。 -
実践的な経験がない
教科書の例は「理想的な状況」。実際にはもっとトリッキーなことをやっていたり、チュートリアルでは補えないことが多々あります。
アウトプットすることで何が得られるの？
-
より実践に近い理解
- チュートリアルだと使うライブラリも限定されています。自分の作りたいものからどういったライブラリを使うのが適切かなど考えるので、より現場で使えるスキルが身につきます。
- 自分でアウトプットしようとすると割とトラブります。「エラーになる→原因を調べる→修正する」という流れはチュートリアルでは経験できません。
- 言語、フレームワークによって設計のポリシーが違っていたりします。チュートリアルだと「ふーん、そんなポリシーなのね。」レベルですが、実装を進めていくと「この実装はここにまとめておくべきだった！」みたいな気づきがあります。そういった気づきを重ねてフレークワークと仲良くなれるのかなと思います。
-
実績作り
- 将来的に転職したり、副業で別の案件に参加したりすることを想定している人もいるかなーと思いますが、その際にポートフォリオがあると自分の実績として見てもらえるので、今回の趣旨とはずれますが、個人的には重要なポイントだと思ってます。
ここら辺を実装・設計しておくと良いんじゃない？という機能
アウトプットするといっても具体的に何をやれば？みたいな人がいると思います。
自分だったら以下は最低限作っとけば大体言語やフレームワークの癖みたいなの掴めるし、自分で何か作った感も持てると思ってます。
バックエンド
-
認証・認可
チュートリアルでは自前で簡素的な認証機能を作ることが多いと思いますが、実際はIDaaS使うところが多いので、Auth0とか使うかその他OAuth2.0とかを使ったソーシャルログイン機能を作っておくと便利ライブラリの使い方を掴めるかもです。 -
API周り
Httpクライアント系のライブラリも意外と使い方バラバラだったりするので、何かしら利用してみるといいかなと思います。（データが多いとポートフォリオもちょっとリッチに見えます）
自分は無料でAPIを利用できるサービスとしてよく以下を使ったりします。-
TMDB
- 映画、テレビ番組の情報や画像を提供するAPI。
-
Unsplash
- 高品質なフリー写真を提供。API経由で写真の検索や表示が可能。
-
JokeAPI
- ジョークや冗談を提供するAPI。ライトなアプリのデモなどに利用可能。
-
News API
- 世界中のニュース記事を提供するAPI。記事の検索やカテゴリ別の表示などが可能。
-
Spotify Web API
- 曲、アルバム、アーティストなどの情報を提供するAPI。音楽関連のアプリやウェブサイト作成に利用可能。
-
Dog API
- 犬の画像をランダムに提供するAPI。シンプルなデモや実習に利用可能。
-
JSONPlaceholder
- テスト用のデータ（投稿、コメント、ユーザー情報など）を提供するAPI。フロントエンドの開発やデモ作成時に役立つ。
-
TMDB
-
非同期の処理
意外とチュートリアルに乗っていないけど、使うよね的な機能です。
データの同期などの重い処理は非同期処理として書かれますので、実践でどんなライブラリが使えるんだ？と焦らないように書いておいた方が良いと思います。 -
テストコード
テストライブラリによって書き方の癖が結構違ったりします。効率良い書き方覚えるのにも書いておいた方が良いと思います。
フロントエンド
-
レスポンシブなデザイン
大体のチュートリアルでは触れてくれていますが、実際に自分で作ったものをレスポンシブなデザインにしようとするとかなり怠いです。「現実はそんなに甘くないよ？」みたいなのを知るのに作っておいた方が良さそうです。 -
APIとの連携
言われなくても感があると思いますが、API利用しないフロントエンドの方が珍しいくらいです、チュートリアルでも大体触れてくれていますが、offset, limitクエリのあるAPIやポーリング処理などは作っておいてもいいかもです。 -
データ取扱
ブラウザのストレージに保存するような機能も意外とチュートリアルに情報少ない気がします。ストレージのどこに保存する？Cookieどうする？キャッシュどうする？とかの開発していると困る場面あるのでチュートリアルになければ実装しておいた方が良いと思います。 -
テストコード
バックエンドで書いたのと同じ理由ですね。
最後に
結局、学びの過程で「実際にやってみる」ことが、真の理解への近道かなと思っていますし、何よりも物作っている時が一番楽しいし継続しやすいと思っています。
人それぞれだと思いますが、インプットの効果薄いなーという人はぜひアウトプットまでしてみてください。
勢いで書いたので誤字脱字などは見逃してください🙏