강의

멘토링

커뮤니티

BEST
Programming

/

Mobile Application Development

iOS/Androidアプリ開発のための本番 React Native - Basic

Mobile App Front-End開発のためのReact Nativeの基礎知識の習得を目指しています。進入障壁の低い言語/APIの活用により、非専門家も簡単にNative Mobile Appを開発できるように作られた講義です。

  • Wintho
React Native
React
ES6

学習した受講者のレビュー

受講後に得られること

  • React Native開発言語であるJavaScriptの6番目の標準仕様(ECMAScript 6)の背景知識

  • React Nativeの根幹であるReactの背景知識

  • React Nativeの基本コンポーネントの使い方学習による画面構成方法

  • React Navigation 学習による画面の切り替えと接続 (Stack、Drawer、Tab) 方法

  • 連絡先/カメラ/ギャラリーなどのPhone Resourceを活用する方法

  • Image、TextなどのAnimationの生成方法

  • React Nativeの深化コーディングのためのTip(デバッガ、再利用Component製作など)

  • iOS/Android App Front-End開発者になるための基礎知識

  • React Nativeと関連3rd Party Libraryの公式文書を活用することで、自分で開発と問題を解決できるSkill

リアクトネイティブ(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の使い方を学び、開発の限界を克服してください。

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

こんな方に
おすすめです

学習対象は
誰でしょう?

  • Native Mobile AppのFront-End開発を学びたい人

  • iOS App開発のためのSwift言語、あるいはAndroid App開発のためのJava/Kotlin言語の高い進入障壁を感じた方。またはすでに障壁の高さを体感している人

  • 進入障壁の低い言語/APIベースで非専門家も簡単に学べるApp開発方法をお探しの方

  • Mobile App Front-Endの開発をしたいのですが、iOSとAndroidのどちらが良いのか、お悩みの方

  • 1つのコード開発でiOSとAndroidでアプリを駆動したい人

  • React Nativeを学びたいのですが、ES6(ECMAScript 6)とReactの選手知識学習が負担になった方

  • 就職/転職のためにMobile App Front-End開発者としての開発スタックを積みたい方

  • 創業のために短期間でモバイルアプリ開発スキルを習得したい方

  • Mobile App Front-End 開発学習を簡単かつ楽しくしたい方

前提知識、
必要でしょうか?

  • JavaScriptの理解が必要です。でも、無作為に始めてみるのも悪くないようです。 ^^;;直感的なScript言語に基づいているので、簡単に理解でき、一緒にコーディングしてみるとすぐに慣れてくれるでしょう。それでもJavaScriptの選手知識の不在が気になる方は、JavaScriptの6番目の標準仕様を扱う「セクション2:ECMAScript 6(ES6)'」を必ず受講してください。

こんにちは
です。

2,437

受講生

151

受講レビュー

82

回答

4.6

講座評価

2

講座

안녕하세요. 여러분들께 React Native 지식을 공유해드릴 Wintho 입니다.

저는 Computer Vision을 전공하여, 자동차 업계에서 자율주행 시스템을 개발했고, 현재는 로봇 업계에서 사물인식, 장애물 회피 등의 영상처리 Alg.을 개발하는 개발자입니다.

새로운 영역에서의 개발 Stack을 쌓아보고자 취미로 앱 개발을 시작했습니다. Java와 Swift 언어로 Android/iOS 네이티브 앱 개발도 해봤지만, React Native 만큼 진입장벽이 낮고 개발이 용이한 API도 없다고 생각됩니다. 쉬운 데다가 단 하나의 코드로 iOS/Android 동시 개발이 가능하다는 건 더할 나위 없는 메리트겠죠? :):)

외국에서는 이미 Mega Trend의 흐름에 합류하여 개발자들의 Community도 급증하고 있는 React Native입니다. 국내에서는 React Native의 명성에 비해 그 인지도가 낮은 것이 현실이고요. 많은 분들께 React Native의 훌륭함을 공유해드리고자 본 강의를 제작하게 되었습니다. 수업을 통해 목말라했던 지식을 습득하시는 유익한 시간이 되시길 바라며, 그를 통해 국내에서도 React Native 개발자들의 Community가 활성화 되길 바랍니다.

그럼 강의에서 뵙겠습니다. 감사합니다. ^^;

カリキュラム

全体

78件 ∙ (7時間 8分)

講座掲載日: 
最終更新日: 

受講レビュー

全体

124件

4.6

124件の受講レビュー

  • bunnyhopk3938님의 프로필 이미지
    bunnyhopk3938

    受講レビュー 1

    平均評価 5.0

    5

    26% 受講後に作成

    I am a job seeker who dreams of becoming an app front-end developer. Looking at recent job postings from startups, I see that many are looking for React Native developers. While looking for React Native lectures, I think I found the perfect lecture for me. I have only touched a little bit of coding, so I am still at the baby steps stage, but the instructor's explanations were kind and easy to follow. Above all, I was worried about installing tools and setting up the environment, but I followed the lecture instructions and there were no major problems. I am still in the beginning stages of the course, but the structure and content seem very good. They even explained the background knowledge necessary for React Native development, so I didn't need to take another lecture. I am looking forward to the remaining lectures. Thank you for uploading such a great lecture.

    • wintho
      知識共有者

      Hello Jazz i. Thank you so much for leaving a good review. I'm so glad that my lecture was helpful to you!! :]:] Through the lecture, you will be able to solidify the basics. I hope you do your best in the remaining lectures and achieve your goals. :):) Thank you!!

  • kimjake2167289님의 프로필 이미지
    kimjake2167289

    受講レビュー 2

    平均評価 5.0

    5

    63% 受講後に作成

    I took the course because I wanted to try app development. I don't know much about the app development world, but I think React Native is a good tool in many ways. It's not as difficult as I thought. The explanations are easy and friendly, so I'm learning without difficulty. This is a very helpful course for someone like me who doesn't know how to code and is just starting to study app development. Thank you.

    • wintho
      知識共有者

      Hi Jake Kim. Thank you for leaving a great review. I'm glad that my lecture was helpful to you. :):) I think React Native will feel less difficult because it uses a relatively easy language/API. Being able to develop Android and iOS simultaneously is also a big advantage!! If you're new to coding, there may be some difficult parts, but I hope you don't give up in the middle and finish it to the end to achieve your goals. :):) Thank you so much for leaving a great review!!

  • young1님의 프로필 이미지
    young1

    受講レビュー 2

    平均評価 5.0

    5

    92% 受講後に作成

    Hello. I took this course because I had to use react-native. I think there is no other course better than this one for beginners. The course was so clear that I didn't realize how much time had passed. When will the next advanced course be released? I'm looking forward to it.

    • wintho
      知識共有者

      Hello, fontj. Thank you for leaving such a great review. I feel like all the hard work I put into preparing and producing the lectures has been rewarded. Thank you so much. The next intensive lecture is currently in the preparation and start stage. It will take some time to prepare and actually record, but we are working hard to open it as soon as possible. Please understand that I cannot rush because I am busy with my work. We will come back with a quality lecture that will satisfy you even more next time. I hope you do your best for the remaining lectures and achieve your goals :):) Thank you so much for leaving a good review!!

  • mkim1605078993님의 프로필 이미지
    mkim1605078993

    受講レビュー 1

    平均評価 5.0

    5

    31% 受講後に作成

    This is the lecture I was looking for. For those who desperately need a React Native lecture, this is an oasis in the desert. Thank you for the great lecture.

    • wintho
      知識共有者

      Hello, Minjun Kim. Thank you for leaving such a great review. I'm glad that this course was helpful. I hope that this course will help React Native beginners like Minjun Kim and expand their pool of React Native developers. Thank you so much for leaving such a great review!! :):)

  • duck41012463님의 프로필 이미지
    duck41012463

    受講レビュー 1

    平均評価 5.0

    5

    9% 受講後に作成

    I came here after taking another course and I am very satisfied. I liked that there were no contract terms or commercial purposes with the platform company, and the instructor's genuine passion for the course was evident. I also liked the teaching method of teaching how to fish rather than just catching fish. All programming languages tend to have new updates or library compatibility issues, but thanks to the instructor teaching how to fish, I had no problem following the course. The course was created last year, but the content is still good for learning. I came here after going through several React Native courses, and it seems to be the best in Korea. When will the next course be released?

    ¥6,866

    Winthoの他の講座

    知識共有者の他の講座を見てみましょう!

    似ている講座

    同じ分野の他の講座を見てみましょう!