イントロダクション
  • このコースを修了したら作れるアプリ
  • アプリ開発の6の工程
  • リニューアルについて
1. プランニング
  • コンセプトとワイヤーフレーム
2. UIデザイン
  • Figmaをインストール
  • Figmaの基本
  • ヘッダーのUIデザイン
  • メモ一覧のUIデザイン
  • コンポーネントでデザイン作業を効率化する
  • プロトタイプを作成する
  • ボタンのUIデザイン
  • UIデザインのまとめ
3. マークアップの練習
  • VSCode のインストール
  • まずはHTMLで構造化を学ぶ
  • マークアップを始める
  • メモ一覧のマークアップ練習
4. スタイリングの練習
  • スタイルシートの基本
  • HTML要素をスタイリングする
  • 複雑なスタイリング
  • ボタンのスタイリング
5. プログラミングの練習
  • プログラミングの基本
  • 関数の基本
  • 演算子の基本
  • 条件分岐
  • 繰り返し処理
  • 練習
Git と Github
  • GitとGithubのメリット
  • GitのインストールとGithubのアカウント作成
  • Windows / TerminalとGitのインストール
  • ターミナルでの操作
  • Gitの初期化
  • Gitの設定を変更する
  • Gitで変更履歴を追加してみる
  • SSH Key に関する注意事項
  • SSHを使ったGithubとの連携
  • SSHパスフレーズを省略せずにGithubと連携する
  • Windows / Gitの初初期化からGithubとの連携まで
  • テキスト版教材
アプリ開発の環境構築
  • Expoとは
  • M1 Mac をお使いの方へ
  • Node.js のインストール
  • Expo のインストール
  • Xcode のインストール
  • Android Studio のインストール
React Native アプリ開発の基本
  • Expo プロジェクトの新規作成
  • Expo でアプリを共有する
  • Expo の基本的なファイル構成
  • Git でファイルの変更履歴を追跡
  • ESLint のインストール
  • コンポーネントの基本
  • コンポーネントを作成する
  • React Props の仕組み
  • props で値を受け渡す
  • コンポーネントのスタイルを上書きする
アプリ開発・構造化とスタイリング
  • メモの一覧をマークアップ
  • ヘッダー(AppBar)のスタイリング
  • メモのリストアイテムをスタイリング
  • ボタンのスタイリング
  • コードをコンポーネントとして抽出する
  • コードをスクリーンとして抽出する
  • メモの詳細画面をマークアップ
  • メモの詳細画面をスタイリング
  • アイコンを表示する
  • いろいろなアイコンを表示する
  • カスタムアイコンを作成する
  • メモの編集画面の構造化とスタイリング
  • KeyboardAvoidingView でテキスト領域を調整
  • メモの作成画面を作成する
  • KeyboardAvoidingView のバグ
  • ログイン画面のマークアップ
  • ログイン画面のスタイリング
  • サインアップ画面を作成する
  • ユーザーのアクションを受け取る
アプリ開発・ナビゲーションの実装
  • React Navigation をインストール
  • ナビゲーションを導入して画面をつなぐ
  • すべてのスクリーンを登録する
  • ボタンをタップして画面を移動する
  • 履歴をリセットしながら画面を移動する
  • iOS と Android のアニメーションを統一する
  • React Hooks
  • useState を使って状態を保存する
  • TextInput のオプション
アプリ開発・機能の実装
  • Firebase を始める
  • 会員登録を実装する
  • ログインを実装する
  • ログイン状態を監視する
  • ログアウトを実装する
  • データベースにデータを保存する