강의

멘토링

커뮤니티

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,434

受講生

150

受講レビュー

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分)

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

受講レビュー

全体

123件

4.6

123件の受講レビュー

  • Jazz i님의 프로필 이미지
    Jazz i

    受講レビュー 1

    平均評価 5.0

    5

    26% 受講後に作成

    앱 프론트엔드 쪽 개발자를 꿈꾸는 취준생입니다. 최근 스타트업의 채용공고들을 보면 React Native 개발자를 많이 찾더라고요. React Native 강의를 알아보던 중 저한테 딱 필요한 강의를 찾은 것 같습니다. 코딩은 조금만 건드려봐서 아직 아기 걸음마 수준인데, 강사님 설명이 친절하셔서 따라가기 어렵지 않았네요. 무엇보다 툴 설치랑 환경구축 부분에서 걱정이 많았는데 강의에서 알려주신대로 따라하니 큰 문제는 없었습니다. 아직 수강 초반인데 구성도 좋고 내용도 너무 좋은 것 같습니다. 리액트 네이티브 개발에 필요한 배경지식까지 설명해주셔서 다른 강의를 또 들을 필요는 없었고요. 남은 강의가 기대가 많이 됩니다. 좋은 강의 올려주셔서 감사합니다.

    • Wintho
      知識共有者

      Jazz i님, 안녕하세요. 좋은 수강평 남겨주셔서 너무 감사드립니다. 제 강의가 도움이 되신 것 같아 정말 뿌듯하네요!! :]:] 강의를 통해 기초 부분 만큼은 탄탄하게 다질 수 있으실 겁니다. 남은 강의도 화이팅하셔서 원하시는 목표 꼭 이루시길 바랍니다. :):) 감사합니다!!

  • Jake Kim님의 프로필 이미지
    Jake Kim

    受講レビュー 2

    平均評価 5.0

    5

    63% 受講後に作成

    앱 개발을 해보고 싶어서 수강했습니다. 앱 개발 세계를 잘 알지는 못하지만 리액트 네이티브라는 툴이 여러모로 좋은 것 같네요. 생각했던 것보다 어렵지도 않고. 설명도 쉽고 친절히 잘 해주셔서 무리없이 배우고 있습니다. 저 같은 코알못이 앱개발 공부 시작할 때 많은 도움 되는 강의입니다. 감사합니다.

    • Wintho
      知識共有者

      Jake Kim님, 안녕하세요. 좋은 수강 후기 남겨주셔서 감사합니다. 제 강의가 도움이 되신 것 같아 뿌듯합니다. :):) 아무래도 React Native가 상대적으로 용이한 언어/API를 사용하기 때문에 덜 어렵게 느껴지실 겁니다. 안드로이드와 iOS를 동시 개발할 수 있다는 것도 큰 메리트죠!! 코딩을 처음 접하시다보면 힘든 부분이 있으실텐데, 중간에 포기하지 마시고 끝까지 완주하셔서 원하시는 목표 꼭 이루시길 바랍니다. :):) 좋은 수강평 남겨주셔서 너무 감사합니다!!

  • fttf님의 프로필 이미지
    fttf

    受講レビュー 2

    平均評価 5.0

    5

    92% 受講後に作成

    안녕하세요. react-native를 써야해서 강의를 수강하게되었는데 처음 시작하는데 이강의만한게 없는거 같습니다. 너무 깔끔하게 강의를 해주셔서 시간가는줄모르고 들었네요. 혹시 다음 심화강의는 언제쯤 나올까요? 기대하고있겠습니다

    • Wintho
      知識共有者

      fontj님, 안녕하세요. 너무 좋은 후기 남겨주셔서, 그동안 강의 준비&제작하면서 힘들었던 것들 다 보상받는 느낌이네요. 정말 감사드립니다. 다음 심화강의는 현재 준비&착수 단계에 있습니다. 준비하고 실제 녹화하는데 다소 시간이 걸리지만 최대한 빨리 오픈될 수 있도록 임하고 있습니다. 현업이 또 바쁜지라 서두르지 못하는 점 양해 부탁드립니다. 다음에도 더 만족하실 수 있는 양질의 강의로 찾아뵙도록 하겠습니다. 남은 강의도 화이팅하셔서 원하시는 목표 꼭 이루시길 바랍니다 :):) 좋은 수강평 남겨주셔서 너무 감사합니다!!

  • Minjun Kim님의 프로필 이미지
    Minjun Kim

    受講レビュー 1

    平均評価 5.0

    5

    31% 受講後に作成

    제가 찾던 강의입니다. 리액트네이티브 강의가 간절했던 사람들한테는 사막의 오아시스 같은 강좌네요. 좋은 강의 감사합니다.

    • Wintho
      知識共有者

      Minjun Kim님, 안녕하세요. 너무 좋은 후기 남겨주셔서 감사합니다. 본 강의가 도움이 되신 것 같아 다행입니다. Minjun Kim님처럼 본 강의를 통해 React Native 초심자분들이 도움을 얻어 React Native 개발자 풀이 커졌으면 하는 바람입니다. 좋은 수강평 남겨주셔서 너무 감사드립니다!! :):)

  • duck4101님의 프로필 이미지
    duck4101

    受講レビュー 1

    平均評価 5.0

    5

    9% 受講後に作成

    다른 강의 듣다가 넘어왔고 대만족입니다 플랫폼 회사와의 계약조건이나 상업적 목적이 안 보이고 강사님의 강의에 대한 순수한 열정이 보여서 좋았습니다 물고기를 잡아주기 보단 낚시하는 방법을 알려주는 티칭 방식도 좋았고요 모든 프로그래밍 언어가 신규 업데이트나 라이브러리 호환 문제가 생기기 마련인데, 강사님께서 낚시하는 방법을 알려주신 덕에 강의 따라가는데는 문제 없었습니다. 강의는 작년에 생겼지만, 여전히 학습에 문제 없는 내용들이고. 여러 리액트네이티브 강의 떠돌다가 왔는데, 국내 최고인 거 같네요. 다음 강의 언제 나오나요?

    ¥6,881

    Winthoの他の講座

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

    似ている講座

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