강의

멘토링

로드맵

Inflearn brand logo image
Programming

/

Mobile Application Development

Web開発者の年収を上げるハイブリッドアプリ with Expoフレームワーク

Web開発を活用して、AndroidとIOSでサービス可能なモバイルアプリ開発ができるようにする講座です。

실습 중심
React
Next.js
expo
React Native

こんなことが学べます

  • Expoフレームワーク

  • React Nativeの基礎

  • WebViewとReact/Nextの連携

  • スマートフォンの機能および権限連動(アラーム、位置情報、システムなど)

  • 安定したハイブリッドアプリ設計 (マイクロフロントエンド)

Web開発者年俸上げプロジェクト
Web開発技術をそのまま利用して「アプリ開発者」に成長する

こんにちは!
コードキャンプノーワン豆。

ウェブ開発者が簡単に能力を高めることを可能にするウェブ開発者の必須講義を目指しました。
開発者は、能力を引き続き育てなければならない宿題を持っています。私も同じ宿題を毎日しており、皆さんの試行錯誤を少しでも減らせるように努力しました。いつもフォローしてくれてありがとう。

9年目フルスタックWeb開発者、ハイブリッドアプリ開発者、
ブートキャンプの代表講師として、Web開発者が持つ技術で簡単に能力を育てるように研究しました

ハイブリッドアプリ開発者として、簡単かつ迅速に成長できるコアコンテンツと実務コードを公開します。
それでは講義で会いましょう!

クロスプラットフォームハイブリッド
アプリ開発とは?

クロスプラットフォームハイブリッドアプリ開発とは、Webコードでさまざまなオペレーティングシステム(Android、iOSなど)で動作するアプリを作成する技術です。通常、アプリを作成するときは、各オペレーティングシステムごとに異なるプログラミング言語と環境で別々に開発する必要がありますが、クロスプラットフォームとハイブリッドアプリ技術を使うと、Webで書くReact.jsやNext.jsのような技術を利用して一度だけアプリを開発すれば、複数のオペレーティングシステムですべて使用できます。

代表的なフレームワークにはReact.NativeとFlutterがありますが、残念ながらこれらの技術は複雑な環境設定と追加の多くの学習を必要としています。

ただし、Expoは複雑な環境設定なしで開発できる非常に効率的なフレームワークです。

Expoフレームワークとは
何ですか?

Expo(Expo)は、React NativeとWeb技術を利用してモバイルアプリ(Android、iOS)を簡単かつ迅速に開発するのに役立つツールでありサービスです。

もともとReact Nativeだけでアプリを開発するには、開発者が自分で複雑な設定と環境構築をしなければなりません。

Expoフレームワークは
なぜ効率的ですか?

Expoが効率的な理由は大きく3つにまとめることができます。

1⃣ Webコードで複数のプラットフォームで利用可能
Expoを使用すると、1回の開発でAndroidとiPhoneの両方で動作するアプリを作成でき、時間とコストが節約されます。

2⃣シンプルでクイックスタート
Expoは事前に作成された環境を提供し、複雑な設定なしですぐにアプリを作成できます。

3⃣簡単なテストと共有

アプリを実際のスマートフォンで簡単にテストし、結果をリアルタイムで表示できます。特に友達や同僚にアプリを簡単に共有してテストしてみることができます。

ハイブリッドアプリ講義は
誰が聞くのが良いですか?

実はReactとNextを一度でも学習した方たちなら、ぜひ一度は聞かなければならない必須講義になるようにしました!私たちがすでに知っている技術で簡単に成長する方法ですから。

Web開発の知識をそのまま活用して、簡単にアプリ開発を学びたい方

個人収益化のためのアプリ開発への関心と情熱のある方

年俸を上げる
転職を希望するウェブ開発者

この講義では
どんな内容を学べますか?

この講義は、単なるWebビューの内容だけを扱う講義ではありません!はるかに慎重で重要な内容でいっぱいになりました。モバイル機能を使用するDevice APIから、効率的にモバイルUIを設計する方法、ページアニメーションなど、皆さんがアプリ開発に必ず知っておくべきすべての内容を細かく込めました。

【講義目標】

  • Web技術をそのまま活用してIOS/AOSアプリを開発する能力


  • Expo フレームワークに対する全般および多様な機器サイズに対応および設計する能力

  • ウェブとアプリのデータ連携方法を理解し活用する能力

  • 位置、アラーム、カメラなど様々なネイティブ機能を活用する能力

  • アプリログインを理解し、セキュリティを強化して適用する能力

  • スケーラビリティを考慮し、メニュー間ドメインを分離する能力

1. ハイブリッドアプリ_Expo

2. モバイルUIの設計

3. デバイスAPIの設計

4. モバイルシステム機能

5. モバイルアラーム機能

6. アプリ権限

7. 写真拡大とピンチズーム

8. Androidバックボタン

9. ページ移動アニメーション

10. アプリログイン

11. リストの更新

12. マイクロフロントエンド

講義で取り上げる詳細を確認してください。
体系的で不可欠な内容で満たされました😀

クロスプラットフォームとハイブリッドアプリ

  1. リアクトネイティブとExpo

  2. エミュレータとシミュレータ

  3. リアクトネイティブタグ

  4. WebビューとNextの連動

  5. Webビュー接続失敗の対応

モバイルUIの設計

  1. モバイルUIデザインとハイブリッドアプリの利点

  2. モバイルUIの割合を増やす

  3. モバイルレイアウトヘッダ

  4. ローカルヘッダーとオプションの深化

  5. モバイルレイアウトフッター

デバイスAPIの設計

  1. Webビューのデバッグ

  2. デバイスとウェブビューのデータ転送

  3. デバイスAPI

モバイル位置とシステム機能

  1. デバイスシステム情報API

  2. デバイス位置情報API

  3. デバイスオブジェクトルックアップリファクタリング

モバイル通知機能

  1. 通知プロセス

  2. スケジュール通知

  3. 通知をクリック

アプリ権限

  1. アプリ権限の設定

  2. アプリの状態を検出

Androidのバックボタン

  1. Androidのバックボタン

  2. useEffectとメモリリーク・カスタムフック



写真の拡大とピンチズーム

  1. 写真ソースを見る

  2. ピンチズーム

ページ移動アニメーション

  1. ページ移動アニメーション

  2. ページ移動アニメーション(戻る)

アプリログイン

  1. アプリログイン

  2. アプリログイントークンの奪取

リストの更新

  1. フルトゥリフレッシュ(pull-to-refresh)

マイクロフロントエンド

  1. マイクロフロントエンドWeb

  2. マイクロフロントエンドアプリの接続

スケジュールアラーム

Androidバックボタン(ダブルクリック終了)

ページ移動アニメーション

フルトゥリフレッシュ(pull-to-refresh)

何かを見逃さないように
頑張って企画しました!

このレッスンでは、JavacriptとReact.jsまたはNext.jsを選手の知識として知っておく必要があります!しかし心配しないでください。
皆さんがあるレベルにあった、この講義を完強するために必要なコアなJavascriptとNext.jsの内容を別途提供しています!それぞれどのような内容を提供しているか確認してください!

Javascriptを追加

  1. テンプレートリテラル

  2. オブジェクトと角括弧(アクセス・生成)

  3. 構造分解割当

  4. SetTimeout

  5. 三項演算子

  6. 矢印関数と戻りを省略

  7. スプレッド演算子/RESTパラメータ

  8. Early-Exit

  9. addEventListner

  10. オプションチェイン

  11. JSON.stringify/JSON.parse

  12. switch

  13. オブジェクトキーの削除と照会

  14. Promise

  15. async/await

  16. shorthand-property

  17. 構造分解割当と初期値設定

  18. setInterval/clearInterval

  19. querySelctor

  20. accessToken/refreshToken

  21. HOF

Next.jsを追加

  1. フラグメント

  2. useState

  3. useEffect

  4. props

  5. 子供

  6. 条件付きレンダリング

  7. usePathname

  8. use client

  9. 動的ルーティング / useParams

  10. リンク

  11. prevState

  12. use server

  13. useRef

  14. カスタムフック

  15. useRouter(router.push)

  16. useRouter(router.back)

  17. アプリルーター/ページルーター

  18. Webパック

もしかしたら
初めてですか?

これまで受けてきたノウォンドゥイムのキーワードと受講評をまとめました。
この講義を通して、Nowon Dumと一緒にアプリ開発者として成長しましょう🚀

#親切な講義
#凄い
#気分
#耳にすっぽり
#蒸し
#メンター


#豆豆
#いいね

投稿者: SS
難しい用語を短く書く他の講義に恐れた方は、ぜひノウォンドゥムのハイクオリティをお見逃しなく!

投稿者: alopp
本当の君を愛してノウォンドゥ!
めったにないものはすべて本当に濃縮されているのであまり良いです。

投稿者: 空白
本当に良い講義のようです。基礎から部分から深化まで部分部分が精密で凝縮された講義なので、一人でも理解するのがいいですよ!

投稿者:キム・ドンウン
ノウォンは最も必要なスキルをカリキュラムに毎回改善し、実務経験に基づいた例で理解が上がりました。

気になる点
ありますか?

Q. 選手の知識はどのくらい必要ですか?

React.jsまたはNext.jsの基礎知識を持っている人が聞くのに最適化されたレッスンです。
ただし、講師様ごとに説明するスタイルも異なり、コードを書く方法も異なることがありますので、より効率的な学習のためにノウォンドゥムのJavascriptだけでなくNextの核心内容まで補足映像として提供しています。講義自体が親鉄で体系的に説明するため、難なく学習できます。

Q. コンピュータ・ノートブックの仕様はどうなりますか?

ノウォンドゥムはMacを使っているので、講義はMacを基準に行われました
ハイブリッドアプリの特性上、MacとiPhoneをお持ちの場合は、Android/IOSの両方が実装可能で、シミュレータを通じてテスト可能です。 Window系コンピュータとAndroidフォンをお持ちの場合、テストはAndroidのみ可能です。 IOSまでテストしたい場合は、Macがなくても最小IOSエアシステムが必要です。

Q. 実務で利用可能な内容を教えてください。

この講義の内容と実務例は、ノーウォンドゥムが直接ハイブリッドアプリで作って実サービスで配布した「ソロトリップ」を基準にしています。現在「ソロトリップ」はしばらくアップデート中でサービスを運営していませんが、まもなく新しいプロジェクトを導入して再オープン予定です。実サービスとしてすぐに使えるレベルの内容で全カリキュラムが制作されました。

こんな方に
おすすめです

学習対象は
誰でしょう?

  • 基礎ウェブ開発の知識で手軽にアプリ開発をしてみたい方

  • React/Nextの経験者で、ハイブリッドアプリ開発に挑戦したい方

  • アプリ開発者として年収を上げたいウェブ開発者

  • ハイブリッドアプリ開発のポートフォリオを作成したい方

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

  • React.jsの基礎

  • Next.jsの基礎

  • ウェブ開発の基礎

こんにちは
です。

13,497

受講生

384

受講レビュー

200

回答

4.8

講座評価

12

講座

"Try anything, Try everything!"

코드캠프는 유능한 개발자를 양성하며 개발의 미래를 바꾸고자 하는 목표를 가지고 있습니다. 사회적, 경제적, 교육적 배경에 상관없이 누구에게나 커리어 전환의 기회를 제공하기 위해 인프런에 나타났답니다. 코캠과 함께 커리어 점프에 도전하세요!

カリキュラム

全体

96件 ∙ (33時間 23分)

講座資料(こうぎしりょう):

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

4件

4.3

4件の受講レビュー

  • ymyj331341님의 프로필 이미지
    ymyj331341

    受講レビュー 2

    平均評価 4.0

    4

    100% 受講後に作成

    It was a thorough lecture.

    • lgs4002님의 프로필 이미지
      lgs4002

      受講レビュー 13

      平均評価 4.3

      修正済み

      3

      49% 受講後に作成

      I've seen all the necessary parts, but it was slightly disappointing.

      • dnjstl3213509님의 프로필 이미지
        dnjstl3213509

        受講レビュー 1

        平均評価 5.0

        5

        10% 受講後に作成

        • doomco07님의 프로필 이미지
          doomco07

          受講レビュー 28

          平均評価 5.0

          5

          5% 受講後に作成

          It felt like a cost-effective course, so I started by purchasing it.

          ¥5,689

          codecampの他の講座

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

          似ている講座

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