ちいくさ日記

# 今日やったこと
面接の回答を考えた！
greenに登録してみた！
イベント「深夜交流会」の作成！
ESの更新！
卒制アプリゲストログイン機能の実装（途中）

# 今日理解できたこと
- ゲストログインについてguestカラムを追加して実装、もしくは１つDBのカラムを追加して共通で使い回す方式があること！ポモドーロタイマーと浄化タイマーにおいて同じアカウントでこれら2つの画面にアクセスできない制限があるため、今回はguestカラムを追加して実装することにした！
- 削除においては通常、非同期の定期削除で行うこと！今回の場合は非同期処理を導入しないため、操作が1時間なくて経過後のゲストアカウントのみ、次のゲストアカウントログイン後に同期的に削除することにした！
# まだ理解できていないこと

# 次にやること
卒制アプリゲストログイン機能の実装の続き
面接の回答を考える！
イベントのスライド作成！
# 感想など
明日も頑張っていきたい！

# 今日やったこと
- Rails基礎 掲示板一覧の残りと掲示板作成 自動レビュー課題前まで

# 理解できたこと
- `<%= l board.created_at, format: :short %>`の頭の`l`が誤記じゃなかったこと。しかも｜じゃなくてLだった。

# 理解できてないこと
- `board-controller.rb`のcreateアクション周りが急に複雑になってきてこんがらがら…

# 感想
ちゃんと睡眠をとって、真っ当に進めていきたい…

# 今日やったこと
■ Reactマスター
　└10. Reactアプリ開発 : タスク詳細ページ作成

- /tasks/:idのルーティングとタスク詳細ページを作成
- URLのタスクIDを使ってモックデータから該当タスクを取得・表示
- ステータスのラベルと優先度のスタイルを決める関数を共通化
- 画面が真っ白になるエラーを調査・修正(前回のTaskと全く同じ種類のエラーだった)

# 今日理解できたこと
- /tasks/:idの:idはURLごとに変わる値で、useParamsを使って取得できる
- 取得したIDをgetTaskByIdに渡し、見つかったタスクをstateに保存すると詳細画面に反映される
- IDやタスクは取得できない場合もあるため、TypeScriptの型と存在チェックを使って扱う
- TaskDetailContainerがデータ取得とstate管理を担当し、TaskDetailがpropsで受け取ったデータを表示する
- getPriorityClassとgetStatusLabelを共通関数に切り出すと、一覧と詳細で同じ処理を再利用できる
- Priorityは実行時に存在する値ではなくTypeScriptの型なので、import typeで読み込む

# まだ理解できていないこと
流れは終えているが、型の設定やコンポーネント分割を自力で１から組み立てるのはまだ難しい。
教材に載ったコードが「ファイル全文」なのか「変更箇所の抜粋」なのかすぐに見分けられない

# 次にやること
■ Reactマスター
　└11. Reactアプリ開発 : タスク作成機能

# 感想など
TaskDetail.tsxの掲載コードを全文だと思って書き換え、必要な部分まで消し去ってしまった。コマンドですぐ戻してゆっくり確認して正しい箇所のみ対応した。
これまでのチャプターにあった「（省略）」などの目印が突然なくなるとは思わず…（泣）
閉じタグだけでなく、元の画面の機能がちゃんと残るかも確認しますちゃんと😐

修正後、また画面が真っ白だったけど、前回同様Console確認→priority.tsで型のPriorityを通常の値としてimportしてることでのエラーだったから、import typeへ変更して解消できた
型のimportはtype。型のimportはtype。型のimportはtype

・就活シートのWILL・MUST記入
・就活のため、企業探していたが、地方で未経験はやはり難しい

# 今日やったこと
聞き流し用の教材ダウンロード

# 今日理解できたこと
思ったよりインプット多くない！？

# まだ理解できていないこと
これをどれくらいで回せるか

# 次にやること
通勤時間に聞き流し

# 感想など
ちいさいことをこつこつと！

# 今日やったこと
■ Reactマスター
　└9. Reactアプリ開発 : タスク一覧ページ作成

- タスク一覧ページと`/tasks`のルーティング作成
- タスクデータの型定義
- モックデータの作成
- タスク一覧データを取得する関数の作成
- Container／Presentationalパターンによるコンポーネント分割
- useState・useEffectを使ったデータ取得と状態管理
- CSS Modulesによるタスク一覧・タスクカードの装飾
- TypeScript・CSS Modulesに関するエラーの調査と修正

# 今日理解できたこと
タスク一覧は以下の流れで画面に表示される

```
mockTasks
↓
getTasksで取得
↓
useEffectで初回表示時に実行
↓
setTasksでstateに保存
↓
tasks.mapで1件ずつ取り出す
↓
TaskCardへpropsで渡して表示
```

- useState<Task[]>([])➡️Task型のデータだけを格納できる配列のstateを定義してる
- useEffect(..., [])➡️コンポーネントの初回表示後にgetTasksを実行
- 取得したデータをsetTasksでstateに保存→再レンダリングされて一覧に反映される
- tasks.mapを使って、複数のタスクからTaskCardを繰り返し生成できる
- <TaskCard key={task.id} task={task} / >➡️各タスクをpropsとしてTaskCardへ渡している
- keyには各要素を識別できる一意なidを指定する

**TypeScriptの型定義**
- Task型によってタスクが持つプロパティと各データの型を定義できる
- Priorityを"high" | "medium" | "low"というリテラル型にすると、それ以外の値が入ることを防げる
- mockTasks: Task[]とすることで、モックデータの構造も型チェックできる
- Promise<Task[]>は、非同期処理の結果としてTask型の配列を返すことを表す
- dueDate・createdAt・updatedAtは、今回は文字列として扱っている
- ビルド成功＝ブラウザでも正常に動くとは限らない

**CSS Modulesと表示の切り替え**
- CSS Modulesでは、styles.containerのようにクラスを指定する
- クラス名の影響範囲が限定されるため、ほかのコンポーネントとの名前衝突を防げる
- 三項演算子を利用すると、タスクの状態に応じてクラスや表示内容を変更できる
- getPriorityClassは優先度に応じたクラスを返す
- getStatusLabelはstatusの真偽値に応じて「完了」「未完了」を返す

# まだ理解できていないこと
- 各ファイルの役割とデータが表示される大まかな流れは理解できたが、何もを見ずに 型定義・非同期処理・state管理・コンポーネント分割を一から組み立てることはできない。

- TypeScriptの型情報がJavaScriptへの変換時にどう削除されるかとか、tsconfig.app.jsonの各設定がViteの処理にどう影響するかとかが、まだ十分に理解できていない。

# 次にやること
■ Reactマスター
　└ タスク詳細ページの作成

# 感想など
途中で画面が真っ白になって、カリキュラム内の「画面が真っ白で何も表示されない場合」の対応をとってもエラーが解消できなかったので、こちらの頭も真っ白になった。

```
モジュール '../styles/TaskListContainer.module.css'
またはそれに対応する型宣言が見つかりません
```

- ファイルの配置とimportパスを確認➡️問題なし
- tsconfig.app.jsonに "types": ["vite/client"]追加しViteの型定義を読み込み
- エラー出ていたのがなくなってビルドは成功したけど、ブラウザは真っ白な画面のまま
- Consoleを確認➡️TaskやPriorityを実行時の値として読み込もうとしているエラー
- カリキュラムに記載されてた対応だけでは解消しなかったため型のimportだと明示するように変更

⭐️**TaskとPriorityはTypeScriptの型で、JavaScriptへの変換後には存在しない**
⭐️**そのため、import typeを使って型チェック専用のimportであると明示する必要があった**

予定外のエラーは焦るけど、verbatimModuleSyntax: falseにするより、`import type`と明示する方が、**「これは型である」というコードの意図も分かりやすく、設定にも依存しにくい対応** という学びもえられてよかった^^

# 今日やったこと
ミニアプリの実装（フラッシュメッセージ（トースト）の共通部品）
# 今日理解できたこと
昨日のNext.jsで理解したこと
app/(auth)/layout.tsx の中身はapp/layout.tsxに入ること
```
/login を開いたときの実際の構造

app/layout.tsx
└── <html><body>
<AuthProvider>
<SiteHeader />
<div className="flex flex-1 flex-col">
│
└── app/(auth)/layout.tsx ← ここに入る
└── <main className="flex flex-1 items-center justify-center">
<div className="... カード ...">
│
└── app/(auth)/login/page.tsx ← さらにここに入る
<h1>ログイン</h1>
<form>...</form>
</div>
</main>
</div>
<SiteFooter />
</AuthProvider>
</body></html>

```
また、(auth)とディレクトリの名称を括弧書きにすると、ルートに表示されなくなること
ログイン画面の場合、auth/loginではなく/loginとなること

フラッシュメッセージ（トースト）の共通部品において、XSS対策のCSPの設定が必要になるため、react-hot-toastやsoonerなどのライブラリを用いずに（後で設定が面倒になるよう）自前で作成することにした！

- aria-atomic、aria-aliveについて学んだ（長くなるため、詳細は省略）

# まだ理解できていないこと

# 次にやること
面接の回答を考える！
# 感想など
明日は就活対策をやりたい

・JavaScript、データベース、Ruby小テスト実施。
・小テストで、抽象的なゴールから実装を考えていたらしく、余計なコードが入っていたらしい。
用意されている要素でどう操作するかを考える

# 今日やったこと
来週からのスケジュール調整
課題の進行

# 今日理解できたこと
今週体調不良でRUNTEQが思うようにできず、それによって自分を責めてしまうことが多くあった。
少しの時間でもいいから継続できるような仕組みづくり。毎日通勤の時間だけでもインプットに使うなど、隙間時間を活用していきたい。

# まだ理解できていないこと

# 次にやること

# 感想など
月末月初を乗り越えたんだもの。これから頑張ったらいいのさ。
明日からもう一度仕切り直して気持ちを入れ替える。

学習時間：2時間

今日理解できたこと
WezTerm ＝ 建物
tmux ＝ 建物の中の部屋分け
Neovim ＝ コードを書く机
Docker ＝ 開発環境を動かす設備

もーちゃんの助言でlazyvimが使いやすいということなので入れようと思ったらちょう迷子に！難しい
→ Neovimにはapt版とappImage版があるということが分かった。
この二つの違いが分かってなかったのが原因で右往左往してた。

🤔 どのコマンドで入れたんだ？

LazyVimそのものをインストールする専用コマンドを打ったわけではなく、git clone でLazyVimの設定一式を ~/.config/nvim に配置したところが成立ポイント

# 1. Neovimをインストール

# 2. LazyVimを配置
git clone https://github.com/LazyVim/starter ~/.config/nvim

# 3. starterのGit情報を削除
rm -rf ~/.config/nvim/.git

# 4. 起動
nvim
ターミナルスケスケには最終的にまどかさんから教えてもらった記事でできた！

感想など
ミニアプリ作る時間なくなっちゃったけど楽しかった！

・カリキュラムのアルゴリズムの小テスト実施。
・夜勤明けは眠さと倦怠感で集中できないな

技術面談を通して色々ヒントを貰えた。
Capybaraは別のタブ、ウインドウ開かれた部分を見に行かない。これは収穫だった。自分でやった時にちゃんと移動出来てるじゃんってなっても元の画面はそのままだからエラーが出る。これはあれこれ悩んだから覚えた。
特にこれが収穫だった。

# 今日やったこと
ミニアプリの復習
面接の回答について考えた！（難しい）

# 今日理解できたこと
RUNTEQに入学してコミュニケーション能力がどのように成長したのかについて考えたが、難しかった！

# まだ理解できていないこと

# 次にやること
ミニアプリの復習
面接の回答について考える！

# 感想など
明日も頑張る！

readme

学習時間：2時間

今日やったこと
イベント
- 一緒にRailsガイドを読みません会 ？〜Viewの概要前半〜
- 「それ、ターミナルでできるよ」LT会

# 今日理解できたこと
Action Controllerは（MVCにおける）モデル層とのやりとりやデータの取得を担当し、次にAction Viewがそのデータを利用してWebリクエストに対するレスポンスのbody（本文）をレンダリング



コードを簡潔に書けるようにするためにActive Modelのto_paramメソッドやto_partial_pathメソッドを利用

Railsの命名規約に沿って、対応するコントローラーのアクション名がビューファイル名に取り入れらる。

Action Viewテンプレート

HTMLレスポンスのビルドにERB（.erb）

JSONレスポンスのビルドにJbuilder gem（.jbuilder）

XMLレスポンスのビルドにBuilder::XmlMarkup（.builder）

ERB
<% %>タグ（実行結果を出力しない）や<%= %>タグ（実行結果を出力する）でRubyコードを記述
<%# %>でコメント
<%- -%>ホワイトスペース（余白？）を取り除ける。<% %>の代用


printやputsのような通常のレンダリング関数は、ERBでは利用できない

感想など
今日はイベントざんまい！
ちいくさの作者さんのやまさかなさんやまっさんの影響でNeovimをインストールしました！
これからちょっとずつ覚えていこう！

# 今日やったこと
卒制アプリ復習
面接の回答を考えた！
# 今日理解できたこと
アプリ開発質問において、「使用した技術スタックについて説明してください。」
「インフラ構成について説明してください。」「使用しているデータベースを選んだ理由は何ですか？」について深掘りするとキリがないから、余裕があるときに回すことにする！先にWebアプリケーションについてと通常面接を優先させたい！
# まだ理解できていないこと

# 次にやること
面接の回答を考える！
ミニアプリの復習
# 感想など
明日も頑張っていきたい！

vim
ちいくさ
readme

・企業軸提出
・Findyキャリアスキル記入
・JavaScriptのDOMの小テスト続き。わからなくてもコード分解したら理解しやすかった。ロボらんてくんに問題出してもらった。