ちいくさ日記

基本に立ち返り、rubyのnewメソッド、initializeメソッドについて復習がてら記事を書いてアウトプット。
アウトプットをしてこなかったためこれからどんどんしていきたい。

勉強時間：7時間

交流会に出たため勉強時間は少なくなったがそれ以上に得るものがあった1日だった

## 🎨 モバイルファーストレスポンシブUI/UX改善

### 📋 概要
Railsアプリケーションのヘッダーとボトムナビゲーションをモバイルファーストでレスポンシブ化し、ユーザー体験を向上させました。

### ✨ 主な変更内容

#### 1. iOS風ダークモードトグルスイッチの実装
- **技術選定**: Alpine.jsではなくStimulus.jsを採用（Hotwireとの親和性を考慮）
- スムーズなアニメーション付きトグルスイッチ
- `localStorage`を使用したテーマ設定の永続化
- レスポンシブ対応でスライダー移動距離を画面サイズに応じて自動調整

#### 2. フローティングヘッダーの実装
- 固定ヘッダーによるナビゲーションアクセスの向上
- モバイルで約40%縮小、PC画面では通常サイズで表示
- ダークモード対応の配色設計

#### 3. ボトムナビゲーションの強化
- **現在ページの自動強調表示機能**: `current_page?`ヘルパーで現在位置を視覚的に明示
- レスポンシブ対応（高さ: h-10→h-16、アイコン: text-lg→text-2xl）
- アイコンのみのミニマルデザインで画面領域を最適化

#### 4. レスポンシブデザインの最適化
- **モバイルファースト設計**: 基本サイズをモバイル向けに設定し、`sm:`ブレークポイントでPC向けに拡大
- ログイン/ログアウトボタンをグラデーション丸ボタン化（文字削除でスペース節約）
- 一貫したレスポンシブクラスの適用

### 🛠 技術スタック
- **フロントエンド**: Stimulus.js (Hotwire), Tailwind CSS
- **設計**: モバイルファーストレスポンシブデザイン
- **状態管理**: localStorage (クライアントサイド)

### 📱 レスポンシブ対応の詳細
| 要素 | モバイル | PC (≥640px) |
|------|---------|-------------|
| ヘッダー高さ | py-2 | py-4 |
| トグルスイッチ | w-9 h-5 | w-11 h-6 |
| ロゴアイコン | h-7 w-7 | h-10 w-10 |
| ボトムナビ高さ | h-10 | h-16 |

### 🎯 UX改善ポイント
- スマホでの片手操作を考慮したUI縮小化
- 現在ページの視覚的フィードバック（青色強調 + font-bold）
- ダークモード対応による視認性向上
- アニメーションによる操作の気持ちよさ

### 📝 コメント
- 初心者でも理解しやすいよう、日本語コメントを充実
- Railsの規約に沿ったコード記述

[AI生成に失敗しました。しばらく時間をおいて再度お試しください。]

今日は転職活動に追われて、学習時間を確保できない日が続いた。
時間のやりくりに追われるとつい考え込みがちになるが、頭の中であれこれ悩むより、まずは行動に移すことを意識して過ごしたい。
小さな一歩を積み重ねることで、焦らずに前に進めるようにしていく。
今はとりあえず、明日もできる範囲の動きを具体的に決めて動いていくことを心掛けたい。

起きるのが遅くてあまり進まなかった

明日でキャッチアップ期間として設けていただいた期間が終わります。
一旦設計がまだ完了していないようなので、簡単な設計をやらせてもらえるようです。
はやく実装したい。
プライム案件の受託系なので、プロジェクトの立ち上げレベルの上流から下流まで携われて、めっちゃメリット感じますねー。
「ここが整ってないから、実装始まったら大変になるんじゃない？
」みたいな話とか、「インフラ構築のここをやってます。
」みたな話を聞けて、ほほーんてなってます。
スケジュール的にはパツパツらしいですが、いったん今はみんな残業１時間前後で終わってて穏やかです。

勉強時間：9時間

天気予報の実装 をした、ほかにもダークモードとGoogleFitのAPI連携をClaudeCodeにお願したが、ClaudeCodeの実力のすごさに圧倒された
コーディングだけするプログラマーが不要といわれるのも納得

## 概要
天気予報カードのUI改善と位置情報APIの精度向上を実施しました。

## 変更内容

### 位置情報APIの改善
- **ipapi.co → ip-api.com に変更**
- より正確な位置情報データベースを使用
- レート制限が緩い（45リクエスト/分）
- 日本語対応のレスポンス
- 詳細なデバッグログを追加
- **修正対象の問題**: IP 14.13.xx.xx.（広島県）がポートランドと誤認識される問題を解決

### 天気予報カードのUI改善
- **グラデーションの調整**
- 白味を抑えた濃い青色のグラデーションに変更（sky-600 → blue-700 → indigo-800）
- Tailwind safelistに新しいグラデーションカラーを追加

- **ヘッダーのシンプル化**
- 「天気予報」タイトルとアイコンを削除
- 位置情報のみを中央揃えで表示

- **アニメーション追加**
- 天気アイコンに`animate-bounce-slow`を追加
- ユーザーの視線を引きつける効果

### レイアウト改善
- 天気予報カードとランキングカードを2カラムで横並びに配置
- 両カードにホバーエフェクトを適用

Rails基礎４　i18nによる日本語化対応の実装
プルリク出すとこまではできたが、ログインボタンの表示でエラーが出てしまった。
今日のところはバイトが入っていたので完遂できなかった。悔しい！！
開発者ツールの見方がわからなくて苦労したので、その部分も深掘りたい。

Ruby入門3章なんとか終わった
つらい

導入STEPのはじめてのデータベース・SQLを学んだ。
INSERT・UPDATE・DELETEはデータに変更が入るので、業務においては承認プロセスを経てヒューマンエラーを起こさないように対処しないといけないと感じた。
カリキュラム後半の複雑なデータを取得する方法に詰まりなくできるようにSQL30本ノックもやっていきたい。

・今日はらんてくんに頼り切りになってしまった（その分サクサク進んだ（当社比））
・pryデバッガーが起動している状態だと、サーバーの処理が一時停止してサイト起動しなくなる...？
・明日の交流会楽しみ

ねむい

Rubyでのアルゴリズムを考えることが、だいぶできるようになってきた。
最近は手を動かしてコードを書く時間を増やし、問題を分解して解決策を組み立てる感覚が掴めてきた気がする。
論理的思考力を上げていきたいとの思いが強く、小さな課題を積み重ねながら、条件や境界を丁寧に考える練習を続けていくつもりだ。
今日も一つ一つのステップを確認し、なぜその解決が正しいのかを自分の言葉で説明できるように心がけたい。

勉強時間：8時間？

サーバー障害でいろいろと学習の効率が悪くなったため、積んでた漫画を消化して早めに就寝した。たまにはこんな日があっていい。

## 概要
散歩記録CRUD機能を実装　散歩記録に歩数と消費カロリーのフィールドを追加し、Google Fit連携を強化しました。

## 変更内容
散歩記録CRUD機能を実装
- Walkモデルを作成し、Userモデルとの関連付けを設定
- 散歩記録の一覧、作成、詳細、編集、削除機能を実装
- レスポンシブデザインに対応したビューを作成
- ボトムナビゲーションに散歩記録へのリンクを追加
- フローティングボタンから新規作成ページに遷移できるように変更
- Walkモデルに`steps`（歩数）と`calories_burned`（消費カロリー）カラムを追加
- 散歩記録フォームに歩数と消費カロリーの入力フィールドを追加（任意項目）
- 一覧画面と詳細画面に歩数と消費カロリーを表示
- Google Fit連携で歩数と消費カロリーを自動入力する機能を追加
- バリデーションを修正（距離、時間、歩数、消費カロリーを任意項目に変更）
- フォーム送信エラーを修正（日付フィールドの`value`属性を削除し、コントローラーでデフォルト値を設定）

今日は導入STEPのインターネット/Webの仕組みが完了した。
これで基本の土台が整ったと実感でき、今後はカリキュラムをどんどん進めていきたい気持ちが高まっている。
次のステップも具体的にイメージしつつ、引き続き着実に取り組んでいこうと思う。

今日の学習を振り返ると、6時間の学習時間＋試行錯誤を含めると8時間相当の取り組みとなり、Ruby入門の2章までを着実に進めました。
課題を通じて得られた知識として、文字列の扱い方（ダブルクォートとシングルクォートの使い分け、式展開の使いどころ）、変数を「値を入れたり変更したりできる名前付きの箱」として理解できたことが大きな収穫です。
具体的には、name = "太郎"、age = 25 という形で箱を作り、後で中身を取り出して使える点を再確認できました。
式展開については、ダブルクォートの中で #{ } を用いて変数や計算結果を埋め込む方法と、文字列連結での書き方の違いを体感しました。
実例として、puts "私の名前は#{name}で、#{age}歳です" や、price と quantity を使った「合計金額は#{price * quantity}円です」のような動的な文字列生成が理解でき、計算結果を自動的に文字列へ組み込む感覚を掴めました。
今後は、式展開の利便性を活かしつつ、エッジケースや長い文章での読みやすさを意識した記述練習を進め、より複雑な文字列操作にも挑戦していきたいです。
以上の理解を基に、次の学習では2章の応用と、実務で使えるサンプルコードの作成に取り組む意欲を高めています。

今日はRails基礎3を終えて、4に着手した。
12月7日に72期限定のオフラインもくもく会を計画することになり、具体的な日程感が少しずつ固まっていくのを感じる。
朝活もくもく会は今回も参加でき、起きることができたのは小さな達成感だった。
平日6時30分のラジオ体操参加も検討しており、朝早く起きるのは時間の有効活用につながると改めて実感している。
今後は、学習の進捗と計画の両方を丁寧に整えながら、無理なく続けていきたい。

11/18
##### 【今日の振り返り】
- その他学習内容や技術記事など：
- 学んだこと：

##### 【今日のタスク】
- [ ] Rails応用7

##### 【明日のタスク】
- [ ] Rails応用7

**【その他】**
- 今日は色んな意味でヘビーな1日でした、、なのでカリキュラムはお休みです

今日は9時出社。
8:30まで寝ても間に合う余裕があるのは、フルリモの恩恵にあやかりすぎているせいかもしれませんね。
昨日は楽しくなって夜遅くまで実装してしまったのですが、それでもしっかり眠れてハッピーです。
今日はGrappelliの調査とDjangoの管理画面のキャッチアップを進めました。
本当に、一個アプリを作ろう作ろうと思いながらアイデアが湧かず今に至っていますが、やはり作った方がキャッチアップは早い気がしますね。

ログイン機能を作ろう
セッション管理・ルーティング周りの学習をしたが、少しイメージがしにくかった。

とりあえず、resource/resourcesの使い分けを行うことでルーティング設定がしやすいということは実装フェーズを進めていて感じた。

ルーティングについて、ブラウザから受け取ったリクエストに応じてコントローラーにどんなアクションをしてほしいか提示して捌く受付係のようなイメージ

ログイン機能を作るにあたっての流れがつかみにくかった。

ルーティング設定して、コントローラーのアクションを定義して、modelを立ち上げてマイグレーションファイルを作りデータベースを作って、viewを編集しつなげていく。

こんなイメージであっているだろうか。
次の課題でまた機能作成をするだろうから再度流れを確認していきたい。

学習時間：２ｈ