新しい技術の学び方

5 min readMay 28, 2020

私は普段iOS開発をしていますが、インターンシップでWeb開発のチームに配属されたり、大学でFlutterのプロジェクトを任されたりしたこともあります。それぞれ締切が存在し、短期間で技術を学びプロジェクトを遂行する必要がありました。本記事では、そうした状況で行う自分なりの新しい技術の学び方をまとめます。

前提

クライアントサイドの技術
他の技術を習得している（プログラミング経験者）

クライアントサイドの新しい技術を習得するにあたって、一番に学ぶべきはUIの扱い方です。すでに他の技術を習得していれば、ロジックの部分は問題なく書ける、もしくは検索が容易にできると思います。一方でUIはフレームワーク独自の概念や単語が多く、初めは調べることすら非常に難しいです。ガイドラインを読むこともできますが、量が多く求める機能を把握するまで時間がかかってしまいます。なので私は、既に形になっているものをコードリーディングすることで基礎知識を養います。このような学び方をするにあたって、重要なのは次の2点です。

良質で、これから作るものに類似しているプロジェクトの入手
コードリーディング方法の把握

以下に、その手順と詳細について記述します。

1. サンプルプロジェクトの入手

もしプロダクトを0から作るのであれば、まず一番最初に、サンプルを手に入れます。正しく綺麗に書かれているもの、そしてできれば自分が作ろうとしているものと似ているプロジェクトを探すのが良いです。以下のようなキーワードで調べるとサンプルがたくさんあるGitHubのレポジトリを発見できます。

[言語名 or フレームワーク名] challenges / 30 days
様々なデモを作成して学習している人のレポジトリです。UIの実装だけでシンプルなものが多いです。allenwong/30DaysofSwift や lohanidamodar/flutter_ui_challenges など。
[言語名 or フレームワーク名] open source list
商用レベルなコードを丸ごと公開しているプロジェクトを見つけることができます。読み解く難易度は高いですが、モデルや通信部分などのようなUI以外のコードも合わせて学ぶことができます。dkhamsing/open-source-ios-apps や iampawan/FlutterExampleApps など。

2. サンプルのビルド

サンプルプロジェクトを動かして触ってみます。ここでビルド方法を把握します。また、フレームワークに存在するUIパーツや使い方のマナーを知ることができます。

3. レイアウトデバッグの仕方を知る

一番初めに身に付けたい知識です。これはiOS開発でいうview debugging, Web開発でいうブラウザの検証ツールを指します。これを用いれば「この箇所のコードがどこにあるのか」を一瞬で調べることができるので、コードリーディングが非常に容易になります。[フレームワーク or IDE ] view debug や [フレームワーク or IDE ] layout debug などで検索すると見つかります。

4. 定義元へジャンプする方法を知る

プロジェクト内検索で見つけることもできますが、定義元へジャンプする方法を知っていると圧倒的に楽です。レイアウトデバッグでコードを見つけたら、定義元にジャンプしてコードを追跡します。[IDE] 定義元ジャンプ などで検索すると見つかります。

5. 軽微な変更を加える

デザインを変えたり、機能を追加したりします。既存のプロジェクトに参加する場合は、軽微なバグ修正なども良いです。レイアウトデバッグと定義元へのジャンプを用いて変更箇所のコードを特定し、実装します。

6. 実装に取り掛かる

小さな改修に慣れてきたら、徐々に本格的な実装に移ります。個人的には、「UIパーツの追加→画面遷移→新規画面の作成→新規プロジェクトの作成」の順で触れていくと理解しやすいです。

以上のような方法で新しい技術を学んでいきます。初めに述べたように「良質なプロジェクトの入手」と「コードリーディング方法の把握」ができれば、あとは効率よく学ぶことができます。基礎から学びたい方には不向きですが、その猶予がなかったり実践から学びたい方には良いと思います。どなたかの参考になれば幸いです。

参考文献