DAY14(2022 6/20) ~ DAY18(2022 6/24)

今週の目標

いそじの冷やし中華

DAY14(2022 6/20)

• この日から昼飯を13時に食べて、15分寝ることにした。
• 午後は眠くならなかった気がする。月曜日だからなのかもしれない。
• レイアウト変更のタスクに着手した。なんでか分からないが意外と苦戦した。
  cssでレイアウト整える系のタスクは、検証ツールでレイアウトを整えてからコードを書く方が効率良いと感じた。コードを書くたびにコンパイルを通すのが面倒なので。
• Reactの書き方は本当に自由度が高いなと感じた1日だった。人によって全く書き方が違う。。

DAY15(2022 6/21)

• 画面の大きさに応じて、横幅のレイアウトを変更できるような仕組みを作成した。
• フォームから文字列データを送ると、その文字列データが画面のある部分に反映されるような仕組みを作成した。
• 投資先が提供しているコミュニティで出会った方とラーメンを食べに行った。同じ自社開発でも、フェーズが違うとやる仕事が全然違うことを理解した。あといそじの冷やし中華が美味しすぎて感動した。代々木に行く際はもう一度行くかもしれない。

DAY16(2022 6/22)

• 画面に反映される文字列データのレイアウトを修正した。
• 変換処理が完了していない場合、別の画像を表示するような処理を作成した。
• 既に存在しているデータを元に新しいものが作れるような処理を作成した。

DAY17(2022 6/23)

• 既に存在しているデータを元に新しいものが作れるような処理の続きをした。

DAY18(2022 6/24)

• 画面に画像を追加した。webpackのコードを読み解く必要があったので、公式ドキュメントを読んだり指定て意外と時間が掛かった。

開発における気づき

• Array.prototype.findを使うことで、指定されたテスト関数に一番初めにマッチする要素を取得できる。
  

  const array = [1, 2, 3, 2];

  console.log(array.find(x => x === 2)); // => 2

• overflow: hidden; は、領域からはみ出たテキストを表示させなくする。
  

• React Playerは、さまざまなURLを再生するためのReactコンポーネントを提供しているライブラリ。
• 二重否定(!!)を使うことで、明示的にあらゆる値に対応する論理型プリミティブに変換することができる。
• webpack.config.jsonにエントリーポイントの設定方法が書いてある。
• React-Cookieを使うことで、Reactでクッキーを管理できる。
• document.headでhead要素を取得できる。
• scriptタグにasync属性をつけることで、非同期でJSファイルをダウンロード、実行できる。ダウンロード完了後、即JSファイルは実行され、実行中はHTMLパースが一時停止する。scriptタグにasync属性をつけることで、HTMLパースと並行してJSファイルをダウンロードできる。async属性をつけないとHTMLパース中にscriptタグがあったら、パースを一時停止してJSファイルのダウンロードと実行を行なってしまう。実行が完了するまでHTMLのパースは再開しない。
• 検証ツールを開いた状態でリロードのアイコンをドラッグすると、キャッシュを削除してリロードできる。cssのスタイルやJSが反映されない場合はキャッシュの削除を試してみる。
• ブラウザコンソールで上矢印を押すと、過去に実行したスクリプトをサーチできる。
• フォームタグだとエンターキーで送信できる。ajaxだとクリックしないと発火しない。formタグのonSubmitイベントに渡した関数の内部にe.preventDefaultを書くと、エンターキーを押してもリロードされなくなる。
• widthが100%以外の場合、calcをなるべく使う。width: 80%と指定すると、残りの20%のpxが一定ではなくなるので。calc(100% - 20px)とやると、残りが20pxであることが保証され、画面の大きさによって、余白のレイアウトが大きく変わったりしなくなる。
• clientWidthでDOMのwidthを取得することができる。Reactを絡めるならuseRefでDOMを取得する。
• fit-contenntを使うことで、コンテンツの幅に合わせたサイズを指定できる。
• max-widthでこれ以上大きくならない幅を指定できる。min-widthでこれ以上小さくならない幅を指定できる。
• box-sizing: 'border-box'でpaddingとborderをwidthに含めることができる。子要素がwidth100%なのに親要素を超える理由は、padddingやborder,marginに原因がある。
• よく見る記事に辿り着くまでのスピードを極限まで速くする。ブックマークしてholmesで一瞬で探せるようにしておく。キーワード検索して、多くの記事の中からよく見る記事を見つけるのは意外と時間がかかるので。
• useFormのデフォルトバリューがどうなっているのかをとことん調べてまとめる必要があると感じた。忘れやすい。
• railsコマンドやbundlerなどのコマンドを実行したいなら、Dockerホスト上に一回入る。自分のホスト上にはbundlerなどが入っていないため。
• 事例をネットで探すより、検証ツールやエラーを調べて「なんでこうなるのか？」を調べた方が早い。自分に100%あった事例が見つかるわけないので。どうしても分からんエラー(webpackやdocker-compose系)などは調べてから聞く。
• httpヘッダに対する理解がまだない気がする。通信を意識できていない。
• パーフェクトRailsを自分でやってみたい。
• ロゴはブランドイメージを確立して認知してもらうためのもの。ロゴの画像サイズを勝手に変えたりできない。
• jsxでインラインスタイルを書くことができる。
• エラーが出たら、コンパイルが通っているのかをまずは確認する。
• publicディレクトリには、静的ファイルやコンパイル済みのアセットが置かれる。このディレクトリ上にあるファイルはインターネットに公開される。
• コンパイル、トランスパイル、ビルド、API、ブレークポイント、グリッド、ここら辺の言葉の定義をもっと知りたい。あとscssの書き方を知りたい。
• webpackのDefinePluginで環境変数的なのが定義できる。
• 呼ぶ側に負担をかけない。雑に呼んでも良いようなコードを書く。
• 交差型は、共通部分って感じではなく、両方の型を持つような型が生成されている。
• Railsでルーティングを書くとき、パス = コントローラ名/アクション名となる場合、to:以下を省略できる。
• vscode内で上下にカーソルを移動させるときは、なるべく行番号で移動させる。連打するのがしんどいので。
• justify-contentで子要素のdivを真ん中寄せしたいなら、そのdivはwidthを持つ必要がある。そうしないと親要素いっぱい広がるので。
• MUIのTypographyなどのテキストを真ん中寄せしたいなら、propsのalignを使う。
• ショートカットキーでキーボードを叩く時間を極限まで減らす。
• スタイルやレイアウトを組むスピードをもっと上げる。gridやflex、cssをもっと使いこなす。
• iframeは動画サービスの動画をhtmlに埋め込みたい時に使う。videoタグは任意の動画をhtmlに埋め込みたい時に使う。
• axiosにonUploadProgressという機能がある。
• attachは、active_storage_blobを引数に取るらしい。
• active storageとは何で、どんな方法を使ってモデルとファイルを紐づけているのかをもっと深いところまで知りたいと感じた。ファイルアップロード系の機能を作るのが弱いので。
• ビジネスロジックとは、そのシステム固有の処理のこと。ビジネスロジックを分けることで、そのシステム固有の処理と、他の部分でも利用できる処理を特定できる。システム全体に変更が発生した場合でも、ビジネスロジックを分けることで、使い回しできない部分(ビジネスロジック)を変更するだけで良くなる。使い回しできる部分(uiコンポーネントなど)を見なくても良くなる。
• uiコンポーネントは使い回すコンポーネントなので、システム固有の処理(ビジネスロジック)を入れるのは、ビジネスロジックを分けれてないので良くない。変更に弱いコンポーネントになってしまう。
• docker-for-macはどういう仕組みでコンテナを動かしているのかをもっと知りたい。
• インフラ(AWS, Docker)とかwebpackのエラーが出ると太刀打ちできないのでどうにかしたい。

所感

昼飯を食べる時間(13時)を固定して食べた後に15分寝ることで、午後のパフォーマンスが良くなった気がします。眠くなったり、人のキーボード音が気になったりしなくなりました。やっぱり睡眠は大事。

以上です。6/27からの5日間も頑張ってきます！