リアクトネイティブ（React Native）でモバイルアプリ開発に挑戦！

「スタートだけで終わらないアプリプログラミングはNo!!
React Nativeで私もアプリ開発者!!!」

■講義紹介

● Section 0: React Native 導入・開発環境の構築

React Native（リアクトネイティブ）の紹介と開発環境の構築の説明に進みます。モバイルアプリCross Platform FrameworkであるReact Nativeは、iOSとAndroidで1つのコードでアプリ駆動が可能な方法、React Nativeの開発に必要な選手知識はどれがあるのかなど、 React Nativeの全体的な理解を助けるように構成されており、 React Native開発のためのプログラムとツールのインストール方法をお知らせします。リアクトネイティブ開発のための環境構築が難しいかもしれません。それぞれのプログラムとツールのバージョンを指定したので、互換性Issueは心配する必要はありません。一つ一つ一緒に設置しながら、環境構築のハードルを下げることができるように構成されたセクションです。

● Section 1: Simulator 駆動

開発コードをAndroid EmulatorとiOS Simulatorで動かす方法の説明に進みます。 React NativeはCross Platform Frameworkですが、iOSとAndroidが提供するNative Component Styleと性格に多少異なる部分があります。各Simulator駆動により、複数機種の端末でレンダリングされる出力画面を確認できるように構成されたセクションです。

● Section 2: ECMAScript 6 (ES6)

React Nativeの開発に必要な選手知識であるECMAScript 6（ES6）の基礎文法の説明に進みます。 React Nativeの開発に主に使用されるコアのみを抜粋して、不要な学習を最小限に抑え、効率的な選手知識学習になるように構成されたSectionです。

● Section 3: React

React Nativeの開発に必要な選手知識であるReactの基礎文法の説明に進みます。 React Native開発コードを活用して説明しますので、React Native開発コードに馴染むことができます。それだけでなく、React Nativeの開発に必要なアルチャ排気コアのみを抜粋して効率的な選手知識学習になるように構成されたSectionです。

● Section 4: React Native Component

本格的なReact Native基礎文法の説明に進みます。 App画面を構成するさまざまなComponent（View、Text、Button、Image、TextInputなど）の基本的な使い方を学び、深化学習を通じて複数のComponentの組み合わせを活用してAdvancedな画面Renderingを扱います。 1つの画面を構成するための基礎文法と深化内容を学習できるように構成されたセクション。

● Section 5: React Navigation Ver. 5

画面切り替えを支援する3rd Party LibraryであるReact Navigationの基礎文法説明に進みます。最新にアップデートされたVer. 5の内容を扱い、 Stack Navigator （ボタンを使って画面を切り替える）/ Drawer Navigator （画面左右に開く新しいウィンドウ）/ Tab Navigator （Tabボタンを使って画面を切り替える）/ Vector Icon （様々で便利なPictogramを使用）の学習が可能です。さらに、各ナビゲータの組み合わせによる画面ツリー構造設計（Nesting Navigator）を使用して、さまざまで豊富な画面切り替え方法を学習できるように構成されたセクションです。

● Section 6: Phone Resource の活用

スマートフォンリソースの活用方法の説明に進みます。アプリで連絡先/カメラ/ギャラリーなどの端末リソースを使用するには、追加の3rd Party Libraryのインストールが不可欠であり、アクセス権の有無の判断などのProcessが先行する必要があります。 iOSとAndroidの各セキュリティポリシーに基づいて端末リソースを活用するための承認方法を学び、実際の開発を通じてスマートフォンリソースの使い方を学習できるように構成されたSectionです。

● Section 7: Animation

図形とテキストにアニメーション効果を付与する方法の説明に進みます。 React Nativeはアニメーション効果をサポートします。色、透明度、回転、移動などの効果だけでなく、各Animation効果の組み合わせ（Interpolation、Sequence、Parallel）を通じて、より多様で豊かな視覚効果の演出方法を学習できるように構成されたSectionです。

● Section 8: Good To Know Things

React Nativeの開発に必要な高度なSkillの説明に進みます。深化コーディングに必要なDebuggerの紹介をはじめ、再利用Componentを直接生成して使ってみて、Platform別にそれぞれ異なる結果を出力する方法などの学習が可能です。よりAdvancedな内容の学習と、現業で使用するSkillの習得を目指して構成されたSectionです。

● Section 9: 講義を終えて

本講義の学習を終えた後の旅程について説明します。本講義では、React Nativeの基本的な部分を取り上げ、実際のApp開発と現業におけるCo-WorkのためにはReduxの概念とともにBack-Endの理解も不可欠です。 Reduxの学習と深化コーディングを通じて、実際のAppを開発してみるフォローアップ講義がオープンしました！ログインプロセスの実装、サーバーからのデータの受信および出力などのAdvancedコンテンツの学習をご希望の方は、次の講義を受講してください。

知識共有者の後続講義（深化過程）が気になったら？

iOS/Android アプリ開発のための本番 React Native - Intermediate
リアクトネイティブでモバイルアプリ開発実戦に挑戦してみてください！

■講義の特徴

●React Native開発に必要な選手知識内容を1つの講義に盛り込んだ

React Native開発にはECMAScript 6（ES6）とReactの知識が必要ですが、実際のReact Native開発に活用される知識はその全体の一部です。どんなことを学ぶべきかわからず、すべての内容を勉強することは非常に非効率的です。そのため、本講義はReact Nativeの開発に重要な要素だけを抜粋して構成されました。 1つの講義でReact Nativeの基礎学習をお楽しみください。

●React Nativeの基礎をカバー

本講義は、Mobile App Front-End開発のためのReact Native基礎学習を目指しています。基礎の概念をしっかりと固めることができるように詳細な説明を取り上げ、React Nativeの概念ではないにもかかわらず理解が難しい可能性のある事項については、説明を含めました。 React Nativeを初めてお使いの方も簡単にご理解いただけます。

●React Navigation Ver。 5をカバー

このレッスンでは、React Navigationの最新バージョンであるVer。 5を扱います。 Ver. 4からのアップデート以来大きな変化がありました。実際のコーディングを通じて、公式文書の確認では習得しにくい内容を扱いながら、最新バージョンのReact Navigationを学習できるように構成されました。

●非専攻者も簡単にフォローできます

本講義は、非専攻者も十分にフォローできるように製作されました。進入障壁の低いScript言語とAPIを使用するだけでなく、簡単に学習できるように、コーディングの進行方法と説明の難易度/テンポ調整に留意しました。 App開発の世界に初めて足を踏み入れる非専門家の方も、この講義を通じてApp開発者になることを願っています。

■注意事項

●本講義ではMacを使用します。 Mac環境を構築してください。

●このレッスンではReact Native CLIを使用します。 React Native CLIの代替材であるExpo CLIは、Beginnerの方にとっては容易ですが、開発面での自由度が著しく低いです。 React Native CLIの使い方を学び、開発の限界を克服してください。

（※この講義は知識共有者の事情により回答が遅れる可能性があることをご了承ください。）