🐘 2022/05/23-2022/05/29 今週の積み上げ
react typescript figma
作成日： 2022/05/29
2

Todo リストを作りながら Typescript と React を触ってみよう ~Typescript 入門~

YouTube 動画見本

https://youtu.be/ANcopd8Bmao

  • Tailwind CSS でレイアウト調整[5/23]
  • デプロイしました[5/23]

Tailwind CSS を使ってみての所感

  • あらかじめコンポーネントが用意されている chakra UI や Material UI とは異なり、ある程度、スタイルを組み合わせて調整が必要。
  • ::before や::after 要素、:checked + label 等の調整が難しい。
  • class 名が多く細かいカスタマイズが可能。でも、class 付与することでスタイルを調整していくので、どうしても長くなってしまいがち。

React と TypeScript を使って　かんたんな電卓アプリを作る

YouTube 動画見本

https://youtu.be/YbsBQbqxy1I
https://youtu.be/SeCNgYA3Ns4

  • sass の導入[5/24]

  • component の作成[5/25]

  • イベントやロジック部分のファイル作成[5/25]

  • 数字を押した場合のイベント作成[5/25]

  • 各イベントの作成[5/26]

  • sass のベースを作成[5/26]

  • ボタン部分の型設定[5/27]

  • Figmaで大枠のデザインを作成[5/27]

  • スタイルの調整やボタンの並び替え[5/28]

  • 乗算、除算のイベント追加、スタイルの調整[5/29]

今週一番の学び

Figmaの操作の仕方について学んだので、Figmaで大枠のデザインを作成してみました。
普段はベースの色だけ決めれば、あとは作成しているうちにレイアウトを組めるだろうと甘いこと思っていました。組んでいるうちにグリッドのルールが崩れたり、決めた色が合わなかったりすることも多かったです。

Figmaで作成してみてデザインの重要性に改めて気づきました。結局のところ、大枠のデザインを作成して組んでいったほうが早くて、事前にレイアウトを確認できるので、整っているように感じます。

デザインツールの操作は苦手意識があったとしても、ちゃんと作成したほうがいいなと思いました。

React Native, Firebase, Expo でアプリ開発をゼロから始めよう！

セクション 5: 4. スタイリングの練習

    1. スタイルシートの基本[5/23 済]
    1. HTML 要素をスタイリングする[5/23 済]
    1. 複雑なスタイリング[5/23 済]
    1. ボタンのスタイリング[5/24 済]

セクション 6: 5. プログラミングの練習

    1. プログラミングの基本[5/24 済]
    1. 関数の基本[5/24 済]
    1. 演算子の基本[5/24 済]
    1. 条件分岐[5/24 済]
    1. 繰り返し処理[5/24 済]
    1. 練習[5/24 済]

セクション 7: Git と Github

    1. Git と Github のメリット[5/25 済]
    1. Git のインストールと Github のアカウント作成[5/25 済]
    1. Windows / Terminal と Git のインストール[5/25 済]
    1. Windows のコマンド[5/25 済]
    1. ターミナルでの操作[5/25 済]
    1. Git の初期化[5/25 済]
    1. Git の設定を変更する[5/25 済]
    1. Git で変更履歴を追加してみる[5/25 済]
    1. SSH Key に関する注意事項[5/26 済]
    1. SSH を使った Github との連携[5/26 済]
    1. Windows / Git の初初期化から Github との連携まで[5/26 済]
    1. テキスト版教材[5/26 済]

セクション 8: アプリ開発の環境構築

    1. Expo とは[5/26 済]
    1. M1 Mac をお使いの方へ[5/26 済]
    1. Node.js のインストール[5/27 済]
    1. Expo のインストール[5/28 済]
    1. Xcode のインストール[5/28 済]
    1. M1 Mac での Android Emulator[5/28 済]
    1. Android Studio のインストール[5/29 済]

（補助教材）【Udemy】【世界で 7 万人が受講】Understanding TypeScript 日本語版

セクション 6: 高度な型

  • 小テスト 7: 高度な型[5/23 済]
    1. 役に立つ資料 & リンク[5/23 済]

セクション 7: Generics（ジェネリクス）

    1. イントロダクション[5/23 済]

YouTube React 関連動画視聴
s.yoshiii