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

by Arthur

Slide 1

Slide 1 text

技術習得を支え続けた私の個人開発ヒストリー id:arthur-1 2024-01-30 Hatena Engineer Seminar #28 1

Slide 2

Slide 2 text

Arthur と申します id:arthur-1 Mackerel開発チームアプリケーションエンジニア 2022年新卒入社（もうすぐ丸2年） 𝕏: @Arthur1__ 2

Slide 3

Slide 3 text

おしながき ● 私の個人開発の歴史と技術習得 ● 最近進めている個人開発のモダナイズの様子 3

Slide 4

Slide 4 text

9年前から振り返ります 4

Slide 5

Slide 5 text

2015〜2017年 5

Slide 6

Slide 6 text

2015〜2017年の様子学園祭実行委員会のWebサイトを内製する部署で開発をしていた cf.) 「学園祭Web開発の現場とPHPのこれまでとこれから ── 技術選定と教育から語る」 PHP Conference Japan 2023 https://speakerdeck.com/arthur1/php-conference-japan-2 023 6

Slide 7

Slide 7 text

2015〜2017年に得た技術 ● HTML・CSS ● JavaScript ● PHPを用いたサーバサイドプログラミング ● MySQL ● Webセキュリティ ● レンタルサーバの運用 7

Slide 8

Slide 8 text

2018年 8

Slide 9

Slide 9 text

2018年の様子サークルを引退して ● 組織下で開発する機会がなくなった ● サークルのサーバが利用できなくなった →VPSを借りて、個人でWebサービスの開発を始める 9

Slide 10

Slide 10 text

Twicla 授業に出席したらボタンを押すと出席時刻が記録されTwitter （現：X）でツイート自分の出席のモチベーションを高めるために作成し、他の人も使えるように仕上げた https://github.com/Arthur1/t wicla （画像がないのでイメージです） 10 出席する火曜3-4限「電磁気学」授業開始まであと3分

Slide 11

Slide 11 text

ぶらつき学生ポータル「アグリコラ」というボードゲームの戦績を記録・公開するサービス後に、このサービスに蓄積したプレイ情報を元に戦略研究本を同人誌として出した。 https://github.com/Arthur1/b uratsuki-portal 11

Slide 12

Slide 12 text

2018年に得た技術 ● git ○ この頃からソースコードは公開してた ● Bootstrapなどを用いたフロントエンド実装 ● Vue.js（サーバサイドとフロントエンドの分離） ● nginx ● Linuxサーバの運用 12

Slide 13

Slide 13 text

2019年 13

Slide 14

Slide 14 text

2019年の様子本格的にmacOSに触れ始める先ほど紹介したぶらつき学生ポータルをリニューアルした ● フレームワークをFuelPHPからLaravelに 14

Slide 15

Slide 15 text

2020年 15

Slide 16

Slide 16 text

2020年の様子新型コロナウイルスのパンデミック友人とオフラインで遊ぶ機会が失われた大学の授業もしばらくなかったので暇だった 16

Slide 17

Slide 17 text

National Economy Online 「ナショナルエコノミー」というボードゲームをオンラインで対人戦できるWebアプリ最初はこっそり身内のために作ったものだが、原作者と連絡を取り一般公開できることに https://github.com/Arthur1/n ational-economy2 17

Slide 18

Slide 18 text

リリースからの成長最初は荒削りな状態でリリースした友人などユーザの声を聞いて、後に使い勝手をよくしていった ● ログ機能の追加 ● デザインの変更 ● 不要な確認モーダルの廃止この過程で一回コードを全部書き直して式年遷宮した 18

Slide 19

Slide 19 text

現在の利用状況 ● 延べ6,000回以上遊ばれている ● このサービスで自分を知り連絡をくれた方が何人もいた ● プレイデータがたくさん集まったので戦略研究にも活かせそうだが規約を整備できていない 19

Slide 20

Slide 20 text

個人サイト就活もあるだろうな〜と思って個人で作ってきたもの・関わってきたものをまとめたWebページを公開サーバサイドプログラミングから離れて、静的なWebサイトへ回帰 20

Slide 21

Slide 21 text

2020年に得た技術 ● WebSocket ● Gatsby.js ● GitHub Pagesで静的なサイトを公開 21

Slide 22

Slide 22 text

2021年 22

Slide 23

Slide 23 text

2021年の様子引き続きコロナ禍リモートのインターンに行って業務での開発も経験 23

Slide 24

Slide 24 text

Agents Visualizer 大学のオブジェクト指向プログラミングの最終課題の問題が難しかった動作イメージを掴むために、入出力をビジュアライズするWeb アプリをシュッと作って公開 https://github.com/Arthur1/a gents-visualizer 24

Slide 25

Slide 25 text

AgricolaDB ボードゲーム「アグリコラ」のカード情報を掲載するサイト APIの提供もしており、これを元に他の人たちが別のサービスを作っていた 25 https://github.com/Arthur1/agricola-database-server https://github.com/Arthur1/agricola-database-frontend

Slide 26

Slide 26 text

一旦ここまでのまとめ 26

Slide 27

Slide 27 text

まとめこれまでしてきたことは、自分のニーズを叶えるモノを、他人も使えるようなクオリティで企画〜リリースするであった 27

Slide 28

Slide 28 text

身についた力設計力 ● 頭の中のイメージをDBやプログラムの構造としてモデリング実装力 ● 必要に応じて新しい技術を学び、それを用いて動くモノを作る 28

Slide 29

Slide 29 text

手が及ばなかったところマネタイズ ● 自らの学びのために私財を投じたモダンな運用 ● ペットを大切に育てていた ● 複数のサービスが同居していてメンテ困難 29

Slide 30

Slide 30 text

振り返り続き（はてな入社〜） 30

Slide 31

Slide 31 text

2022年 31

Slide 32

Slide 32 text

2022年の様子大学卒業→はてな入社 Mackerelチームに配属ボードゲームのための個人開発をする余裕はあまりなくなっていく社会人1年目&そもそもメンテが大変 32

Slide 33

Slide 33 text

しゃがみを決意持続的にサービスを提供するために： ● 個人開発を自分だけのものから、他の人も参画できるようにする ● toilの解消・特にインフラ周りをモダンにしたいそこで、開発ではなく環境整備を進めた 33

Slide 34

Slide 34 text

環境整備 ● ボードゲーム関連の開発はGitHubのOrgを分ける ● FaaSなどを積極的に採用し、自分の責任範囲を減らす ● IaCを採用し、再現・複製可能なインフラへ ● デプロイフローの自動化 34

Slide 35

Slide 35 text

2024年 35

Slide 36

Slide 36 text

AgricolaDBリニューアル 2021年にリリースした AgricolaDBをリニューアル。機能面はほぼ変化がないが、裏側は劇的に変わっている 36 https://github.com/AgricolaDevJP/agricoladb-server https://github.com/AgricolaDevJP/agricoladb-viewer

Slide 37

Slide 37 text

インフラ 37

Slide 38

Slide 38 text

インフラの工夫点安さと自分の責任範囲の狭さを重視した設計 ● LambdaのコンテナイメージにSQLiteのファイルを埋め込んでいる ○ マスタデータのみでほぼ変化しない ● WebページはAstroのSSGで静的に書き出したものをCloudﬂare Pagesで公開 38

Slide 39

Slide 39 text

その他工夫点 ● サーバにGraphQLを採用スキーマからコード生成して、型に頼ったコードが書ける ● 閲覧者が情報の間違いを報告できる仕組み Google FormからGitHub Issueの作成 ● テストを用意して壊れても気づけるように 39

Slide 40

Slide 40 text

はてなに入ってからの個人開発会社にいながら個人開発していると、それぞれの場で学んだ知識をもう片方にも輸出できる！ 40

Slide 41

Slide 41 text

はてな→個人開発はてなで仕事をしているうちで身につけたことを個人開発に生かした例： ● IaCによるインフラ構成の管理方法 ● サービスの監視 41

Slide 42

Slide 42 text

個人開発→はてな個人開発で身につけたことをはてなでの仕事に生かした例： ● Go言語によるWebサーバのboiler template ● GitHub Actionsの設計指針 42

Slide 43

Slide 43 text

総まとめ 43

Slide 44

Slide 44 text

まとめ今自分はMackerelの企画・開発の両面に携わって仕事している考えるだけ・作るだけでは成り立たない個人開発での経験が非常に生きていると感じる 44

Slide 45

Slide 45 text

まとめ自由に弄れる自分の庭を持ってみませんか？ ● 実践的に技術習得する実験場にできる ● さらに得た知見は業務でも生かすことができる ● 自分なりの美学を持って庭を手入れすることで、より良いサービスや設計を追求することができる 45

Slide 46

Slide 46 text

宣伝 Mackerel Drink Up #14 「アラート対応やSLI/SLO、エラーバジェットの運用を学ぼう」本日2024-01-30（火）19:00〜はてな東京オフィスにて！ https://mackerelio.connpass.com/event/307409/ 46