CODE BASEのハッカソンに初参加した感想

aratai

はじめに

この記事はCODE BASE OKINAWA Advent Calendar 2022の22日目の記事になります（投稿が遅れてしまいましたが…）。

アドカレへの初投稿となります。というより、このような形で記事を投稿すること自体初めてとなります。アウトプットをサボり過ぎですね。。。来月からエンジニアとして働くため、これから積極的にアウトプットしていこうと思います。

軽く自己紹介

CODEBASE11期生の新垣泰志と申します。
沖縄県職員として公務員をやっていましたが、ハングリー精神をこじらせ、渇ききってしまったため、プログラミングを学びエンジニアへの転職を決意しました。
スクール卒業後は、仕事の忙しさと育児もあり、CODEBASEのコミュニティになかなか参加できず愚直に独学で学んでいました。
これでは学習効果が低く転職には及ばないと感じたため、なんとか時間を捻出し、CODEBASEの卒業生向けイベントなどに積極的に参加するようにしました。
今回の記事は、その卒業生向けのイベントである1000時間プロジェクト（R4/5月~7月）で行われたハッカソンに参加した際の振り返り記事となります。

ハッカソンに参加した感想

まず結論を申し上げると、ハッカソンは絶対に参加した方がいい！
と感じました。
理由は以下の通りです。

  1. チームでの開発体験ができる

  2. 最終日に発表があり、アウトプットを前提としているため学習効果が高い

  3. 自分の実力と課題が明確になる

  4. エンジニアを目指して頑張っている仲間ができる


ハッカソンで開発したAppの詳細

  • App：タスク管理Webアプリ

  • プログラミング言語：Ruby

  • フレームワーク：Ruby on Rails

  • 開発環境：VSCode（devcontainer）、Docker、Gitなど

（機能要件）

  • サインアップ、ログイン機能

  • タスク作成（チェックボックスのチェック有無で完了・未了を切り替えできる）

  • タスクリスト作成（タスクをグループ化できる）

  • コメント機能（タスクへコメントができる）

※他にもありましたが、失念してしまいました。我がチームが達成できたのは上記になります。

ハマったポイント

私は上記の「タスク作成（チェックボックスのチェック有無で完了・未了を切り替えできる）」の実装を担当しておりました。
完成のイメージはこんな感じです。

タスク作成機能のイメージ

作成されたタスクにチェックを入れると、「終了済み」にタスクが移動します。
チェックを入れると、closedカラム（tasksテーブル）の真偽値（boolean）が切り替わり、チェック済みに表示を変えるという内容でした。

tasksテーブル

結果的にこの機能の実装だけで私の初ハッカソンは終わってしまいました…
チェックボックスをチェックするだけでデータをPOST送信する方法が分からず、既存の知識でロジックを考え、コードを書いては消しの繰り返しでエラーが出まくり、頭が発火ソンしそうでした。

解決へのプロセスと反省

初めは、「jQueryの.prop()メソッドでHTML要素の属性（checkedの状態）を取得して〜」というような思考をしており、色々ググってはコードを書きまくっていました。
自力解決が困難だっため、講師陣や他のチームの参加メンバーへ質問し、色々ヒントを得ました。決して答えは示さず、考え方のヒントをうまく提供してもらいました。感謝しております。
その結果、jQueryの$.post()メソッドへ辿り着きました。チェックボックスがチェックされた際にtaskのparams[:id]を取得し、.post()メソッドでcontrollerへ送信。controllerのupdateアクションでモデルを操作し、closedカラムのtrue,falseを切り替えることに成功しました。
結局、ハッカソンの3日間ずっとJavaScriptと苦戦し終了してしまいました。Railsを理解することがメインテーマだったのに…泣

今回のハッカソンで得た教訓は、手を動かす前に実装したい機能についてロジックを熟考し、それを実現できるメソッドの有無などを調べるべきだったという事です。
$.post()メソッドを知っていさえすれば、3日間JavaScriptと苦戦することもなかったでしょう。RailsのMVC機能をたくさん触れていたかもしれません。
自分がこの機能を実装するために、知識がどれくらい足りていないのか、どんな知識を収集する必要があるのか等を認知した上で、手を動かすことで時間を無駄にしないで済む事を学びました。メタ認知が重要ですね。

# show.html.erbに書いたjQueryのコード

<script type="text/javascript">
    $(function() {
        $("input[type=checkbox]").on("click", function() {
            $.post('/tasks/update', {id: $(this).data('id')});
        });
    });
</script>
# tasks_controller.rbに書いたupdateアクション

def update
  task = Task.find(params[:id])
  task.closed = !task.closed
  task.save
  task_list_id = task.task_list_id
  redirect_to("/task_lists/#{task_list_id}")
end
# routes.rb　pathとアクションの対応

post "/tasks/update", to: "tasks#update"

終わりに

今月いっぱいで公務員を退職し、来月から合同会社春秋の一員としてエンジニアデビューさせていただきます。自分の最大のパフォーマンスを発揮し、お誘いいただいた、さぼさんとJURIさんのご恩に報いたい所存でございます。
エンジニアとしてヒヨッコであるため精進し続けます。次回は技術的な記事の投稿にチャレンジしたいと思います。

私と同じように、現状を良くするためにプログラミングを学んでいる渇き気味の方へ伝えたい事は、CODEBASEの勉強会やハッカソンなど、オフラインイベントには積極的に参加し現役エンジニアの皆様とコミュニケーションをとることが、効率的にプログラミングの技術を向上させる近道だと思うという事です。一緒に頑張りましょう！


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