Invocation

Webエンジニアへ転職するためにオンラインプログラミングスクールHappinessChainで学んでいます。

Happiness Chain Euforia 22ヶ月目の振り返り

みなさん、こんにちは。

ryutaです!

先月の振り返りはこちらから。

ryuta-prog.hatenablog.com

暑さも少しづつ和らぎ、だいぶ秋めいてきましたね🍂

主にやったこと

  • RailsでXクローン通知機能実装
  • JSカレンダー
  • 自動テスト課題
  • Everyday Rails - RSpecによるRailsテスト入門読後ブログ執筆
  • todoリスト作成(JS)
  • 鬼滅の刃API
  • React入門(udemy)視聴
  • Reactチュートリアル
  • Reactステップアップコース(udemy)視聴

Rails Xクローンも完成し、テスト課題を経てJavaScript課題、React課題へ。(先月中からレビュー提出の合間を縫ってインプット課題、アウトプット課題を進めていたので本来のロードマップとは順序が多少前後しています)

こうやってリストアップしてみると我ながら、まあまあ進捗があったな、と思います。

ただ頑張った反動で学習時間が先月と比べて、だいぶ少なかったので(先月の半分以下)、学習時間が倍だったら進捗も倍だったのに><という欲張りな思いもあります。

とはいえ、「Rails EC課題」に取り組んでいた頃などは、あまりにも進まないため、一生EC課題が終わらないような気がしていたので、ふと「あれ?おれ今JS書いてるよ!?」と嬉しい気持ちを抱くことも多いです。

ましてや、React課題などは火星よりも遠くに感じていたので、「とうとうロードマップもここまで進んだ!」という感じで毎日の学習が本当に楽しいですね!

 

この調子で楽しみながら学習を続けていきます!!

 

7月の学習時間:54時間(先月:124時間)

総学習時間:3584時間

React(Vite)アプリをGitHub Pagesにデプロイしたメモ

React(Vite)をGitHub Pagesにデプロイした流れを、簡潔にまとめました。
必要最小限の手順だけ。

要点とハマりどころも一緒に書いておきます。

 

ゴール

リポジトリ: react_todo_list
ブランチ運用: main(ベース)+ react-todo(作業)
公開URL: https://Ryuta-prog.github.io/react_todo_list/ (リンク切れの可能性あり)

 

前提

Node.js v18+、npm、Gitが入っている
GitHubアカウントとSSH接続済み(ssh -T git@github.com が成功)

 

やったこと(ざっくり手順)

ViteでReactプロジェクト作成

  
npm create vite@latest react_todo_list -- --template react(雛形作成)
cd react_todo_list && npm install(依存インストール)
git init -b main && git add -A && git commit -m "chore: initial Vite
scaffold"(初期コミット)
git switch -c react-todo(作業ブランチ作成)
Viteのbase設定を追加(Pages用のサブパス)vite.config.js に1行追加:
`base: '/react_todo_list/',`(リポジトリ名に合わせる)
GitHub ActionsでPagesにデプロイするWorkflowを追加
.github/workflows/deploy.yml を作成(mainへのpushでビルド→Pages公開)
GitHubへpushしてPRを作成
git remote add origin git@github.com:Ryuta-prog/react_todo_list.git
git push -u origin main(設定ファイルをmainへ)
git push -u origin react-todo(作業ブランチをPR用に)

 

GitHubで react-todo → main のPRを作成してマージ
公開を確認
Actionsが成功後、数分待って公開URLを開く
https://Ryuta-prog.github.io/react_todo_list/ (リンク切れの可能性あり)

 

ポイント(今回選んだ方式)

 

デプロイは「GitHub Actions方式」

package.jsonに特別なdeployスクリプトは不要
Viteは base、デプロイは .github/workflows/deploy.yml で完結

 

よくある別方式(参考)
gh-pagesパッケージで npm run deploy(今回は採用せず)

 

ハマりどころと対処

404が出る
Settings → Pages → Source が「GitHub Actions」になっているか
mainに vite.config.js(base付き)と deploy.yml が入っているかActionsが成功してから1〜3分待つ
 

パスが崩れる
base: '/react_todo_list/' のリポジトリ名部分が合っているか確認PRの扱い
     

以上です!

「Everyday Rails - RSpecによるRailsテスト入門」を読んだ感想

先日、「Everyday Rails -RSpecによるRailsテスト入門」を読み終えたので、感想をまとめてみたいと思います。

良かったところ

実践的なアプローチ

この本の最大の魅力は、実際のプロジェクト管理アプリケーションを題材にして、段階的にテストを追加していくアプローチです。単なる理論の説明ではなく、「実際の開発現場ではこうやってテストを書くんだ」ということが肌で感じられました。

 体系的な構成

モデルスペック → コントローラスペック → システムスペック → リクエストスペックと、段階的にレベルアップしていく構成が素晴らしいです。初心者でも迷わずに進められるように配慮されています。

Factory Botの活用

テストデータの作成にFactory Botを使う方法が詳しく説明されており、実際の開発でよく使うパターンがしっかりと学べました。特にトレイトやコールバックの使い方は目から鱗でした。

DRYなテストコードの書き方

第8章の「スペックをDRYに保つ」では、サポートモジュールやletの使い方、shared_contextなど、保守しやすいテストコードを書くためのテクニックが豊富に紹介されています。

学んだこと

テストの重要性と書き方

今まで「テストは重要だとは分かっているけど、どう書けばいいかわからない」状態でしたが、この本を読んで具体的な書き方が理解できました。特に以下の点が印象的でした。

  - 1つのexampleには1つのエクスペクテーション
  - テストの説明は動詞で始める
  - 境界値テストの重要性

TDD(テスト駆動開発)の実践

  第11章では実際にTDDでプロジェクト完了機能を実装する過程が詳しく説明されており、「レッド → グリーン → リファクタ」のサイクルを体感できました。

様々なレベルのテスト

  - モデルスペック:ビジネスロジックのテスト
  - コントローラスペック:認証・認可のテスト
  - システムスペック:ユーザーの操作をシミュレート
  - リクエストスペック:APIのテスト

  それぞれの役割と使い分けが明確になりました。

メール送信やファイルアップロードのテスト

  第10章で扱われているメール送信やファイルアップロード、外部Webサービスのテストは、実際の開発でよく遭遇する場面なので大変参考になりました。

難しかったこと

  •   モックとスタブの概念

  第9章のモックとスタブは、概念的な理解が難しく、何度か読み返しました。特に「自分で管理していないコードをモック化するな」という原則は、実際の開発経験を積まないと完全に理解するのは困難だと感じました。

  •   Capybaraの詳細なAPI

システムスペックで使用するCapybaraのDSLは豊富で、どの場面でどのメソッドを使うべきかの判断が最初は難しかったです。

  •   aggregate_failuresの使いどころ

第8章で紹介されているaggregate_failuresは便利な機能ですが、いつ使うべきかの判断基準を掴むのに時間がかかりました。

まとめ

この本は、Railsでテストを書き始めたい人には本当におすすめの一冊です。理論だけでなく、実践的な内容が豊富で、読み終わる頃には自分のアプリケーションにもテストを書きたくなること間違いなしです。

今後は学んだ内容を実際のプロジェクトで活用し、より良いテストコードが書けるよう練習していきたいと思います。特にTDDのアプローチは、小さな機能から実践してみるつもりです。

継続的に学習を続けて、テスト駆動開発を身につけていきたいと思います。

Happiness Chain Euforia 21ヶ月目の振り返り

みなさん、こんにちは。

ryutaです!

先月の振り返りはこちらから。

ryuta-prog.hatenablog.com

まだまだ残暑厳しいですね。

8月は我ながらいつもにも増して頑張りました!

主にやったこと

Ruby on Railsで作るXクローン課題(先月からの続き)

  • トップページの作成
  • ユーザープロフィールページの作成
  • プロフィール編集画面
  • ツイート作成
  • ツイート詳細ページ作成
  •  いいね機能
  • リツイート
  • ユーザーフォロー
  • ブックマーク
  • メッセージ機能

かつてなく進捗があった月でした。

毎日のようにPRを提出してLGTMをいただきました。

いつも迅速に素晴らしいレビューを返してくれるメンターには感謝しかありません。

8月中にXクローン課題を終えたいと思っていたのですが、そこには少し届きませんでした。

でも、とても楽しく充実感のある月でした。

レビューが返却されるまでの合間を縫って、この後の課題のインプット、アウトプットもだいぶ進めることができたので、このまま良いテンポで進めていけたらな、と思っています!!

 

ではまた来月👋

 

 

7月の学習時間:124時間(先月:163時間45分)

総学習時間:3530時間

Happiness Chain Euforia 20ヶ月目の振り返り

みなさん、こんにちは。

ryutaです!

先月の振り返りはこちらから。

ryuta-prog.hatenablog.com

猛烈な暑さが続いていますが、皆さん体調は大丈夫ですか?

私も暑さにヘロヘロになりながらも毎日勉強に励んでいます!

先月も書いた通り、7月もXクローン課題に取り組みました。

まず、最初の関門であるサインアップ、ログイン機能実装の課題を想定以上に時間がかかりながらもなんとか突破し、次に取り組んだGitHub認証の実装の課題ではわりとスムーズにいき、珍しく一発でLGTMをいただきました!

非常に嬉しかったです。

また、認証機能はネットで日常的に使う機能だったので、こういう風に導入するのか〜と機能を作る側からの仕組みをもよく分かり、他の機能にも増して作業が楽しかったですね。

そして、3つ目の関門、トップページの実装の課題。

着々と本物のXっぽくなってきて、本当に楽しいです!

こちらの課題をなんとか7月中に終わらせてたかったのですが、なんだかんだで時間がかかり…

どうにかプルリクエストを提出して、ようやく今この月報ブログを書いています。

大変遅くなってしまいました💦💦

とはいうものの、ここまで自分にしてはまあまあ順調にきています。

Happiness Chainに入会してから今まで膨大な時間と労力を投下してきたのですが、ようやっと少しづつ学習が軌道に乗ってきたような手応えを覚えた月でした。

遅すぎますが…

以前は勉強してもしても、自分が何がわからないかもわからない状態で、まるで暗闇の中で目隠しをして進んでいる感じだったのでですが、現在は今まで学んだきたこと、経験してきた範囲であれば、かなり確信を持ってクリアに理解でき、判断できるようになってきました。

なぜ、今の状態になれたのか?と自己分析したのですが「単純に色々なことに慣れてきたのだ」という結論に至りました。

他の人達と比較しても非常に進捗が遅くて正直、苦しい時期も長かったですが「費やした時間と労力は裏切らない」という思いを強くしました。

ますます学習、作業が楽しくなってきてるので、このいい状態でさらに進んでいきたいです!

ではまた👋

 

7月の学習時間:163時間45分(先月:200時間15分)

総学習時間:3406時間

Happiness Chain Euforia 19ヶ月目の振り返り

みなさん、こんにちは。

ryutaです。

先月の振り返りはこちらから。

ryuta-prog.hatenablog.com

梅雨もあっという間に終わり、早くも夏到来ですね!

さてさて、先月のブログで(ほぼほぼ)完成状態だった「Ruby on Railsで作るECサイト」もメンターからLGTMをいただき、無事に完成しました👏👏👏

いや〜完成まで本当に長かったです。

LGTMをいただいた直後、毎週開かれているEuforiaのオンライン進歩報告会でメンターから直接「お疲れ様でした!」と言葉をかけていただき、思わず泣きそうになりました🥹

そして、現在は「Ruby on Railsで作るTwitter(X)クローン」の作成に入っています!

ECサイト完了の解放感と久々に新しい課題に触れる新鮮さが相まって、テンションが上がりました。

ちょうど、良いタイミングだと思い、いくつか新しいツールを取り入れることにしました。

情報整理のためにObsidian。

ターミナルをMacデフォルトのものからWarpへ。

エディタをVScodeからNeovimへ!

最近、非常に反省しているのが、今まで学習してくる過程で得た知識や経験をその時々で、あまり記録に残してこなかったことです。

Obsidianを友人から勧めれ、デスクトップアプリだけは、しばらく前にダウンロードしていたのですが完全に放置していました。

ようやく使い始めたのですが、こちらとても使いやすくて非常に気に入っています。

カスタマイズ性がとても強いアプリで、ユーザーの方々は各々の使いやすいように、どんどん改良しながら利用されているようです。

目下、私の場合は学習の過程で有益な情報をコピペで貼り付けたり、気になったことを軽くメモしたり、その時々の工程表のようなものを書き出したりする程度の非常にラフで超原始的な使い方しかしていないのですが、既に強力な相棒としてとても役に立ってくれています。

オススメのツールなので、気になった方は是非調べて触ってみてください。

ターミナルのWarpもしばらく前から気になっていました。

今までは素うどんみたいに味も素っ気もないターミナルをずっと使っていて、常々「ターミナルもエディタみたいに補完機能くらい使えたらいいのに…」と思っていました。

Warpは正にその願望を叶えてくれるアプリでした。

その便利さに本当に心の底から感動しましたね。

「これこそ俺の求めていたものだよ!」と。

こちらもオススメです。

そして、Neovim.…

6月の前半は課題ではなく殆ど、こいつとの格闘で終わったと言っても過言ではない程、めちゃくちゃ振り回されました。

導入した動機は効率性を求めたのもありますが、実際にはvimコンプレックスと「エンジニアっぽくてかっこいいな〜」というミーハー心が大きかったです。

vimはHappinessChainのロードマップでも学習済みだったのですが、その後あまり使用する機会もなくエンジニアたるもの常にもっと使いこなせるようにならなくては…というコンプレックスがありました。

というわけで、めっちゃ張り切って導入してみたのですが、未熟な私には十年早かったですね。

最初は基本的な操作すら覚束なかったのですが、使えば使うほど慣れていき、「あ、今の俺って超イケてね?」と悦に浸った瞬間も確かにありました。

Neovimの特徴の一つとして、カスタマイズ性の高さがあると思うのですが、これが私にとっては諸刃の剣でした。

VScodeでは新たに拡張機能を入れようと思えば、ほぼポチるだけで済んでいたところ、Neovimでは(慣れない私にとっては)そこそこ複雑なファイル構成を組んで各ファイルに自分で設定を書いていかなければならない。

まだそこまでは良かったのですが、どうしても許せなかったのが一生懸命書いた設定ファイルやコードがいつの間にか消えてしまうことでした。(完全にこちらのミスなんでしょうけど…)

結構粘って我慢して使い続けたのですが、何度も何度も同じような「いつの間にかファイルやコードが消えている現象」に遭遇して最終的にはブチ切れて、使うのを一旦諦めることにしました。

瞬間的には、ターミナルも先述のWarpからNeovimと親和性の高いWeztermに替えてみたり。

この時は本当に「この環境マジでかっこよくね?」と自己陶酔感ハンパなかったです。

(Weztermはいまだに最高にオシャレでかっこいいターミナルだと思ってます)

色々と勉強になった面も多々ありますが、限りある時間と労力を溶かしすぎました。

肝心の課題が全然進まなかったですから。

でも、いつかまたリベンジして使ってみたい気持ちもあります。

Neovimとの壮絶な闘いも終え、ようやく課題に本腰を入れ始めました。

最初の関門であるサインアップ、ログイン機能実装のPRを提出してメンターから真っ先に指摘されたことは、「ファイル数が多すぎます。GitHubに上げる必要のないファイルは.gitignoreに含めましょう」ということです。

超基本的なことを指摘されるまで気づけなかったのは本当に情けなかったですが、大きな学びになりました。

メンターの存在は大きいなと改めて感謝しています。

レビュー後、ローカルでgitを操作してなんとかPRの再提出を試みたのですが、ローカルのgit履歴が荒れまくって収集がつかなくなったのと、最初のPRで盛大にGitHub上を汚してしまってるのとで結局、一から作り直すことにしました。

ゴールが遠のいたことで結構がっかりもしたのですが、その分、学びや気づきも多かったです。

というわけで、ようやく先ほどサインアップ、ログイン機能実装PRの再提出までこぎつけ、今この文章を書いています。

7月は少しでも課題を進めたいです!

ではまた。

 

6月の学習時間:200時間15分(先月:155時間)

総学習時間:3242時間15分

Happiness Chain Euforia 18ヶ月目の振り返り

みなさん、こんにちは。

ryutaです。

先月の振り返りはこちらから。

ryuta-prog.hatenablog.com

爽やかだった5月もあっという間に過ぎ、そろそろ梅雨到来といったところでしょうか。

先月も書いたとおり、5月中になんとかRuby on Railsで作るECサイト」の最後の関門であるプロモーション課題が無事に終わりECサイト完成しました👏👏👏

と言いたいところでしたが…

惜しかったですね。この記事を書いている現時点で、あとちょっとだけ最終のリファクタリングが残っております。

超本音を言うと、正式にECサイトを完成させてから、こちらの記事を書きたくて自分なりにめっちゃ頑張って悪足掻きしたのですが、結果的には、ただこの月報ブログの執筆と提出がいつもよりも遅れただけでした💦
まぁまぁ長〜い目で見ればミクロン単位の誤差の範囲内ということで。

我が愛しのECサイト

あたかも完成したかのようなていで書こうと思います。

こんな感じで作成しました。

Ruby 3.1.4

Rails 7.0.8.7

PostgreSQL 14

・開発環境はDocker 28.0.1を使用

・本番環境はHerokuにデプロイ

・画像保存はActiveStorageを使用 保存先はAWS S3

・レイアウトはBootstrap 5.3.3を使用

・購入者情報と商品はDBに保存

・管理者用向け商品CRUD管理機能と注文履歴閲覧機能実装

・一度のみ使用可能なプロモーションコード割引機能実装(Rakeタスクで生成)

・商品購入後明細メール配信機能実装

 

 

 

 

 

 

 


 

 

 

と、こんな感じで(ほぼほぼ)完成しました🎉🎉🎉

 

いよいよ次は同じくRuby on Railsを使用するTwitter(X)クローンの作成に入っていきます。

早速ざーっと要件に目を通したところ…

 

 

 

……マジめんどくせぇ〜〜〜

超楽しそうでワクワクする\(^o^)/

雨月も思いっきり学習を楽しみます!

 

5月の学習時間:155時間(先月:132時間15分)

総学習時間:3042時間