【ReactNative入門】アプリを作って学ぶチュートリアル

初心者がreact nativeでアプリを作れるようになる入門チュートリアルです。 expoを利用して環境構築を行うため、WindowsでもMacでもLinuxでも開発を行うことができ、実際にストアにリリースされているアプリのクローンを作りながらReactNativeを学びます。 ぜひiosやAndroidアプリをReactNativeで作ってみたい方はアプリを作りながら勉強してください。 ■ 打田裕馬のメールマガジン（24,000円分のオンラインコースプレゼント付き） https://uchida.link/funnel/2024-2/optin/?from=engapp_youtube_20221226_qKPrKRBXK4k&utm_source=youtube&utm_medium=social&utm_campaign=engapp_youtube_20221226_qKPrKRBXK4k ■ ProgateのES6 https://prog-8.com/courses/es6 ■ React Hooks https://ja.reactjs.org/docs/hooks-intro.html ■ ソースコード https://github.com/uchidayuma/reactnativebasic/tree/create-finish-css ■ デザイン見本（Figma) https://www.figma.com/file/Sbm8nfw9JbKJkb0ab9V15F/diary?node-id=9%3A173&t=hzs3sYArlUOuuHPJ-1 ■各種リンク https://uchidalink.notion.site/ReactNativeBasic-70c5065ebc2d4237980fe568fc792065 ■ Expoドキュメント https://docs.expo.dev/versions/latest/sdk/sqlite/ ■日記テンプレート https://docs.google.com/document/d/1MUIIvxelnd1Tjt65r8Qfi1Ap2HReMlvnbpTkYzlRWYw/edit ■ ReactNativePaperドキュメント https://callstack.github.io/react-native-paper/button.html ■ Stable Diffusion (AIイラスト作成サービス） https://stablediffusionweb.com/#demo ■ 目次 00:00:00 この動画で作れるアプリ 00:16:18 Expoアカウントの作成 00:17:19 Windowsの開発環境構築 00:23:37 Macの開発環境構築 00:28:24 SQLiteの準備 00:45:22 TypeScriptとは？ 00:49:13 Diariesテーブルの設計 00:52:12 Diariesテーブルの作成 00:55:59 firebaseの準備 00:59:40 絵文字とテンプレートのコレクションを作成 01:06:39 firebaseから絵文字を取得 01:19:14 絵文字を表示する 01:27:38 日記本文入力フォームを作成 01:32:16 日記本文を入力できるようにする 01:36:52 テンプレートをfirestoreに登録 01:39:56 絵文字をタップした際の動きを作る 01:48:20 テンプレートをタップした際の動きを作る 01:51:09 インサート文の解説 01:57:58 SQLiteに日記内容を保存する 02:09:27 ReactNavigationの全体像 02:13:35 タブの名前とアイコンを変更 02:23:13 共通ヘッダーの開発 02:28:28 Home画面の開発 Viewで枠組みを作る 02:35:13 useEffectで日記一覧を取得 02:50:18 日記一覧を表示 03:02:21 日記作画面に移動するボタンを設置 03:10:28 日記作成完了後、ホーム画面に戻す 03:15:53 引っ張って更新を実装 03:22:14 時刻関係の機能を実装 03:23:22 Webviewを実装 03:49:38 ダークモード対応 カラー定義を変更 03:57:24 Appbarのカラーを変更 04:07:01 共通CSSの作成 04:13:28 ホーム画面のデザインを整えよう 背景イラストをAIに作ってもらう 04:19:57 Welcomeパネルを整える 04:33:45 日記一覧を整える 04:41:18 Tipsを整える 04:53:07 日記作成画面のデザインを整える 絵文字を整える 04:59:12 テンプレートを整える 05:12:22 最後の仕上げ ■独学でwebアプリを開発する流れはこちら https://www.youtube.com/watch?v=M_7_EuTroZg ■初心者が絶対に抑えておくべきデータベースの基礎 https://www.youtube.com/watch?v=kuXSgJw5uOw チャンネル登録はこちらから！ http://www.youtube.com/channel/UCaCyTT6rvhCyqU6-tMhpP0A?sub_confirmation=1 Twitterはこちら！ https://twitter.com/UchidaYuma​​ ★ [BGM] ナイトパレード 騒音のない世界様より https://noiselessworld.net/​​ ★ #プログラミング初心者 #プログラミング #プログラミング勉強 #プログラミング学習 #reactnative #reactnative入門 #個人開発 #アプリ開発​