このような疑問に答えます。
私がReact Nativeを習得した経験を踏まえた上で、React Nativeのおすすめの学習方法をまとめました。
※この記事では、読者の方が既に何かしらのプログラミング言語の勉強をしていることを前提に書いています。
全くプログラミングを学んだことのない人はJavaScriptを少し学んでからReact Nativeに取り組む事をおすすめします。
○この記事の内容
＜スポンサーリンク＞
React Nativeのおすすめの勉強法
結論からいうと、React Nativeのおすすめの勉強法は、実際にReact Nativeでアプリを作ることです。
言語は、JavaScriptベースになるので、JavaScriptの知識があると学習がスムーズに進みます。
私の場合、JavaScriptの知識はありませんでしたが、Javaの知識はあったので、その知識を応用してJavaScriptの理解はできました。
基本的に本や技術書を用いるよりかは、React Nativeの公式ドキュメントを参考に学習していくのがおすすめです。
React Nativeはバージョンアップが多いので、公式ドキュメントを参照することで、最新の情報を入手できます。
また、ほとんどの有益な情報は英語で記載されているので、英語検索を活用して情報収集しましょう。
英語の資料だけですと、ハードルを高く感じる方も多いと思うので、参考になった日本語の書籍も紹介します。
その本は「React Native ～JavaScriptによるiOS／Androidアプリ開発の実践」になります。
この本は、TypeScriptを用いた環境でのReact Nativeアプリの作り方を解説しています。
環境構築から細かく開発手順が説明してあり、とてもわかりやすかったです。
React NativeとTypeScriptの開発におすすめな本という記事でも紹介しているので、参考にしてみてください。
ここからは、React Nativeのアプリ開発をどのように進めて学習していけばいいのかを解説していきます。
React Nativeの勉強手順
React Nativeのアプリ制作は大きく次の4つのステップに分けて学習するのをおすすめします。
- 環境構築
- アプリ設計
- 画面製造
- 値の受け渡し、保存
環境構築
開発環境を決めて、環境構築を行います。
環境の種類
React Nativeの開発環境には、React Native CLIを用いる環境とExpo CLIを用いる環境があります。
個人的には、React Native CLIを用いた環境がおすすめです。
React Native CLIを用いると、ios、androidのライブラリが使え、ネイティブの機能を制限なしに使えます。
ですが、Expo CLIだと制限がかかる分、お手軽に環境が用意できます。
お手軽に始めたい場合はExpo CLIを用いるといいと思います。
この記事では、React Native CLIを使用してる前提の内容や記事紹介が多くなりますが、Expo CLIを使用していても当てはまることは多いです。
ぜひ参考にしてみてください。
環境構築
React Nativeの環境構築の手順はReact Nativeの公式ドキュメントのSetting up the development environmentに記載されています。
React NativeをWindowsでの環境構築の手順は、React Nativeの環境構築の手順【Windows版】に日本語でまとめてあるので、こちらも参考にしてみてください。
Macでの環境構築の手順は、React Nativeの環境構築の手順【MacOS版/M1対応】で紹介しているので参考にしてみてください。
また、React Nativeの環境に加えて、開発用エディタの用意も必要です。
私がおすすめするエディタはVisual Studio Code（通称 VS Code）です。
VS Codeのインストール手順はVisual Studio Codeのインストールと日本語化の手順【Windows版】をご覧ください。
React Nativeでデフォルトとして使用されている言語はJavaScriptです。
もし、TypeScriptを用いたい場合は、React NativeプロジェクトにTypeScriptを導入する手順を参考にしてみてください。
また、開発に便利な自動検証ツールや自動整形ツールを導入したい場合はESLintとPrettierの導入【React Native & TypeScript】をご覧ください。
アプリ設計
次に、どのようなアプリを作るか決めましょう。
はじめは、カレンダーやメモ帳などシンプルなアプリを作るのがいいと思います。
画面の遷移、値の入力と取得があると、React Nativeの基礎を抑えられます。
画面製造
まずは１つの画面を完成させることを意識して取り組みましょう。
１つの画面が完成したら、他の画面も作り、画面遷移の導入に取り掛かりましょう。
基本的な画面製造
まずは、React Nativeの公式ドキュメントを見て、どういったタグを用いることができるかをチェックしましょう。
React Nativeの公式ドキュメントのCore Components and APIsで使用できるタグが見れます。
始めは例として提示されているコードをそのまま持ってきてもいいので、色々といじってみながら使い方を覚えていきましょう。
基本的なタグの使い方や画面製造の方法に関しては、別途記事を用意させていただきます。
パッケージの利用
また、画面の作成にあたって、便利なパッケージが公開されていたりします。
例えば、カレンダーを作成したい場合、react-native-calendarsというパッケージが存在します。
このパッケージを導入することで、カレンダーを簡単にアプリ内で用いることができます。
react-native-calendarsの使い方に関してはreact-native-calendarsの日本語化とカスタム方法をご覧ください。
このように、パッケージを利用することで、容易に画面のパーツを作ることもできます。
画面遷移
React Nativeでの画面遷移には、React Navigationを使うのをおすすめします。
React Navigationを用いると、普通の画面遷移に加えて、サイドメニューやタブバーの導入も可能となります。
公式ドキュメントはこちらになります。
React Navigationの導入方法や基本的な使い方に関して、追って記事をかくので、そちらも参考にしてみてください。
おまけ：classとfunction
色々な資料を見てみると、classを用いてコードが書かれていたり、functionを用いて書かれていたりとすると思いますが、基本的にどちらかに統一することをおすすめします。
個人的にはclassよりもfunctionを使うのがおすすめです。
その理由に関しましては【React Native】classとfunction、どちらを使うのかをご覧ください。
また、classをfunctionに変換する手順についてはReact Nativeでclassをfunctionに変換する10ステップをご覧ください。
値の受け渡し、保存
React Nativeの値の受け渡しに関しては、functionを使っているならhooksを学ぶのがいいです。
hooksに関してはReactの公式ドキュメントのフックの導入をご覧ください。
hooksはReact Nativeで結構難しい概念になるので、噛み砕いた解説記事を追って別途用意します。
classを使用しているのでしたら、stateとthisの扱いに関して学ぶといいです。
基本的にhooks、もしくはstateとthisを理解できると、大概の値の処理はできるようになります。
値の保存をする場合は、データベースを導入しましょう。
よく導入されているのを見かけるのが、React Native Firebaseになります。
React Native Firebaseの公式ドキュメントはこちらからご覧ください。
また、SQLを用いたデータベースを扱いたい場合はSQLiteを導入するといいです。
SQLiteの公式ドキュメントはreact-native-sqlite-storageをご覧ください。
基本的なデータベースの導入方法と使い方に関しては、追って別の記事を書きますので、そちらをご覧ください。
＜スポンサーリンク＞
まとめ
React Nativeで実際にアプリを作ることがReact Nativeを習得するおすすめの勉強法になります。
公式ドキュメントや書籍を参考にしつつ、段階的にアプリを制作して、React Nativeの理解を深めていきましょう！
