[{"data":1,"prerenderedAt":847},["ShallowReactive",2],{"article-2026-full-platform-development":3,"articles-[]":662,"article-toc:\u002Farticles\u002F2026\u002Ffull-platform-development\u002F":802,"article:\u002Farticles\u002F2025\u002Fmy-oss-projects\u002F":839,"article:\u002Farticles\u002F2025\u002Fhosting-storybook\u002F":841,"article:\u002Farticles\u002F2025\u002Fcloudflare-workers-cache-layer\u002F":843,"article:\u002Farticles\u002F2025\u002Fcapacitor\u002F":845},{"id":4,"title":5,"alt":5,"body":6,"category":647,"cover":648,"createDate":649,"description":650,"extension":651,"homepage":652,"meta":653,"navigation":652,"path":655,"recommend":652,"seo":656,"showCover":652,"slug":657,"stem":658,"tag":659,"updated":660,"__hash__":661},"articles\u002Farticles\u002F2026\u002Ffull-platform-development.md","2年半のフルプラットフォーム開発について全部書く",{"type":7,"value":8,"toc":607},"minimark",[9,13,16,19,24,27,31,54,57,68,71,75,78,86,89,92,99,102,105,108,111,115,118,121,124,127,133,137,140,146,152,155,158,161,164,167,170,173,179,188,195,198,201,253,256,262,265,268,271,277,281,284,289,300,303,306,310,313,316,319,323,326,330,333,337,340,343,346,349,352,355,358,361,375,379,382,385,388,391,394,397,403,406,409,412,415,426,429,432,435,438,441,444,451,454,460,463,467,470,473,477,480,486,489,492,511,514,517,520,522,525,529,532,535,539,543,546,554,557,562,565,568,571,574,577,580,583,586,589,592,595,598,601,604],[10,11,12],"p",{},"Webアプリを、全プラットフォームで配信しました。",[10,14,15],{},"Webを起点に、iOS、Android、Windows、Mac。",[10,17,18],{},"あれこれ試行錯誤していたら、2年半経っていました。",[20,21,23],"h2",{"id":22},"なにを作った","なにを作った?",[10,25,26],{},"Webアプリをたくさん作り、見込みがありそうなものをスマホ・デスクトップと、別のプラットフォームに移植していきました。",[28,29,30],"h3",{"id":30},"作ったものと実績",[32,33,34,42,48],"ul",{},[35,36,37,41],"li",{},[38,39,40],"strong",{},"Webサイト(2つ)",": 1,744,395 PV",[35,43,44,47],{},[38,45,46],{},"iOSアプリ(6つ)",": 4990 DL",[35,49,50,53],{},[38,51,52],{},"Androidアプリ(5つ)",": 221 DL",[10,55,56],{},"数字は2年半の累計のPV(ページビュー)とDL(ダウンロード)です。他にWindowsアプリとMacアプリも1つづつ作りました。",[10,58,59,60,63,64,67],{},"おまけで便利ツールを ",[38,61,62],{},"OSSプロジェクト"," として ",[38,65,66],{},"3つ"," 切り出しました。",[10,69,70],{},"作ったアプリとOSSは記事の中で詳しく紹介していきます。",[28,72,74],{"id":73},"_3700コミット","3700コミット",[10,76,77],{},"気づいたら、2年半で3,700回以上コミットしていました。",[10,79,80],{},[81,82],"img",{"src":83,"alt":84,"loading":85},"https:\u002F\u002Fimage.hirameki.dev\u002Ftakasqr\u002Fimage\u002Fupload\u002Fv1712091289\u002Fgithub.com_takasqr_hirameki-dev_wyheop.webp","github.com_takasqr_hirameki-dev_wyheop","lazy",[10,87,88],{},"プライベートなリポジトリなので、もちろんコミットの粒度は適当です。1ファイルしか更新してないようなコミットも沢山あります。",[10,90,91],{},"それでも、沢山試行錯誤してきた証にはなると思っています。",[10,93,94],{},[81,95],{"src":96,"alt":97,"loading":85,"style":98},"https:\u002F\u002Fimage.hirameki.dev\u002Ftakasqr\u002Fimage\u002Fupload\u002Fv1712091289\u002Ffull-platform-development_uysfjk.webp","full-platform-development_uysfjk","max-width: 100%; width: 460px; height: auto;",[20,100,101],{"id":101},"知見をまとめた",[10,103,104],{},"2年半経ってノウハウが大分貯まってきたので、まとめることにしました。",[10,106,107],{},"以下、目次です。とても長いです。興味のあるところから読んでもらって大丈夫です。",[109,110],"article-toc-content",{},[20,112,114],{"id":113},"_2年半で作ったもの","2年半で作ったもの",[10,116,117],{},"作ったアプリ、OSSプロジェクトを紹介していきます。",[28,119,120],{"id":120},"ポモドーロツリー",[10,122,123],{},"このアプリはタスク管理テクニックのポモドーロテクニックとTODOアプリを合体させたアプリです。",[10,125,126],{},"Web、スマホ、デスクトップ全てのプラットフォームでリリースしています。",[10,128,129],{},[81,130],{"src":131,"alt":132,"loading":85,"style":98},"https:\u002F\u002Fimage.hirameki.dev\u002Ftakasqr\u002Fimage\u002Fupload\u002Fv1712091289\u002Ffull-platform-development_0070_qdikxs.webp","my-web-app-stack_0040",[134,135],"link-card-content",{"title":120,"url":136},"https:\u002F\u002Fpomodorotree.com\u002Fja",[28,138,139],{"id":139},"ひらめき開発",[10,141,142,143],{},"ツールアプリを沢山配信しているサイトです。その中で見込みのありそうなものをスマホ・デスクトップに移植するパターンで開発していきました。",[38,144,145],{},"そうすると、Webページから自然な形でストアページに誘導できます。",[10,147,148],{},[81,149],{"src":150,"alt":151,"loading":85,"style":98},"https:\u002F\u002Fimage.hirameki.dev\u002Ftakasqr\u002Fimage\u002Fupload\u002Fv1712091289\u002Fmy-web-app-stack_0050_smyn2r.webp","my-web-app-stack_0050",[10,153,154],{},"元々は当時、興味のあった心理学(ひらめき)と、プログラミング(開発)のツールを配信するサイトでした。",[10,156,157],{},"今思うと小っ恥ずかしいネーミングです。笑\nしかも心理学のツールは全く伸びなかったので全部削除してしまいました。",[10,159,160],{},"月間のPVはピーク時で8万PVくらいでした。",[134,162],{"title":139,"url":163},"https:\u002F\u002Fhirameki.dev",[28,165,166],{"id":166},"スマホアプリ",[10,168,169],{},"上で紹介したひらめき開発で作ったWebアプリの中で数字の良かったものを、スマホアプリに移植しました。",[10,171,172],{},"クロスプラットフォームで開発するために、フレームワークはCapacitorを採用しました。そうすることでiOS、Android両対応でリリースしています。",[10,174,175],{},[81,176],{"src":177,"alt":178,"loading":85,"style":98},"https:\u002F\u002Fimage.hirameki.dev\u002Ftakasqr\u002Fimage\u002Fupload\u002Fv1712091289\u002Ffull-platform-development_0060_tcavnt.webp","full-platform-development_0060",[10,180,181],{},[182,183,187],"a",{"href":184,"rel":185},"https:\u002F\u002Fapps.apple.com\u002Fjp\u002Fdeveloper\u002Fcodedrip\u002Fid1711395162",[186],"nofollow","App Store (iOS)",[10,189,190],{},[182,191,194],{"href":192,"rel":193},"https:\u002F\u002Fplay.google.com\u002Fstore\u002Fapps\u002Fdeveloper?id=CodeDrip",[186],"Google Play (Android)",[28,196,62],{"id":197},"ossプロジェクト",[10,199,200],{},"開発していく中で作った便利ツールや共通化できるコードはOSSプロジェクトとして切り出していきました。",[32,202,203,220,230,244],{},[35,204,205,208,209,214,215],{},[38,206,207],{},"ESLint Plugin Pattern Rules",": ESLint のプラグインです。禁止ワードと必須ワードを正規表現で設定できる ",[182,210,213],{"href":211,"rel":212},"https:\u002F\u002Feslint.regexp.app\u002Fja\u002F",[186],"🌐"," ",[182,216,219],{"href":217,"rel":218},"https:\u002F\u002Fgithub.com\u002Ftakasqr\u002Feslint-plugin-regular-expression",[186],"💻 ",[35,221,222,225,226],{},[38,223,224],{},"Hono Firebase Functions",": Firebase Functions の中で Hono を使うためのアダプタ ",[182,227,219],{"href":228,"rel":229},"https:\u002F\u002Fgithub.com\u002Ftakasqr\u002Fhono-firebase-functions",[186],[35,231,232,235,236,214,240],{},[38,233,234],{},"Vanilla Vue UI",": Vue + Tailwind の UI ライブラリ ",[182,237,213],{"href":238,"rel":239},"https:\u002F\u002Fui.takasqr.dev\u002F?path=\u002Fdocs\u002Fvanilla-vue-ui--docs",[186],[182,241,219],{"href":242,"rel":243},"https:\u002F\u002Fgithub.com\u002Ftakasqr\u002Fvanilla-vue-ui",[186],[35,245,246,249,250],{},[38,247,248],{},"JapanJS",": 日本に関連する処理をツール化して詰め合わせたライブラリ ",[182,251,219],{"href":242,"rel":252},[186],[10,254,255],{},"詳しくはこちらの記事に書きました。",[257,258],"article-card-content",{"align":259,"maxWidthClass":260,"path":261},"left","max-w-xs","\u002Farticles\u002F2025\u002Fmy-oss-projects\u002F",[20,263,264],{"id":264},"アーキテクチャ",[10,266,267],{},"アプリをたくさん作るために、アプリを柔軟に開発・配信できる基盤をゼロから作りました。",[10,269,270],{},"以下はメイン部分の大まかな構成図です。",[10,272,273],{},[81,274],{"src":275,"alt":276,"loading":85,"style":98},"https:\u002F\u002Fimage.hirameki.dev\u002Ftakasqr\u002Fimage\u002Fupload\u002Fv1712091289\u002Fmy-web-app-stack_0020_r6biiy.webp","my-web-app-stack_0020",[28,278,280],{"id":279},"vueコンポーネントを使い倒す戦略","Vueコンポーネントを使い倒す戦略",[10,282,283],{},"基本的にVueでアプリケーションを作って使い倒す戦略です。",[10,285,286],{},[38,287,288],{},"採用したフレームワーク",[32,290,291,294,297],{},[35,292,293],{},"Web: Nuxt",[35,295,296],{},"スマホ: Capacitor",[35,298,299],{},"デスクトップ: Electron",[10,301,302],{},"Capacitor、ElectronもWebViewを使って描画するフレームワークなので、Vueのコンポーネントを変更することなく動かすことができました。",[10,304,305],{},"ロジック部分はTypeScriptで書いています。",[28,307,309],{"id":308},"reactでも同じことができるはず","Reactでも同じことができるはず",[10,311,312],{},"私は仕事でVueやNuxtをよく使うのでVueを使いましたが、Reactでも同じことができるはずです。",[10,314,315],{},"CapacitorもElectronもReactに対応しています。",[20,317,318],{"id":318},"コードの共通化",[28,320,322],{"id":321},"github-packagesでプライベートコードの共通化","GitHub Packagesでプライベートコードの共通化",[10,324,325],{},"公開したくないけど、共通化したいコードはGitHub Packagesから配信しています。npmでプライベートパッケージを配信しようとすると課金する必要があります。一方、GitHub Packagesは無料で始められるのでオススメです。",[28,327,329],{"id":328},"共通uiライブラリ","共通UIライブラリ",[10,331,332],{},"共通で使えるUIライブラリを作ってnpmで公開しています。",[134,334],{"title":335,"url":336},"vanilla-vue-ui - npm","https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fvanilla-vue-ui",[10,338,339],{},"また、UIコンポーネントはStorybookで管理していて、ダッシュボードを公開しています。",[134,341],{"title":342,"url":238},"Vanilla Vue UI - Docs ⋅ Storybook",[10,344,345],{},"作ったときの記事はこちら。",[257,347],{"align":259,"maxWidthClass":260,"path":348},"\u002Farticles\u002F2025\u002Fhosting-storybook\u002F",[10,350,351],{},"UIライブラリを開発するにあたっては、以前Vuetifyを使い込んでいた経験がとても役に立ちました。使いやすい汎用的なインターフェースを考えて実装しました。",[20,353,354],{"id":354},"バックエンド戦略",[28,356,357],{"id":357},"バックエンドで使用しているクラウドサービス",[10,359,360],{},"バックエンドは、興味のあるサービスや、仕事で使うサービスを勉強も兼ねて採用したので統一されていません。",[32,362,363,366,369,372],{},[35,364,365],{},"Cloudflare Workers",[35,367,368],{},"Firebase Functions",[35,370,371],{},"AWS Lambda",[35,373,374],{},"Cloud Run",[28,376,378],{"id":377},"バックエンドにhonoを使ってみる","バックエンドにHonoを使ってみる",[10,380,381],{},"バックエンドのAPIは用途によって、いくつかのサービスを使って構築しています。",[10,383,384],{},"そんな中、「NextのバックエンドにHonoを使う」という記事を読みました。Nextで出来るのであれば、Nuxtでもできるのでは?と思いやってみました。",[10,386,387],{},"HonoでAPIを作っておけば、かなり簡単にインフラサービスを移動できるので安心です。",[28,389,390],{"id":390},"キャッシュ戦略",[257,392],{"align":259,"maxWidthClass":260,"path":393},"\u002Farticles\u002F2025\u002Fcloudflare-workers-cache-layer\u002F",[20,395,396],{"id":396},"開発フロー",[10,398,399],{},[81,400],{"src":401,"alt":402,"loading":85,"style":98},"https:\u002F\u002Fimage.hirameki.dev\u002Ftakasqr\u002Fimage\u002Fupload\u002Fv1712091289\u002Fmy-web-app-stack_0010_haxrx4.webp","my-web-app-stack_0010",[28,404,405],{"id":405},"モノレポで全コードを一つのリポジトリで管理",[10,407,408],{},"基本的にコードをモノレポで管理しています。",[10,410,411],{},"モノレポとはプロジェクトに関するコードを全て一つのGitリポジトリで管理する方法です。",[10,413,414],{},"フロントエンド、バックエンド、スマホ、デスクトップの全コードと一つのGitベースで管理しています。モノレポで管理するとそのアプリに関するコードが一つにまとまっているのでコードが迷子になることがなくて便利でした。",[416,417,422],"pre",{"className":418,"code":420,"language":421},[419],"language-text","repository\n├── backend\n├── desktop\n├── frontend\n└── mobile\n","text",[423,424,420],"code",{"__ignoreMap":425},"",[10,427,428],{},"こんな感じのディレクトリ構成になります。",[28,430,431],{"id":431},"ステージング環境で確認してから本番環境へ",[10,433,434],{},"変更したコードはまず、stagingブランチにコミットします。その後、pushするとGitHub Actionsでステージング環境にデプロイされます。",[10,436,437],{},"ステージング環境で確認して問題なければ、mainブランチにマージします。そうするとまたGitHub Actionsが走って本番環境にデプロイされます。",[10,439,440],{},"必ずステージング環境を経てから本番環境にデプロイすることでバグが入り込むのをできるだけ防いでいました。",[28,442,443],{"id":443},"コードは小さく変更する",[10,445,446,447,450],{},"Gitのブランチ戦略である ",[38,448,449],{},"トランクベース開発"," を参考に、コードを小さい単位で変更しています。GitHub Actionsで自動デプロイを組むことですぐに本番環境に変更を反映します。",[10,452,453],{},"コミット履歴を確認してみると2年半で3,600回コミットしていました。モノレポなのも相まってとてもたくさんコミットしていました。",[10,455,456],{},[81,457],{"src":458,"alt":459,"loading":85,"style":98},"https:\u002F\u002Fimage.hirameki.dev\u002Ftakasqr\u002Fimage\u002Fupload\u002Fv1712091289\u002Fmy-web-app-stack_0030_k8euuu.webp","my-web-app-stack_0030",[10,461,462],{},"私は今回の開発で、このコードデリバリーの仕組みを考えるのがとても好きになりました。",[134,464],{"title":465,"url":466},"DORA | Capabilities: Trunk-based development","https:\u002F\u002Fdora.dev\u002Fcapabilities\u002Ftrunk-based-development\u002F",[10,468,469],{},"ソフトウェア開発の生産性について研究しているDORAのサイトには他にもたくさん、生産性向上のヒントが載っているのでオススメです。DORAはGoogle Cloudが母体なので信頼性の高い実用的な情報が手に入ります。",[20,471,472],{"id":472},"改善活動",[28,474,476],{"id":475},"lighthouseのスコア改善","Lighthouseのスコア改善",[10,478,479],{},"ある程度、アクセス数が増えてきてから、Lighthouseのスコア改善に取り組みました。",[10,481,482,485],{},[38,483,484],{},"アクセス数の多いページから改善していくことでコスパ良く改善していきます。"," その甲斐あって、アクセス数の多いページはさらに大きなキーワードで1位を取れるようになりました。",[10,487,488],{},"Lighthouseのスコア自体は検索順位に影響しないですが、体験が良くなった結果検索順位も向上したのだと思います。",[490,491],"twitter-widget-loader-content",{},[493,494,497,506,507],"blockquote",{"className":495},[496],"twitter-tweet",[10,498,501,502],{"lang":499,"dir":500},"ja","ltr","最近はNuxtのパフォーマンスのチューニングを頑張っています ",[182,503,505],{"href":504},"https:\u002F\u002Ft.co\u002Fqw9S6AAt7L","pic.twitter.com\u002Fqw9S6AAt7L","— かい (@takasqr) ",[182,508,510],{"href":509},"https:\u002F\u002Ftwitter.com\u002Ftakasqr\u002Fstatus\u002F1976935807836357088?ref_src=twsrc%5Etfw","October 11, 2025",[28,512,513],{"id":513},"スマホアプリ化",[10,515,516],{},"Webサイトのアプリ部分をコンポーネントに切り出して、スマホアプリにしてリリースしました。iOS、Android両方のプラットフォームでリリースしています。",[10,518,519],{},"Capacitorという、WebViewを使うタイプのフレームワークを使っています。Vueコンポーネントがスマホアプリとして動いているのは面白かったです。",[10,521,255],{},[257,523],{"align":259,"maxWidthClass":260,"path":524},"\u002Farticles\u002F2025\u002Fcapacitor\u002F",[20,526,528],{"id":527},"開発知識はzennに","開発知識はZennに",[10,530,531],{},"他にも開発する中で溜まった知見はZennに書いています。よかったら覗いてみてください。",[10,533,534],{},"確認したら記事が178本ありました。",[134,536],{"title":537,"url":538},"takasqrさんの記事一覧 | Zenn","https:\u002F\u002Fzenn.dev\u002Ftakasqr",[20,540,542],{"id":541},"うまくいかなったことやらなかったこと","うまくいかなったこと・やらなかったこと",[10,544,545],{},"うまくいかなったこと、やらなかったことも書いておきます。",[32,547,548,551],{},[35,549,550],{},"多言語対応",[35,552,553],{},"ダークモード対応",[10,555,556],{},"この2つはうまくいきませんでした。",[558,559,561],"h4",{"id":560},"_20もの言語に対応させたけどうまくいかなかった多言語対応","20もの言語に対応させたけどうまくいかなかった多言語対応",[10,563,564],{},"多言語対応は「作ってるアプリはツールアプリが大半だし、生成AIも登場して精度もすごく良くなってきているから行けるんじゃないか」と思ってやり始めました。",[10,566,567],{},"ちょうどGhatGPTが出てきて、その翻訳精度の高さが騒がれていた時です。",[10,569,570],{},"日本語から英語に翻訳して、英語からその他の言語に変換するという方法でWebアプリの多言語対応を進めていきました。",[10,572,573],{},"対応させた言語は、日本語も含めてなんと20言語。世界中のかなりの人をカバーできる数です。",[10,575,576],{},"ですが、ほとんどアクセスを集めることができずに日本語のみに戻してしまいました。定かではありませんが、やっぱり微妙に違和感がある翻訳になってしまっていたのではないかと思います。",[10,578,579],{},"また、私は英語以外の言語は全く読めないので、日本語に逆翻訳してチェックしていたのですが、調子に乗って20言語にも対応させてしまったので作業負担が大き過ぎました。",[10,581,582],{},"ただ、今ならClaude Codeなどのバイブコーディングツールもあるし、生成AIの翻訳精度もさらに向上しているので、また違った結果になるかも知れません。",[558,584,585],{"id":585},"労力の割にメリットが少ないダークモード対応",[10,587,588],{},"ダークモード対応もうまくいきませんでした。",[10,590,591],{},"これも多言語対応と同じく、労力にメリットが見合わないと感じてしまい断念しました。",[10,593,594],{},"かなりたくさん作ってしまた後に作業を始めたのが失敗でした。",[10,596,597],{},"ダークモード対応させるなら初めから対応させるべきだったと学びました。",[20,599,600],{"id":600},"色々やってみることでスキルアップに繋がる",[10,602,603],{},"2年半、完全に独学、自力でここまで色々できたことは自分の中で自信につながりました。これからも手を動かしていきたいと思います。",[10,605,606],{},"私は普段から仕事で使う技術をプライベートで遊んでみるようにしています。そうすることで躓きポイントや全体的な雰囲気を事前に知っておくことができるのでオススメです。",{"title":425,"searchDepth":608,"depth":608,"links":609},2,[610,615,616,622,626,630,635,640,644,645,646],{"id":22,"depth":608,"text":23,"children":611},[612,614],{"id":30,"depth":613,"text":30},3,{"id":73,"depth":613,"text":74},{"id":101,"depth":608,"text":101},{"id":113,"depth":608,"text":114,"children":617},[618,619,620,621],{"id":120,"depth":613,"text":120},{"id":139,"depth":613,"text":139},{"id":166,"depth":613,"text":166},{"id":197,"depth":613,"text":62},{"id":264,"depth":608,"text":264,"children":623},[624,625],{"id":279,"depth":613,"text":280},{"id":308,"depth":613,"text":309},{"id":318,"depth":608,"text":318,"children":627},[628,629],{"id":321,"depth":613,"text":322},{"id":328,"depth":613,"text":329},{"id":354,"depth":608,"text":354,"children":631},[632,633,634],{"id":357,"depth":613,"text":357},{"id":377,"depth":613,"text":378},{"id":390,"depth":613,"text":390},{"id":396,"depth":608,"text":396,"children":636},[637,638,639],{"id":405,"depth":613,"text":405},{"id":431,"depth":613,"text":431},{"id":443,"depth":613,"text":443},{"id":472,"depth":608,"text":472,"children":641},[642,643],{"id":475,"depth":613,"text":476},{"id":513,"depth":613,"text":513},{"id":527,"depth":608,"text":528},{"id":541,"depth":608,"text":542},{"id":600,"depth":608,"text":600},"other","https:\u002F\u002Fimage.hirameki.dev\u002Ftakasqr\u002Fimage\u002Fupload\u002Fl_text:MPLUS1p-Black.ttf_72_bold:フルプラットフォーム開発について全部書く,co_rgb:fff,w_720,c_fit\u002Fv1712091289\u002Ffull-platform-development_k3tihf.webp","2026\u002F04\u002F08","Webアプリを、全プラットフォームで配信しました。Webを起点に、iOS、Android、Windows、Mac。あれこれ試行錯誤していたら、2年半経っていました。。やりたかった事を一通りやり切ることができたので、こだわり部分を紹介します。","md",true,{"draft":654},"サイトの前身はWordPress + Vue\n\n## 毎日コミット\n\n## 段階的に価値を届ける\n\n## GitHub Actionsで自動デプロイ\n\n## アプリのアイデアの拾い方\n\n## アナリティクス\n\n## OGPデザイン\n\n## 開発環境 AIとの付き合い方\n\n## Nuxt\n\n## Cloud Run\n\nhttps:\u002F\u002Fdora.dev\u002F\n\n## 検索流入\n\n## SEOでわかったこと\n\n## Nuxt Contentマークダウンでコンテンツ管理\n\n## Tailwind UI\n\n> アクセス数の多いページから改善していくことでコスパ良く改善していきます。その甲斐あって、アクセス数の多いページはさらに大きなキーワードで1位を取れるようになりました。\n本当か調べる\n\nデザインシステム\n\nタイポグラフィ\nnoteなどを参考にした\n\n他にも __スマホアプリ化したり__ 、UIキットや便利ツールを __OSSに切り出したり__ しました。\n\n2年半前、人生で一番大変だった ~~追い詰められた~~ プロジェクトが終わりました。\n\n少しだけ時間に余裕ができたので、個人で運用していたWebアプリをリプレイスすることにしました。\n\nそしてあれこれ試行錯誤していたら、2年半経っていました。\n\n#### モノレポとバイブコーディングは相性が良い\n\nまた、2025年ごろからバイブコーディングが広まっていくにつれて、モノレポにしていて良かったと思うことが増えました。\n\n例えば、フロントエンドからバックエンドのAPIを呼び出す時に、バックエンドのコードを直接確認してもらいながらAIにコーディングをお願いできます。\n\n仕様を別途伝える必要がないので楽でした。\n","\u002Farticles\u002F2026\u002Ffull-platform-development",{"title":5,"description":650},"full-platform-development","articles\u002F2026\u002Ffull-platform-development",[],null,"NTVZlDniwSzQyOIARItXAjN3dzpBVVS_bTL1S64sSqY",{"items":663,"total":801},[664,668,676,682,689,697,704,712,719,729,739,746,753,762,769,777,787,794],{"_path":665,"title":5,"description":650,"cover":648,"alt":5,"category":647,"categoryBasePath":666,"tags":667,"createDate":649,"homepage":652,"recommend":652,"showCover":652,"lang":499},"\u002Farticles\u002F2026\u002Ffull-platform-development\u002F","\u002Farticles\u002Fcategory\u002Fother\u002F",[],{"_path":669,"title":670,"description":671,"cover":660,"alt":660,"category":425,"categoryBasePath":672,"tags":673,"createDate":674,"homepage":675,"recommend":675,"showCover":675,"lang":499},"\u002Farticles\u002F2026\u002Fthe-goal\u002F","『ザ・ゴール ― 企業の究極の目的とは何か』を読んだ","「ザ・ゴール ― 企業の究極の目的とは何か」を読みました。","\u002Farticles\u002Fcategory\u002F",[],"2026\u002F02\u002F10",false,{"_path":677,"title":678,"description":679,"cover":660,"alt":660,"category":425,"categoryBasePath":672,"tags":680,"createDate":681,"homepage":675,"recommend":675,"showCover":675,"lang":499},"\u002Farticles\u002F2026\u002Ftidy-first\u002F","『Tidy First? ―個人で実践する経験主義的ソフトウェア設計』を読んだ","「Tidy First? ―個人で実践する経験主義的ソフトウェア設計」を読んだ。",[],"2026\u002F01\u002F31",{"_path":524,"title":683,"description":425,"cover":684,"alt":683,"category":685,"categoryBasePath":686,"tags":687,"createDate":688,"homepage":652,"recommend":652,"showCover":652,"lang":499},"Vueでスマホアプリ開発【Capacitor】","https:\u002F\u002Fimage.hirameki.dev\u002Ftakasqr\u002Fimage\u002Fupload\u002Fl_title_cover_001_lu3vq4\u002Fl_title_cover_001_lu3vq4\u002Fl_text:MPLUS1p-Black.ttf_88_bold:Vue.jsで%0Aスマホアプリ%0A開発,co_rgb:374151,w_720,c_fit\u002Fv1712091289\u002Fthumbnail__003_prznvl.webp","vuejs","\u002Farticles\u002Fcategory\u002Fvuejs\u002F",[],"2025\u002F12\u002F27",{"_path":690,"title":691,"description":692,"cover":693,"alt":691,"category":647,"categoryBasePath":666,"tags":694,"createDate":695,"updated":696,"homepage":675,"recommend":675,"showCover":652,"lang":499},"\u002Farticles\u002F2025\u002Fthe-land-of-playful-fellows\u002F","紅白もちのひみつ『めっきらもっきら どおん どん』","奥さんに言われて「はっ」としました。もんもんびゃっこ達は赤いおもちを食べていて、かんたは白いおもち。これはなんらかの意味がこめられてるのでは？と思い考えてみました。","https:\u002F\u002Fimage.hirameki.dev\u002Ftakasqr\u002Fimage\u002Fupload\u002Fv1712091289\u002Fthe-land-of-playful-fellows_vgkvsf",[],"2025\u002F12\u002F20","2025\u002F12\u002F22",{"_path":698,"title":699,"description":700,"cover":701,"alt":699,"category":647,"categoryBasePath":666,"tags":702,"createDate":703,"updated":703,"homepage":652,"recommend":652,"showCover":652,"lang":499},"\u002Farticles\u002F2025\u002Fpixel-astrophotography\u002F","星空写真をAndroid Pixelでキレイに撮る","キャンプ場での夜空はやっぱりキレイでした。星がよく見れます。肉眼で見れるこのキレイな星空を写真に残せたら嬉しいなーと思いながら、タイマーが終わるのを待ちます。","https:\u002F\u002Fimage.hirameki.dev\u002Ftakasqr\u002Fimage\u002Fupload\u002Fl_title_cover_001_lu3vq4\u002Fl_title_cover_001_lu3vq4\u002Fl_text:MPLUS1p-Black.ttf_88_bold:星空写真を%0APixelで%0Aキレイに撮る,co_rgb:374151,w_720,c_fit\u002Fv1712091289\u002Fpixel-astrophotography",[],"2025\u002F09\u002F29",{"_path":348,"title":705,"description":706,"cover":707,"alt":705,"category":708,"categoryBasePath":709,"tags":710,"createDate":711,"updated":711,"homepage":652,"recommend":652,"showCover":652,"lang":499},"Storybookのダッシュボードを公開する","以前から Vue の UI ライブラリを Storybook を使って作っていました。その UI ライブラリの Storybook を静的サイトにビルドしてホスティングしてみました。","https:\u002F\u002Fimage.hirameki.dev\u002Ftakasqr\u002Fimage\u002Fupload\u002Fl_text:MPLUS1p-Black.ttf_88_bold:Storybookの%0Aダッシュボードを%0A公開する,co_rgb:fff,w_720,c_fit\u002Fv1712091289\u002Fcover_2025_rpwog8.png","storybook","\u002Farticles\u002Fcategory\u002Fstorybook\u002F",[],"2025\u002F05\u002F28",{"_path":713,"title":714,"description":715,"cover":716,"alt":714,"category":647,"categoryBasePath":666,"tags":717,"createDate":718,"updated":718,"homepage":675,"recommend":675,"showCover":652,"lang":499},"\u002Farticles\u002F2025\u002Fmemo\u002F","メモは脳の排水","紙、デジタルどちらでもなんでもメモに書き出します。書き出すことで考えが整理され、ネタ帳になってくれるので重宝しています。この「脳の排水」という言葉にグッときました。","https:\u002F\u002Fimage.hirameki.dev\u002Ftakasqr\u002Fimage\u002Fupload\u002Fl_text:MPLUS1p-Black.ttf_88_bold:メモは脳の排水,co_rgb:fff,w_720,c_fit\u002Fv1712091289\u002Fcover_2025_rpwog8.png",[],"2025\u002F05\u002F27",{"_path":720,"title":721,"description":722,"cover":723,"alt":721,"category":724,"categoryBasePath":725,"tags":726,"createDate":728,"updated":728,"homepage":652,"recommend":652,"showCover":652,"lang":499},"\u002Farticles\u002F2025\u002Fa2a-guide\u002F","A2A 試してみた","A2AとはAIエージェントとAIエージェントが連携するための規格です。Googleが2025年4月に発表しました。Googleのサンプルコードを動かしてみます。","https:\u002F\u002Fimage.hirameki.dev\u002Ftakasqr\u002Fimage\u002Fupload\u002Fl_text:MPLUS1p-Black.ttf_88_bold:A2A 試してみた,co_rgb:fff,w_720,c_fit\u002Fv1712091289\u002Fcover_2025_rpwog8.png","ai","\u002Farticles\u002Fcategory\u002Fai\u002F",[727],"AI","2025\u002F05\u002F01",{"_path":730,"title":731,"description":732,"cover":733,"alt":731,"category":734,"categoryBasePath":735,"tags":736,"createDate":737,"updated":738,"homepage":652,"recommend":652,"showCover":652,"lang":499},"\u002Farticles\u002F2025\u002Fdify-self-hosted-guide\u002F","Dify をセルフホストで立ち上げる","Dify をセルフホストで立ち上げる機会があったので、手順を紹介します。Dify（ディファイ）は、AIアプリを簡単に開発できるオープンソースのプラットフォームです。クラウド版とセルフホスト版があります。今回は Dify をセルフホストで立ち上げてみます。公式と同じ手順で実行する。","https:\u002F\u002Fimage.hirameki.dev\u002Ftakasqr\u002Fimage\u002Fupload\u002Fl_text:MPLUS1p-Black.ttf_88_bold:Dify を%0Aセルフホストで%0A立ち上げる,co_rgb:fff,w_720,c_fit\u002Fv1712091289\u002Fcover_2025_rpwog8.png","dify","\u002Farticles\u002Fcategory\u002Fdify\u002F",[],"2025\u002F04\u002F29","2025-04-29",{"_path":740,"title":741,"description":742,"cover":743,"alt":741,"category":647,"categoryBasePath":666,"tags":744,"createDate":745,"updated":745,"homepage":675,"recommend":675,"showCover":652,"lang":499},"\u002Farticles\u002F2025\u002Fphysical-bookstore\u002F","リアル書店の選書体験","今回で改めて書店の良さに気付けたのが良かったです。ただ、ネット通販や電子書籍には手軽に買えるなど別の良さがあると思ってます。なのでうまく使い分けていきたいです。","https:\u002F\u002Fasset.hirameki.dev\u002Fimg%2Fblog%2Fjournal%2F2025%2F20250425%2F20250425_010.webp?alt=media",[],"2025\u002F04\u002F25",{"_path":747,"title":748,"description":749,"cover":750,"alt":748,"category":724,"categoryBasePath":725,"tags":751,"createDate":752,"updated":752,"homepage":652,"recommend":652,"showCover":652,"lang":499},"\u002Farticles\u002F2025\u002Fcline-guide\u002F","Cline やってみた","Clineは自分自身でコマンドを実行できるようになっています。暴走しても被害がコンテナの中だけで済むようにDevContainersを使って今回試してみました。","https:\u002F\u002Fimage.hirameki.dev\u002Ftakasqr\u002Fimage\u002Fupload\u002Fl_text:MPLUS1p-Black.ttf_88_bold:Cline%20やってみた,co_rgb:fff,w_720,c_fit\u002Fv1712091289\u002Fcover_2025_rpwog8.png",[727],"2025\u002F04\u002F16",{"_path":261,"title":754,"description":755,"cover":756,"alt":754,"category":757,"categoryBasePath":758,"tags":759,"createDate":761,"updated":761,"homepage":652,"recommend":675,"showCover":652,"lang":499},"今まで作った OSS プロジェクト","今まで、いくつか OSS プロジェクトを作ってきたので紹介します。番外編まで含めると全部で5つあります。","https:\u002F\u002Fimage.hirameki.dev\u002Ftakasqr\u002Fimage\u002Fupload\u002Fl_text:MPLUS1p-Black.ttf_88_bold:今まで作った%0AOSS%20プロジェクト,co_rgb:fff,w_720,c_fit\u002Fv1712091289\u002Fcover_2025_rpwog8.png","oss","\u002Farticles\u002Fcategory\u002Foss\u002F",[760],"OSS","2025\u002F04\u002F02",{"_path":763,"title":764,"description":765,"cover":766,"alt":764,"category":647,"categoryBasePath":666,"tags":767,"createDate":768,"updated":768,"homepage":652,"recommend":652,"showCover":652,"lang":499},"\u002Farticles\u002F2025\u002Fbuilt-custom-keyboard\u002F","キーボードを自作した","ずっと興味のあった自作キーボードに挑戦した記録で、遊舎工房でキットやキーキャップを選び、秋葉原で工具を買い、久しぶりのはんだ付けに苦戦しながら完成させました。","https:\u002F\u002Fasset.hirameki.dev\u002Fimg%2Fblog%2Fjournal%2F2025%2F20250309_built-custom-keyboard%2F20250309_built-custom-keyboard_010.webp?alt=media",[],"2025\u002F03\u002F09",{"_path":393,"title":770,"description":771,"cover":772,"alt":770,"category":773,"categoryBasePath":774,"tags":775,"createDate":776,"updated":776,"homepage":652,"recommend":652,"showCover":652,"lang":499},"Cloudflare Workers でキャッシュ層を作る","画像サーバーの前段に Cloudflare Workers でキャッシュ層を作ったら転送量が大幅に減ったので記録です。やりかたです。1. 以下のコードで Workers を作りカスタムドメインを当てる。2. ソースコードの URL を Workers に割り当てたドメインに変更する。","https:\u002F\u002Fimage.hirameki.dev\u002Ftakasqr\u002Fimage\u002Fupload\u002Fl_text:MPLUS1p-Black.ttf_88_bold:Cloudflare Workers で%0Aキャッシュ層を%0A作る,co_rgb:fff,w_720,c_fit\u002Fv1712091289\u002Fcover_2025_rpwog8.png","web","\u002Farticles\u002Fcategory\u002Fweb\u002F",[],"2025\u002F02\u002F23",{"_path":778,"title":779,"description":780,"cover":781,"alt":779,"category":782,"categoryBasePath":783,"tags":784,"createDate":785,"updated":786,"homepage":652,"recommend":675,"showCover":652,"lang":499},"\u002Farticles\u002F2022\u002Flearn-programming\u002F","プログラミング勉強のコツを調べてみた","エラーに対する態度は3パターンあります。上達が早いのはもちろん3番目のパターンです。事前に知っておくことで、エラーに直面した時に少し落ち着いて対処できそうです。","https:\u002F\u002Fimage.hirameki.dev\u002Ftakasqr\u002Fimage\u002Fupload\u002Fl_title_cover_001_lu3vq4\u002Fl_title_cover_001_lu3vq4\u002Fl_text:MPLUS1p-Black.ttf_88_bold:プログラミング%0A勉強のコツを%0A調べてみた,co_rgb:374151,w_720,c_fit\u002Fv1642574453\u002Falfons-morales-YLSwjSy7stw-unsplash_2_1_xnt6z7.png","programming","\u002Farticles\u002Fcategory\u002Fprogramming\u002F",[],"2022\u002F05\u002F23","2025\u002F02\u002F12",{"_path":788,"title":789,"description":790,"cover":791,"alt":789,"category":647,"categoryBasePath":666,"tags":792,"createDate":793,"updated":793,"homepage":652,"recommend":652,"showCover":652,"lang":499},"\u002Farticles\u002F2025\u002Flearn-9-years\u002F","９年間、毎日プログラミングの勉強をしてる話","仕事から帰ってきて、ご飯食べたりお風呂に入って、一息ついたらパソコンにむかって12時まで作業する。初めはビジネス書とか経済の本を読んだりしてた。それから9年経った。","https:\u002F\u002Fimage.hirameki.dev\u002Ftakasqr\u002Fimage\u002Fupload\u002Fl_title_cover_001_lu3vq4\u002Fl_title_cover_001_lu3vq4\u002Fl_text:MPLUS1p-Black.ttf_88_bold:９年間、毎日%0Aプログラミングの勉強をしてる話,co_rgb:374151,w_720,c_fit\u002Fv1712091289\u002Fthumbnail__001_tdrr4g.webp",[],"2025\u002F02\u002F10",{"_path":795,"title":796,"description":797,"cover":798,"alt":796,"category":647,"categoryBasePath":666,"tags":799,"createDate":800,"updated":800,"homepage":675,"recommend":652,"showCover":652,"lang":499},"\u002Farticles\u002F2021\u002Fstudy-5-years\u002F","5年間ほぼ毎日プログラミングの勉強をするためにやったこと","人生の節目で一時的に勉強してない時期もありました。ですが、それ以外のほとんどの期間で毎日プログラミングを勉強しています。楽しいので、あまり勉強と思っていませんが。","https:\u002F\u002Fimage.hirameki.dev\u002Ftakasqr\u002Fimage\u002Fupload\u002Fl_text:MPLUS1p-Black.ttf_88_bold:5年間ほぼ毎日%0Aプログラミングの%0A勉強をする為に%0Aやったこと,co_rgb:fff,w_720,c_fit\u002Fv1642574453\u002Faaron-burden-QJDzYT_K8Xg-unsplash_1_xaxykh.png",[],"2021\u002F08\u002F01",18,[803,807,808,814,818,822,827,832,836,837,838],{"id":22,"depth":608,"text":23,"children":804},[805,806],{"id":30,"depth":613,"text":30},{"id":73,"depth":613,"text":74},{"id":101,"depth":608,"text":101},{"id":113,"depth":608,"text":114,"children":809},[810,811,812,813],{"id":120,"depth":613,"text":120},{"id":139,"depth":613,"text":139},{"id":166,"depth":613,"text":166},{"id":197,"depth":613,"text":62},{"id":264,"depth":608,"text":264,"children":815},[816,817],{"id":279,"depth":613,"text":280},{"id":308,"depth":613,"text":309},{"id":318,"depth":608,"text":318,"children":819},[820,821],{"id":321,"depth":613,"text":322},{"id":328,"depth":613,"text":329},{"id":354,"depth":608,"text":354,"children":823},[824,825,826],{"id":357,"depth":613,"text":357},{"id":377,"depth":613,"text":378},{"id":390,"depth":613,"text":390},{"id":396,"depth":608,"text":396,"children":828},[829,830,831],{"id":405,"depth":613,"text":405},{"id":431,"depth":613,"text":431},{"id":443,"depth":613,"text":443},{"id":472,"depth":608,"text":472,"children":833},[834,835],{"id":475,"depth":613,"text":476},{"id":513,"depth":613,"text":513},{"id":527,"depth":608,"text":528},{"id":541,"depth":608,"text":542},{"id":600,"depth":608,"text":600},{"_path":261,"title":754,"description":755,"cover":756,"alt":754,"category":757,"categoryBasePath":758,"tags":840,"createDate":761,"updated":761,"homepage":652,"recommend":675,"showCover":652,"lang":499},[760],{"_path":348,"title":705,"description":706,"cover":707,"alt":705,"category":708,"categoryBasePath":709,"tags":842,"createDate":711,"updated":711,"homepage":652,"recommend":652,"showCover":652,"lang":499},[],{"_path":393,"title":770,"description":771,"cover":772,"alt":770,"category":773,"categoryBasePath":774,"tags":844,"createDate":776,"updated":776,"homepage":652,"recommend":652,"showCover":652,"lang":499},[],{"_path":524,"title":683,"description":425,"cover":684,"alt":683,"category":685,"categoryBasePath":686,"tags":846,"createDate":688,"updated":-1,"homepage":652,"recommend":652,"showCover":652,"lang":499},[],1778714896453]