
1. Plan(計画)
2. Design(デザイン)
3. Markup(構造化)
4. Styling(装飾)
5. Programming(機能)
6. Release(ストアに並べる)
ワイヤーフレームを確認してUIデザインを始めます。
主に以下のような内容を学びます。
テンプレートからフレームを作成
グリッドシステム
レイアウト制約(Constraints)
レイヤーのロック
長方形の追加・色の設定
レイヤーパネル・レイヤーの選択
複数のオブジェクトをフレームに入れる
Line Height
Nadge Amount を変更して 8pt ずつ移動させる
レスポンシブなレイアウト
ドロップシャドウを使ったボーダーのテクニック
Boolean Groups でアイコンを作る
Alignment で整列させる
レイヤーに名前をつける
コンポーネントからインスタンスを作成する
インスタンスのテキストを上書き
Auto Layout を使ってレイアウト作業を軽減
再生ボタンを押してプロトタイプを表示する
UIデザインにスクロールを設定する
Clip Content を変更してフレーム外の要素を確認する
Corner Radius で角を丸くする
頂点の編集モード
Fix Position を適応して位置を固定
エフェクトを適応する
拡大ツール
Figmaファイルの読み込み方法
共通コンポーネントの説明
グリッドシステムの確認
各画面をつなげたプロトタイプ
code.visualstudio.com
Shell Command: Install 'code' command in PATH
ターミナルを起動する
Trim Trailing Whitespace の設定
Insert Final Newline の設定
HTMLはブロックの積み木
タグ(div, h1, p, etc...)の意味
HTML の基本形
VSCode でコードを書いてみる
index.html を作成してブラウザで確認する
ブラウザでスマートフォンをシュミレーションする
適切なタグを使って構造化する
コメントを書く
コードを複製して複数のメモを表示する
style タグを追加する
スタイルシートの基本的な書き方
クラス属性の指定
ブラウザーのデフォルトスタイルをキャンセル
様々なスタイルシートのプロパティ
FlexBox の基本
rgba で不透明度を含む色の指定
メモアイテムのスタイリング
余白やボーダーを設ける
FlexBox の応用
定義済のスタイルを他のHTMLに適応する
border-radius で角を丸くする
ドロップシャドウを適応する
position: absolute で位置を指定
calc を使った高さの計算
overflow でブラウザのスクロールを設定する
デザインとコードの比較
コンソールタブを開く
変数と代入(const と let)
いろいろなデータ型(数字、文字列、オブジェクト、配列, NULL)
関数の定義(function キーワードと波括弧)
関数の実行
アローファンクション
算術演算子(+, -, *, /, %)
比較演算子(>, <, >=, <=, ====, !==)
インクリメント演算子(+=, -=)
if
三項演算子
for
length で配列内の要素の数を調べる
forEach
querySelectorAll でページ内の要素を取得
forEach で繰り返し処理
Javascript でページ内要素の見た目を変更する
ボタンが押されたらアラートを表示してみる
React Native は、Web技術の組み合わで、iOS / Android ネイティブアプリを同時に開発することができます。初学者にも分かりやすい開発手法にも関わらず、本格的なアプリをつくることができます。
この講座は、アプリ開発を以下の工程に分割して進行します。
1. Plan(計画)
2. Design(デザイン)
3. Markup(構造化)
4. Styling(装飾)
5. Programming(機能)
6. Release(ストアに並べる)
最初は、HTML / CSS / Javascript を中心に学習し、最終的にはすべてを Javascript で書いていきます。
初めてアプリ開発に挑戦する人向けに進めて行きますので、まったく知識がなくても大丈夫です。
Figma を使ったUIデザインの基本も盛り込みました。
まさにアプリ開発のオールインワン講座となっています。
この講座では Expo を使用します。
Expo を採用することで、開発環境の構築とリリース作業が大幅に簡略化されました。
開発環境の構築とリリース作業は、初学者がつまづきやすいステップの代表例ですので、特に丁寧に解説しています。
また、開発現場には欠かせない Git や Github も取り入れ、実際の開発プロセスに近付けていますので、
これから開発の仕事に関わりたいと思っている方にも最適です。
主な機能
シンプルながら、基本的な機能を網羅したメモアプリを作成します。
メモはクラウド上に保存され、端末を変更してもアプリ利用を継続することができます。
会員登録(メールアドレスとパスワードで登録)
ログイン・ログアウト
リアルタイムデータベース(作成、編集、削除、一覧、詳細)
ナビゲーション(画面から画面への移動)
主に使用する技術
React, React Native
React Hooks, Function Component
React Navigation
Expo
Javascript
ESLint
Firebase Authentication
Cloud Firestore
Figma (UI Design)
必要になる可能性がある費用
USD $99/year(App Store にアプリを公開するために Apple に毎年支払う)
USD $25(Play Store にアプリを公開するために Google に1度だけ支払う)
リリースは最終セクションにまとめていますので、公開しない方は、特に費用はかかりません。
ーーーーーーー
この講座は、2021年と2023年に再収録のリニューアルを実施しています。
そのため、コース後半にはリニューアル前の動画が残っています。リニューアル公開時に受講されていた方が困らないための措置ですが、コース紹介ページには収録時間が合計して表示されていること予めご了承下さい。