ご褒美と目標を登録・管理・共有ができるサービス『GifTreat』をリリースいたしました！
はじめに
この度、ご褒美設定サービス『GifTreat』をリリースしました。 『努力できた自分を褒める機会がない問題を解決するために作った、自分にご褒美をあげたい人向けのサービス』となります。 この記事では本サービスの説明や工夫点、開発を通して感じたこと（嬉しかった点や苦労した点）などを記載いたします。
サービスURL giftreat.jp
目次
自己紹介
簡単な自己紹介をいたします。Suzukiと申します。ソフトウェアエンジニアになるべくRailsチュートリアルやRubyの資格試験（Silver / Gold）などで勉強をしていましたが、独学の限界を感じていました。そんな時に知人のエンジニアに紹介され、2024年8月からフィヨルドブートキャンプというプログラミングスクールに入会いたしました。 bootcamp.fjord.jp
GifTreatの紹介
概要
GifTreat は努力できた自分を褒めたい人向けのサービスです。
- ご褒美と目標を登録できます。
- 個人利用だけでなく、招待機能で友人・家族とご褒美を共有できます。
- 進捗状況を共有し、お互いに応援する機能（いいね・応援ボタン）があります。
使い方
ご褒美と目標を登録する
アカウント登録後、まずはご褒美と目標を登録します。『開催日』に登録したご褒美を受け取り、この日までに達成したい目標を登録します。
進捗率の更新をする
登録した目標の進捗率を忘れずに更新します。スライダーで更新することも可能です。
忘れずに自分をご褒美をあげる
登録した開催日には忘れずに努力出来た自分を褒めてあげましょう。もちろん、目標が達成済みであるとなお良いですが、未達成であった場合でもご褒美をあげましょう。自己肯定感を高めてあげることが大切です。
友人・家族を招待する
GifTreatは個人利用だけでなく、友人・家族を『共通のご褒美』に招待することができます。ご褒美だけ共有し、目標は各個人で設定します。お互いの目標と進捗状況を見ることができるので、いいねや応援をして励まし合い、共通のご褒美に向けて頑張りましょう。
技術スタック
- バックエンド
- Ruby 3.4.1
- Ruby on Rails 7.2.2.1
- フロントエンド
- Hotwire
- Bootstrap
- データベース
- テスト
- Minitest
- CI
- GitHub Actions
- デプロイ
- Render
- Supabase
開発を通して工夫したところ
BootstrapとHotwireの利用
シンプルなデザインのサービスとなるよう、できる限り画面遷移を少なくし、１つのページで編集画面や招待画面を表示可能とする為に、Bootstrapを用いてモーダルウインドウでの画面表示をしています。また、編集した内容について、都度画面遷移で更新をさせるのではなく、リアルタイムで更新されるようにHotwireのTurbo Stream機能を用いています。これにより、編集内容やいいね・応援機能がページ全体のリダイレクトをせずに動的に更新され、スムーズな操作感となりました。
招待機能
本サービスは個人での利用はもちろんできますが、共通のご褒美イベントを設定して複数人での利用をして欲しいと考えております。複数人で目標と進捗状況を共有し合うことはモチベーションアップに繋がるため、招待機能は本サービスの重要な機能です。
開発当初は、招待機能はメールでの実装を検討していました。しかし、プライベートではメール以外のSNS（LINE / X / Discordなど）によるコミュニケーションが主であることを踏まえて、招待用のURLを設定し、招待用URLでアクセスしたユーザーが招待される仕様にしました。私も友人・家族とのやり取りでメールを使うことはまずなく（そもそもメールアドレスを知らないなんてこともある）、相手によって異なるSNSを利用してコミュニケーションしているので、利便性が増したのではないかと思っております。
テスト駆動開発
『テストが書いてあるかどうかがプロとアマの違い』ということもあり、自作サービスにおいては意識してテストを書きました。テストが書いてあったことでデザインを変更した時に機能の漏れができてしまったことに気づけたり、リファクタリング過程でコントローラやモデルの修正をした時に修正内容に問題がないことを確認でき、身をもってテストの重要性を理解することができました。
今後は自作サービスとは比較にならないくらい開発規模の大きいプロジェクトにも携わることがあると思いますので、『より重要性の高い機能を理解してテストを書く』ことができるようになり、また、今回はMinitestでの実装をしたため、RSpecについての学習をしたいと考えております。
開発を通して嬉しかったところ、苦労したところ
Renderでのデプロイ
フィヨルドブートキャンプに入会する前に自学でRailsチュートリアルを実施しておりました。その中でRenderを利用して作ったサンプルアプリケーションをデプロイする項目があります。書いてある通りにやってみたのですが、当時は何をやっているのかがさっぱり分からず思った通りにデプロイすることができない、調べてみてもやっぱりできない、と非常に悔しかったことを覚えております。その時の悔しさを払拭すべく今回はRenderを採用し、実際にデプロイすることができ、自身のサービスがPCやスマートフォンから利用できたときは非常に嬉しかったです。
また、できれば長く運用していきたい、金銭面を理由にサービスの停止をしたくないということもあり、無料でデータベースとストレージの利用ができるSupabaseを採用いたしました。Supabaseについては参考記事が少なく、ストレージの利用ができるまで時間がかかり苦労しましたが、その分嬉しさもあります。
レスポンシブデザイン対応
開発当初はデザインに不慣れなこともあり、レスポンシブデザイン対応を考慮せずに実装を進めていました。しかし、週１の自作サービスの進捗報告会においてご相談をしたところ『昨今はモバイルファーストという言葉があるくらい、スマートフォン対応は必須だから頑張ってみよう。』とアドバイスを頂き、開発途中からレスポンシブデザイン対応を行いました。別のブログ記事でも書いたのですが、レスポンシブデザイン対応前にスマートフォンから見たところデザインが崩れに崩れており、とても悲しい気持ちになりました。また、PCでは思い描いたデザインで表示されているのにスマートフォンだと上手く表示することができず、デザインを実装する難しさとは別の苦労がありました。結局それまでに実装していたデザインはほぼほぼ作り直しとなったことを覚えております。
ですが、スマートフォンで思い描いたデザインとなっている自分のサービスを見ることができたことは、最終的に苦労よりも嬉しさが勝りました。また、何度も試行錯誤を重ねたことでBootstrapへの理解を深めることができたと思います。もしこれから自作サービスを作るフィヨルドブートキャンプ生の方が読んでいらっしゃるのであれば、是非ともレスポンシブデザイン対応にも取り組んでいただければと思います。
Hotwireの実装
工夫したところにも挙げましたHotwireについては0からのスタートで非常に苦労しました。『猫でもわかるHotwire入門 Turbo編』は私のような初学者でも分かりやすく、参考になりましたので、もしこれからHotwireでの実装を考えていらっしゃる方は読んでみることをおすすめいたします。 zenn.dev
このサービスを作ろうと思ったきっかけ
フィヨルドブートキャンプに取り組んでいく大変さ
これは本記事の最初にご紹介した通り『努力できた自分を褒める機会がない』ことがきっかけでした。フィヨルドブートキャンプをご存知の方でしたらわかると思いますが、私のようなソフトウェアエンジニア未経験者にとって、全てのプラクティスが難しいものばかりでした。もちろん、フィヨルドブートキャンプ内にて多数の現役ソフトウェアエンジニアの方々によってサポートはして頂けるのですが、『正解を教えるのはなく、正解にたどり着くための次の一手を提示し、理解へと導くよう努める』と銘打っている通り、あくまでも自走力を鍛えながら理解をしていく方針となっております。ですので、他のプログラミングスクールに比べて難易度も高く、卒業までの時間も多く必要になります。（もちろんその分だけ勉強にもなったと思います。）
プログラム経験が全くない人の場合、1,200時間くらいかかる方が多いです。
私自身、フィヨルドブートキャンプに入会してから既に1,200時間勉強していました。
努力が実を結ばず気持ちだけが焦る
日々努力はしていても中々実を結ばないようなことは多々あると思います。フィヨルドブートキャンプで勉強をしている私がまさにそういう状況でした。気持ちが付いてこないと、どうしても集中力が落ちて悪いサイクルに入ってしまいます。ただ、何もしていない訳ではなく、努力はできているのです。そんな中で『努力できていることは認めてあげたい。自分を褒め自己肯定感を高め、もっと頑張りたい。』というのがこのサービスを作るきっかけになりました。
自分を褒める機会を作る
『褒める』というのはどんなことでもいいです。例えば、『○○に新しいラーメン屋が出来たらしいから××月△△日に食べに行く』みたいな些細なことでも良いと思っています。大事なのは『□□という努力が出来たから自分を褒めてあげた！』ということを認識し、自己肯定感を高めていくことです。そのため、『努力を記録できる （＝振り返ることができる）』と『自分へのご褒美を設定できる（＝忘れずに自己肯定感を高める）』ができるサービスを作成しました。
今後取り組みたいこと
自作サービス全体としては、0から全て自分でやり切る、すなわちリリースには技術検証からデプロイまで複数の知識が必要であること、分からないことは調べて理解する自走力が求められました。ソフトウェアエンジニアは、これからずっと新しい知識を吸収してスキルアップをしていく必要があります。自走力をより高めることができるよう、『自分を褒めてあげて自己肯定感を高めながら』日々精進したいです。
フロントエンドとしては、BootstrapとHotwireでデザインを入れ、講師であるmachidaさんのお力添えもあり、手探り状態で何とか形にすることができました。形にすることはできましたが、まだまだ改善する部分はありますし、今回は採用を見送ったTailwindについても勉強していこうと思います。
バックエンドとしては、RubyやRailsに関しては引き続き勉強していくのはもちろん、JavaScriptについてはまだまだ勉強不足だな、と痛感しました。JavaScriptについても再度勉強し直し、資格試験等を通じてより理解を深めたいです。
最後に
フィヨルドブートキャンプはやり切るには大変なスクールだと思います。『本当にやり切れるんだろうか？ソフトウェアエンジニアになる目標は無謀だったのだろうか？』と挫けそうになることが何度もありました。ですが、komagataさん、machidaさん、他のメンターの方々の手厚いサポートや他受講生の頑張りを見ることができる（可視化されている）こともあり、何とかここまでやり切ることができたと思います。私一人だけでは達成できなかったことだと思いますので改めて御礼申し上げます。まだまだソフトウェアエンジニアとしてはスキルも経験も不足しているため、フィヨルドブートキャンプで得ることができた『自走力』を忘れずに日々精進していきたいと思います。
近況報告と思考の整理
フィヨルドブートキャンプの最難関（？）課題である『チーム開発』と『自作Webサービス』に日夜追われていてずっとブログ記事を書けていなかった。まだ終わった訳ではないのだが、レビュー待ちなどの時間が出て来たので、自分の思考を整理するためにも書いてみる。
近況報告
25/1/Eで退職（1月は有給消化）したので、ほぼ1日中フィヨルドブートキャンプに取り組んでいた。学習時間を振り返ってみると2月はほぼ毎日6h以上は自作サービスの課題をやっていたと思う。
（まだ終わっていないが）自作サービス作りは非常に面白く、そして非常に大変だった。特に苦労したのは『デザイン部分』だ。機能の実装についてはプラクティスの課題などで少しでも触ったことのあったのだが、デザイン部分については『ゴールが見えない』『どうしてこうなるのかが分からない。（＝手探り状態がずっと続いている）』が自分の中であり、苦しい部分が多かった。
- ただ、一番喜びが大きかったのも『デザイン部分』だ。手探り状態で進めていて公式ドキュメントや参考記事を読んだり、自分で実際に考えながら作業した際に『思い描いていた画面が目の前に表示される』というのが明確だった。丸１日悩んでいたことが解決した時は本当に嬉しかったことを思い出す。
- 特に一番嬉しかったのは『レスポンシブデザイン対応』だ。最初の頃はスマホ対応のことなど全く考えておらず、スマホで見たときに画面レイアウトが崩れてしまっていて使い物にならなかったのは凄く悲しかった。そこからPCでもタブレットでもスマホでもそれぞれにあったレイアウトが表示されるところまで修正を重ねていくことは非常に時間がかかったが、達成感も大きい。元々は自分が使いたくて考えた自作サービスなので、スマホでもそれが見られる時は感動した。
思考の整理：雑多な感想
- この２ヶ月間、自分は本当に心の余裕がなかった（今もだが）と思う。余裕がない状態でそれを埋めるためにフィヨルドブートキャンプに打ち込んでいたのだと思う。だから余計に、『空いた時間が出来たり進捗が作れない状況になると落ち着かない』のだろう。ただ、余裕がないことは何も悪いことばかりではない。これは自分が好きな漫画からの引用だ。
- 目標達成の期限を決めなければ成功か失敗かの判定を無限に先送りすることができる。（省略）これを『足踏み』と言います。
- 『足踏み』をする暇が無かった。目の前の問題や自分の能力の足りなさを先送りにする『余裕』が無かったんだ。（ワールドトリガー 28巻）
- これを見たのはそれこそ3/Bで、余裕がなく焦っている自分に響いた。まだフィヨルドブートキャンプを卒業できた訳でもなく、目標とするエンジニア転職を成し遂げた訳ではないのだが、この感覚（成し遂げたい目標を期限を決めて掲げる）は今後も忘れないでいきたい。
思考の整理：転職活動
- 転職活動に向けて就職相談を実施しいくつか企業を薦めて頂いたので企業研究を行っている。自分はどういう会社で働きたいのかを見直すいい機会だ。企業のHPを読んでいる中で自分がどうして転職したいという考えになったか（前職を退職したか）を思い出した。これは『アジャイル開発 ／スクラム を理解する』のプラクティスの提出物においても書いていた。以前の自分の成果物がこういった形で返ってくるのは嬉しい。
「いちばんやさしいアジャイル開発の教本」にも記載されていましたが『完成した機能の６割は使われない』というのは本当だと思います。 前職において顧客や同僚からよく言われた言葉で『何のためのこのソフトウェア機能が既設仕様にあるのかは分からないし、実際に使ってはいないのだが、何かあった時に使うかもしれないし、機能がなくなった時にどうなるかも分からないから、今回の更新でも使えるようにしておいてほしい』というものでした。 私個人としては実際のオペレーションとあっていないソフトウェアを残す必要は薄く、それを保守管理（ソフトウェア、ドキュメント等）していくコストはムダではないか？と思っていたのですが、どうしても営業時の契約を優先しなくてはいけないことが多く、誰も得をしないソフトウェアの更新・保守作業を行い、ムダ工数がチーム全体に蔓延していました。（自分の提出物より）
- まさにこれだった。この気持ちを忘れないで企業研究を進めようと思う。まだまだ目標までの道のりは長いが頑張らないと。
Ruby on RailsでのWebセキュリティについて勉強したメモ
- フィヨルドブートキャンプでRuby on Railsを用いたWebセキュリティの勉強をしたので備忘録を残します。 （※レビューにおいて「違う方法でやってね」と、ご指摘を頂いた内容だけピックアップして書いたので、プラクティスそのままの参考にはなりません。）
XSS対策
XSSとは
- ユーザが注入した何らかのコードがアプリケーションに保存され、それが標的ユーザのWebページ上に表示されたときにコードが実行されてしまうこと。
cookieを盗み出したり、セッションハイジャック、偽のWebサイトへ誘導するなどの被害が起きてしまう。
Railsでの対策
- Railsではデフォルトでエスケープ処理機能が組み込まれている。こちらを利用する。
- ただし、このままだとユーザの入力した改行入力（
\n）もエスケープ処理されてしまい、ユーザの入力した内容を表示する時に改行が反映されなくなってしまう。CSSでの改行表示
- 以下のような設定をcssへ追加することで改行表示を行う。
.blog-content { white-space: pre-wrap; }
white-space: pre-wrappre-wrap連続するホワイトスペースはそのまま残されます。 行の折り返しは、改行文字や
<br>要素のあるときか、行ボックスを埋めるのに必要なときに行います。
<div class="blog-content"> <%= blog.content %> </div>
カスタムバリデーション
問題設定
- 開発者ツールで直接
hiddenパラメータを追加するとrandom_eyecatch（有料機能）が変更可能となっている - 入力内容：
<input type="hidden" name="blog[random_eyecatch]" value="1">
モデルでのバリデーションチェックを実施する
モデルでカスタムバリデーションを定義する
- Active Record バリデーション - Railsガイド
- カスタムバリデーションの命名において、定義したメソッドがバリデーションであることを明確にする命名にすべき。
validate_やmust_など
バリデーションの定義
class Blog < ApplicationRecord # カスタムバリデーションメソッドの定義 def validate_random_eycatch_equal_premium return if user.premium # premiumユーザであればOKなので早期return errors.add(:random_eyecatch) if random_eyecatch end end
errors.add(:random_eyecatch)- バリデーションエラーに対して
random_eyecatchというエラーを追加 random_eyecatchフィールドに関するエラーメッセージがerrorsコレクションに追加される。
- バリデーションエラーに対して
- カスタムバリデーションメソッドの呼び出し
validateクラスメソッドにカスタムバリデーションメソッド名を指すシンボルを渡す
class Blog < ApplicationRecord # 追加 validate :validate_random_eycatch_equal_premium, on: %i[create update] def validate_random_eyecatch_equal_premium return if user.premium errors.add(:random_eyecatch) if random_eyecatch end end
on:オプションBlogモデルの指定のアクションのときだけバリデーションチェックを行うようにするon: %i[create update]で createとupdateアクションだけをチェック
- 通常ユーザが有料機能を挿入しようとした場合にバリデーションエラーとなる。
おわりに
- 勉強した内容を忘れないようにこれからもブログに残すように心がけたいです。
自分の勉強方法について
勉強方法
ブログを更新しようと思い、技術的なことを書くのも良いと思ったのですが、まずは自分がやっているおすすめ（？）の勉強方法をまとめてみました。 読まれた方でこういうのも良いよ！があれば是非とも教えてください。
使うもの
- Notion：メモをまとめるのに非常に便利。Markdown記法で書けるのでおすすめ。
- ChatGpt：調べるのはもちろんだが、今回は作成した資料の添削が便利。
- その他資料：有識者のサイトや技術本等々…。ここは各々の部分であるため割愛。
Notionについて
- Notionはページ管理やMarkdown記法が使えるので後ほど読み返しやすい。
自分はフィヨルドブートキャンプを主として勉強しているので、プラクティスの項目ごとに分けている。
- 大項目ごとに分けつつ、各ページ内では目次をつけられるので後から見返しやすい。
流れ
今回はReactのプラクティスの勉強メモを紹介する。まずは調べたこと、自分の理解をNotionに記載していく。 実際のコードを記載しながらまとめていくのが良いと思う。
作成した内容をそのままコピーし、ChatGptへ貼り付ける。ここで説明資料を作ったからレビューして欲しい。を伝える。
そうすると改善点や誤字脱字チェック、改善後の資料を返してくれる。勿論、全てが正しい情報ではないので精査する必要はあるのだが、0からChatGptに資料を作らせるよりは自分の勉強したい部分をまとめてくれるので見返し易い。
- 後は返された内容を踏まえて、最終的なメモを残していく。作業しながら行えば復習にもなるのでおすすめだ。
これまでとこれから
自己紹介
はじめまして。suzukiです。簡単に自己紹介をします。
基本スペック
- 年齢：30代
- 性別：男
- 趣味：インドア趣味全般、アニメ・ゲームなど。以前はバイク（中型）も乗っていた。
なんでブログを始めたの？
- 2024/8/6からフィヨルドブートキャンプというオンラインのみのプログラミングスクールをやっていましたが、諸事情により時間を確保出来るようになったので、アウトプットや文章化の練習も兼ねて始めました。とりあえず、の１記事目です。 bootcamp.fjord.jp
これまで
- 前職ではプログラミングは本当に極まれに触る程度で、学生時代の演習で触ったり卒論で触ったりしただけで全くの未経験です。
- フィヨルドブートキャンプを知ったのは先輩からの紹介で、前職で異動をきっかけにソフトウェアを少し触りだしてから意外と面白いかも？となったのがきっかけでした。そこから本格的にエンジニアを目指すべく勉強しています。
- 24/12/25時点での進捗状況です。今はJavascriptとReactに凄く苦労しています(笑)。Rubyって面白いし分かりやすいなって（初学者ながら）一層思うようになりましたね。スッキリしているように感じるし、何より直感的に書けるのが好みです。
