技術習得を支え続けた私の個人開発ヒストリー / Hatena Engineer Seminar #28

私は学生時代の2018年ごろから個人開発をはじめ、社会人エンジニアとなった今でも主にボードゲームに関連したWebアプリケーションを開発・運用し続けています。こういったモノづくりの過程で様々な技術を身につけてきました。個人開発の歴史と自分のエンジニアとしての成長を振り返るとともに、最近進めている個人開発のモダナイズについてご紹介します。

Transcript

1. 技術習得を支え続けた 私の個人開発ヒストリー id:arthur-1 2024-01-30 Hatena Engineer Seminar #28 1
2. Arthur と申します id:arthur-1 Mackerel開発チーム アプリケーションエンジニア 2022年新卒入社（もうすぐ丸2年） 𝕏: @Arthur1__ 2
3. おしながき • 私の個人開発の歴史と技術習得 • 最近進めている個人開発のモダナイズの様子 3
4. 9年前から振り返ります 4
5. 2015〜2017年 5
6. 2015〜2017年の様子 学園祭実行委員会のWebサイトを内製する部署で 開発をしていた cf.) 「学園祭Web開発の現場とPHPのこれまでとこれから ── 技 術選定と教育から語る」 PHP Conference Japan 2023 https://speakerdeck.com/arthur1/php-conference-japan-2 023 6
7. 2015〜2017年に得た技術 • HTML・CSS • JavaScript • PHPを用いたサーバサイドプログラミング • MySQL • Webセキュリティ • レンタルサーバの運用 7
8. 2018年 8
9. 2018年の様子 サークルを引退して • 組織下で開発する機会がなくなった • サークルのサーバが利用できなくなった →VPSを借りて、個人でWebサービスの開発を始める 9
10. Twicla 授業に出席したらボタンを押す と出席時刻が記録されTwitter （現：X）でツイート 自分の出席のモチベーションを 高めるために作成し、他の人も 使えるように仕上げた https://github.com/Arthur1/t wicla （画像がないのでイメージです） 10 出席する 火曜3-4限「電磁気学」 授業開始まであと3分
11. ぶらつき学生ポータル 「アグリコラ」というボード ゲームの戦績を記録・公開する サービス 後に、このサービスに蓄積した プレイ情報を元に戦略研究本を 同人誌として出した。 https://github.com/Arthur1/b uratsuki-portal 11
12. 2018年に得た技術 • git ◦ この頃からソースコードは公開してた • Bootstrapなどを用いたフロントエンド実装 • Vue.js（サーバサイドとフロントエンドの分離） • nginx • Linuxサーバの運用 12
13. 2019年 13
14. 2019年の様子 本格的にmacOSに触れ始める 先ほど紹介したぶらつき学生ポータルをリ ニューアルした • フレームワークをFuelPHPからLaravelに 14
15. 2020年 15
16. 2020年の様子 新型コロナウイルスのパンデミック 友人とオフラインで遊ぶ機会が失われた 大学の授業もしばらくなかったので暇だった 16
17. National Economy Online 「ナショナルエコノミー」とい うボードゲームをオンラインで 対人戦できるWebアプリ 最初はこっそり身内のために 作ったものだが、原作者と連絡 を取り一般公開できることに https://github.com/Arthur1/n ational-economy2 17
18. リリースからの成長 最初は荒削りな状態でリリースした 友人などユーザの声を聞いて、後に使い勝手をよくし ていった • ログ機能の追加 • デザインの変更 • 不要な確認モーダルの廃止 この過程で一回コードを全部書き直して式年遷宮した 18
19. 現在の利用状況 • 延べ6,000回以上遊ばれている • このサービスで自分を知り連絡をくれた方が何 人もいた • プレイデータがたくさん集まったので戦略研究 にも活かせそうだが規約を整備できていない 19
20. 個人サイト 就活もあるだろうな〜と思って 個人で作ってきたもの・関わっ てきたものをまとめたWebペー ジを公開 サーバサイドプログラミングか ら離れて、静的なWebサイトへ 回帰 20
21. 2020年に得た技術 • WebSocket • Gatsby.js • GitHub Pagesで静的なサイトを公開 21
22. 2021年 22
23. 2021年の様子 引き続きコロナ禍 リモートのインターンに行って業務での開発も経験 23
24. Agents Visualizer 大学のオブジェクト指向プログ ラミングの最終課題の問題が難 しかった 動作イメージを掴むために、入 出力をビジュアライズするWeb アプリをシュッと作って公開 https://github.com/Arthur1/a gents-visualizer 24
25. AgricolaDB ボードゲーム「アグリコラ」の カード情報を掲載するサイト APIの提供もしており、これを 元に他の人たちが別のサービス を作っていた 25 https://github.com/Arthur1/agricola-database-server https://github.com/Arthur1/agricola-database-frontend
26. 一旦ここまでのまとめ 26
27. まとめ これまでしてきたことは、 自分のニーズを叶えるモノを、他人も使えるよ うなクオリティで企画〜リリースする であった 27
28. 身についた力 設計力 • 頭の中のイメージをDBやプログラムの構造とし てモデリング 実装力 • 必要に応じて新しい技術を学び、それを用いて 動くモノを作る 28
29. 手が及ばなかったところ マネタイズ • 自らの学びのために私財を投じた モダンな運用 • ペットを大切に育てていた • 複数のサービスが同居していてメンテ困難 29
30. 振り返り続き （はてな入社〜） 30
31. 2022年 31
32. 2022年の様子 大学卒業→はてな入社 Mackerelチームに配属 ボードゲームのための個人開発をする余裕はあ まりなくなっていく 社会人1年目&そもそもメンテが大変 32
33. しゃがみを決意 持続的にサービスを提供するために： • 個人開発を自分だけのものから、他の人も参 画できるようにする • toilの解消・特にインフラ周りをモダンにし たい そこで、開発ではなく環境整備を進めた 33
34. 環境整備 • ボードゲーム関連の開発はGitHubのOrgを分け る • FaaSなどを積極的に採用し、自分の責任範囲を 減らす • IaCを採用し、再現・複製可能なインフラへ • デプロイフローの自動化 34
35. 2024年 35
36. AgricolaDBリニューアル 2021年にリリースした AgricolaDBをリニューアル。 機能面はほぼ変化がないが、裏 側は劇的に変わっている 36 https://github.com/AgricolaDevJP/agricoladb-server https://github.com/AgricolaDevJP/agricoladb-viewer
37. インフラ 37
38. インフラの工夫点 安さと自分の責任範囲の狭さを重視した設計 • LambdaのコンテナイメージにSQLiteのファ イルを埋め込んでいる ◦ マスタデータのみでほぼ変化しない • WebページはAstroのSSGで静的に書き出し たものをCloudflare Pagesで公開 38
39. その他工夫点 • サーバにGraphQLを採用 スキーマからコード生成して、型に頼ったコードが書ける • 閲覧者が情報の間違いを報告できる仕組み Google FormからGitHub Issueの作成 • テストを用意して壊れても気づけるように 39
40. はてなに入ってからの個人開発 会社にいながら個人開発していると、それぞれ の場で学んだ知識をもう片方にも輸出できる！ 40
41. はてな→個人開発 はてなで仕事をしているうちで身につけたこと を個人開発に生かした例： • IaCによるインフラ構成の管理方法 • サービスの監視 41
42. 個人開発→はてな 個人開発で身につけたことをはてなでの仕事に 生かした例： • Go言語によるWebサーバのboiler template • GitHub Actionsの設計指針 42
43. 総まとめ 43
44. まとめ 今自分はMackerelの企画・開発の両面に携わっ て仕事している 考えるだけ・作るだけでは成り立たない個人開 発での経験が非常に生きていると感じる 44
45. まとめ 自由に弄れる自分の庭を持ってみませんか？ • 実践的に技術習得する実験場にできる • さらに得た知見は業務でも生かすことができる • 自分なりの美学を持って庭を手入れすることで、 より良いサービスや設計を追求することができる 45
46. 宣伝 Mackerel Drink Up #14 「アラート対応やSLI/SLO、エラーバジェット の運用を学ぼう」 本日2024-01-30（火）19:00〜 はてな東京オフィスにて！ https://mackerelio.connpass.com/event/307409/ 46