やること

いきなりデザインナーが作ったUIを実装してと頼まれる、、、
ほんまにいきなりやなあ。
ざっくりどこにでもあるメンバーの一覧とかみれたり検索できたりするやつ。
とりあえずReactでやりますか。

git環境

mac proでpushとかやっていたのに、謎にpullできないというトラブル。
結局公開鍵を自分のアカウントに登録すれば解決。
あれ？前できていたよなあ？
ちなみにgitで使用している認証は公開鍵認証。
公開鍵と秘密鍵をペアで作って、公開鍵をサーバへ渡しておく。
認証時に秘密鍵で暗号化したものは渡しておいた公開鍵で復号できるから、その人だよねってわかるっていう仕組み。

macだとユーザーディレクトリの.sshにあるid_rsa.pubが公開鍵。catなんかで出力してコピペでgitに登録してあげればOK。

react環境構築

早速react環境を作りましょー。

create-react-app

を使ってあげれば超簡単にreact環境ができるよねfacebookさんありがとう。
ただ、ここで沼にハマった。
何かのトラブルでディレクトリに不足があった。(あとで気付く)
通常のディレクトリ構成だとすぐにnpm startでローカルサーバが立ち上がるが、エラーとなる。
ファッ！？！？
しかも、gitにpushしてしまったから最悪だわ、、、
何回かやり直したら、通常のディレクトリのものができた。
何が原因なのか？？ネットワークトラブル？？？？
とりあえず、それらのファイルをgitで管理している方にコピペして解決。

reactでのcss

reactでcssを使うにはcss moduleを使ってあげればok
詳しくは以下参照
https://kapu-kapu.hatenablog.com/entry/2018/11/19/132655

create-react-appでのimgのパスについて

通常通り、imgのsrcにファイルのディレクトリ構成の相対パスを書いてもどーも画像が表示されない。
なんでだろうと調べたところ、create-react-app公式にやり方が書いていました。
要は、画像ファイルもモジュールとして読み込みましょうねってこと。
https://create-react-app.dev/docs/adding-images-fonts-and-files/

コンポーネントを横に並べたいが、一段ずれる

display: flexを使えばうまくいけた
https://mamewaza.com/support/blog/howto-use-flex.html

初めてのデザイナーとのMTG

いやー、やっぱり細かいところによく気づく。
こういうところが気になって仕方がない人もいるのよねえ。気になって使ってもらえないのが一番最悪。
自分は細かいところは気にならないタイプだから、何か作る時には必ずそーゆう人の意見を聞くようにしよう。