2024年1月振り返り

今年からできる限り毎月末に振り返りをしていきたいと思います!
はじめまして、オンラインスクールでWebプログラムを学習中のとぴと申します。
私の自己紹介はまたいずれします。多分。


今月やったこと

毎日レポート書いてるのでそちらを見ながら列挙していきます。

オンラインスクールカリキュラム

  • 基礎ステップ終了

  • 中間試験終了

  • Rails応用

アプリ関連

  • ミニアプリ「ひとときアルバム」リリース

  • ミニアプリ「Sweet Spot!」β版リリース

Udemy

読書

  • 世界一流のエンジニアの思考法 第1章~第2章

  • オブジェクト指向設計実践ガイド(導入部分)

その他

  • Railsチュートリアル第1章~第2章

  • GitLabを触ってみる

  • Bitbucketを触ってみる

  • 自分リリースノート作成

  • Zennに記事投稿

こうしてみるといろんなことやったんだなぁとしみじみ思います。
いくつかピックアップして振り返ります。

カリキュラムで応用編に突入

スクールのカリキュラムは、入門⇨基礎⇨応用⇨発展 / アプリ開発 の順番で進んでいきます。
12/2に入学し現在既に応用編に突入できたのはかなり速いスピードだと自負してます。とはいえ、1日に学習に使える時間がたくさんあるのと、プログラム初心者ではないのでこのスピードなのは自分の中では納得です。働きながら、家事育児しながら、プログラム初心者ながら、今まさに学ぼうとしている方には脱帽です。本当にすごい。
元々速く進めていた理由は「体調崩して手つかずになったときに余裕がほしい」からでした。来月以降の予定にも載せますが、2月からカリキュラムはほぼストップすると思われるので速く進めていてよかったなと思います。

UdemyでモダンJavaScriptを学習

カリキュラムはRuby on RailsがメインなのでモダンJavaScriptは別途学習する必要がありました。
Vueを自力でやろうとして挫折してしまい、どうしようかと悩んでいたところでスクールの先輩が「Reactいいよ」とLT会を開いていました。そのLT会でUdemyの講座を紹介されていたのをきっかけに、Udemyでの学習を始めました。
やりはじめるとこれがまた楽しく、React、Next.jsに触れそれぞれアプリを作りました。Reactの方は講座内容をちょっとアレンジしたTODOアプリで、こちらは12月に公開しました。そしてNext.jsのアプリは後ほどのアプリについてで触れるのでこちらでは割愛します。
動画教材やりにくそう…と思ってました。ただ、コピペが難しいときが多いので自分で打ちながらできた点はとても良いと思いました。難点は、写すのに必死になりがちなところ。そして「タイトルに最新とあるけど実際は最新じゃない」ということもあり、先立ってある程度調べておかないといざ手元でやろうとしたら勝手が違うこともままあります。その辺は動画じゃなくてもそうではありますね…。

自分リリースノート作成

スクールの卒業生から「自分リリースノート良いよ」とアジャイル勉強法の記事を紹介していただきました。

これを見ながら自分リリースノートということでGitHub Projectを作りました。

「1年後になりたい自分」を見据えつつ、どちらかというと「この1年でやりたいこと」がほとんどになりました。内容がだいぶフロント寄りになってしまっているのはちょっと反省。素早く開発できるのがRailsの強みでもあるので、Railsでのアプリ制作も増やしていきたいです。

ミニアプリリリース

振り返り最後はミニアプリについてです。
1月では2つのミニアプリをリリースしました。両方ともCGM系です。

ひとときアルバム

テーマ「START」をもとに1週間程度で開発した掲示板アプリです。

https://hitotoki-album.onrender.com/

※イベントのために作成したため、現在はアプリの軽量化を外しています。
「START」を「始まり、初めて」と発想し「お子さんの初めてを投稿する写真投稿アプリ」を開発しました。
内容自体はカリキュラムの基礎ステップの途中までで作成しており、所々アレンジを加えてオリジナリティを出しています。

技術スタック
・Ruby on Rails
・jQuery
・Sentory
・Render.com
・PostgreSQL

アレンジしたこと
・画像投稿時に即座にプレビューに反映
・アバター実装(こちらも画像を即座にプレビュー)
・CSSは手打ち(自分で打ったほうが早かったため)
・メニューはスマホ / タブレットだと下に表示

反省点
・ページネーションがない
・レスポンシブ対応のメニューはログアウトが右下なので誤タップしそう
・レスポンシブ対応は1024のブレークポイントのみ
・いいね機能がない

こんな感じです。CSSの手打ちは新しくFWを学ぶ余裕がなかったので、「自分で作ったほうが早いな…」とゴリ押しました。
この反省点を次のアプリに活かしています。

Sweet Spot!

本日リリースしたばかり、できたてほやほやです。
バレンタインが近いので、「みんなのおすすめチョコ知りたい!!」というなかなか自己満足なアプリ。

リリースはβ版を銘打っております。まだ未実装のところがあるからです。
このアプリは元になったものがなく、0から作りました。

技術スタック
・Next.js14
・Tailwind CSS
・Swiper
・Vercel
・Supabase
・fierbase Authentication

力を入れたところ
・レスポンシブでタブレットも対応
・Google認証をつかいたくfirebaseをつかったが、DBはRDBやりたくてSupabaseを利用。そのあたりの連携。

前回の反省を生かしたところ
・スマホのメニューは前回と変わらないが、ログアウトの誤タップを防ぐためマイページのハンバーガーメニュー内に実装
・ページネーション追加
・いいね機能追加
・極力レスポンシブ対応

未実装
・編集
・アカウント削除
・ブクマ機能

反省点
・レスポンシブ対応はウィンドウサイズを元に付与するクラス名を変更しているが、タグの構成が同じならTailwind CSSのレスポンシブのやつ(smとかmdとか)を使うべきだった。
・Next.jsを使ってるのに大部分がCSRで、SSRやISGを全く活かせていない
・Google認証とユーザーデータのDBが別管理なので紐づけがちょっと大変。もっとスマートなやり方あったはず。
・単純にコードが汚い。
・TypeScriptの理解に繋がったかが不明。
・Next.jsのApp RouterとPage Routerがごっちゃになってしまっている。

反省点しか無いな……。
反省点はだいたい技術的な話なので、作ったからこそ分かるものだなと。
ということで

リファクタリングで気にしたいところ
・そもそもISGがよく分かってないのでそこを重点的に学ぶ
・SSRでできるところはSSRに移行
・レスポンシブ対応でウィンドウサイズを取得する処理を排除。Tailwind CSSで極力対応する。
・App RouterとPage Routerの違いとはっきりさせ、実装を統一する
・DBとの連携がとてつもなく汚いのでキレイキレイする。
・N+1問題発生してないか確認
・Analyticsちゃんと導入する

正直CSRがほとんどなのだからReactで良くね?と大変思います。
ただReactの公式ドキュメントで「なるべくFW使おうね!」とあったので使ってみたという理由も割とあります。
VercelはNext.js公式が推してたのもあり使ってみましたが、特に動作が重くなることもないのでオススメです。

総評

毎日何かしら学習して、毎日記録残して、Zennも初投稿できたので良い1ヶ月だったのではないでしょうか。
この調子で月1ミニアプリリリースしてみたいところですが、来月はその余裕がおそらくないので月1ではなく2ヶ月に1回位のペースにしようかなとゆるく考えてます。
反省点を次回に活かして作成することで、ポートフォリオは特に良いものができるのではないかと未来の自分に期待しています。

2月の目標

チーム開発やる
この1つで絞ります。あまりあれこれ詰めるとチームメンバーに申し訳ないので、まず最優先はチーム開発にします。
あれこれやりたいことはありますよ?あるんですけど、それは趣味と休憩の気持ちで取り組むことにします。
イラストレーターは「仕事絵の休憩に趣味絵描く」事があると言いますが、それと同じです。「仕事プログラミングの休憩に趣味プログラミング」ってことです。
趣味プログラミングの目標はRailsでミニアプリ作ることかな……

終わり

今月もお疲れ様でした。
来月も良い振り返りができるよう精進します。
それでは👋

この記事が参加している募集

この記事が気に入ったらサポートをしてみませんか?