AI・ツール活用

AIと一緒にElectronアプリを作った話──フリーランスの作業時間管理ツール「TIMELOG」ができるまで

2026.03.16 (更新: 2026.04.10)

フリーランスで仕事を受けていると、「この案件、何時間かかったか正確に記録しておきたい」という場面が必ずあります。見積もりの精度を上げるためにも、自分の作業ペースを把握するためにも、時間の記録はできるだけ正確につけたい。

以前から時間計測のアプリは使っていました。でもある日ふと、自分で作れないかな？

AIの力を借りて（借りるもなにも　AIの力だろ）

そう思い立ったのが、この「TIMELOG」の始まりです。AIと一緒なら、コードが書けなくてもデスクトップアプリが作れる時代。実際にやってみました。

課題：時間管理ツールが「自分にフィット」しなかった

市販の時間管理アプリはたくさんあります。Toggl、Clockify、Notionのデータベース活用……でも、どれも「ちょっとしっくりこない」んですよね。

クラウド前提で、オフライン時に使いにくい
機能が多すぎて設定が面倒
フリーランス向けのシンプルな請求サポートが弱い
UIが自分の好みじゃない（これ、意外と重要）

「だったら作ればいい」──AIが手伝ってくれる時代に、それは冗談じゃなく現実的な選択肢になっていました。

解決策：AIとペアプログラミングでElectronアプリを開発

私はいわゆる「生のコードは書けない」タイプのWebクリエイターです。WordPressのカスタマイズはお手の物ですが、Electron（※1）アプリをゼロからJavaScriptで作るのは別次元の話。そこで、AIにペアプログラマー（※2）として入ってもらいました。

※1 Electronとは、Webサイトを作る技術（HTML/CSS/JavaScript）をそのままWindowsやMacのデスクトップアプリに変換できる仕組みです。普段使っているVS CodeやSlackもこの技術で作られています。

※2 ペアプログラミングとは、2人1組でプログラムを書く開発スタイルのこと。本来はエンジニア同士で行うものですが、今はAIが”相棒”として参加してくれます。

技術スタックはシンプルに決めました：

Electron（デスクトップアプリ化）
HTML / CSS / JavaScript（フレームワークなし）
データ保存：JSON（Electronのファイルシステムに直接保存）
ビルド：electron-builder

フレームワークをあえて使わなかった理由は「AIと一緒に読めるコードにしたかったから」。ReactやVueが入ると、AIへの説明コストが上がる気がして、バニラJS（※）で通しました。

※ バニラJSとは、ReactやVueといった便利な道具を使わず、JavaScriptをそのまま素の状態で書くスタイルのこと。アイスクリームの「バニラ味＝プレーン」から来た呼び方です。

実装した機能

タイマー計測（開始・停止で自動保存）
手動入力・ログ編集・ログ一覧（日付グループ表示）
週グラフ（棒グラフ＋テーブル）・月カレンダー（作業量をドット表示）
CSVエクスポート（期間指定・日次集計など）
4テーマ切替（ダーク・ホワイト・ピンク・ウォーム）

特にCSVエクスポートは請求書作成に直結するので、期間指定・日次集計・プロジェクト別集計まで作り込みました。

ビルドコマンド

# Windows（ポータブル版：インストール不要な.exe単体）
npm run build-win

# Mac
npm run build-mac

Windowsはポータブル版にしました。インストール不要でUSBに入れて持ち歩ける点が地味に便利です。

ポイント・ハマりやすいところ

Electronアプリ開発でAIと進める上でハマりやすいポイントをまとめておきます。

① electron-builderの設定は早めに確認する

package.jsonの"build"セクションの設定ミスで、ビルドが通らなかったり、アイコンが反映されなかったりします。AIに最初からpackage.jsonの全体像を確認させるのが吉。

※ electron-builderとは、Electronで作ったアプリをWindowsの.exeやMacの.appといった形式に”梱包”してくれるツールです。アプリを他の人が使えるファイルにするために必要な工程です。

② main.jsとrenderer.jsの役割分担を明確に

ElectronはNode.js（※）側（main.js）とブラウザ側（renderer.js）が分かれていて、ファイルの読み書きはNode.js側で行う必要があります。AIに「どちらの処理か」を毎回伝えると混乱しにくいです。

※ Node.jsとは、JavaScriptをブラウザの外（パソコン上）で動かせる仕組みです。ファイルの読み書きやネットワーク通信など、アプリの”裏側”の処理を担います。

③ フレームワークなしのメリット：AIとのコミュニケーションコストが低い

ReactやVueを使うと、コンポーネント設計の説明やビルド環境のセットアップでAIへの指示が複雑になりがちです。バニラJSであれば「この画面のこのボタンを動かして」という直接的なやり取りができて、スピードが上がります。

まとめ：「自分用ツール」を持つことの強さ

今回作った「TIMELOG」は、完全に自分の作業フローに合わせて設計したツールです。市販品では妥協していた部分がゼロになりました。そして何より、「AIと一緒に自分のツールを作れる」という体験自体が、フリーランスとしての引き出しを広げてくれる感覚がありました。

コードが書けなくても、「どういうものを作りたいか」を言語化できれば、AIはかなりのところまで連れて行ってくれます。今後はnpcブランドのオリジナルツールとして、改良しながら育てていくつもりです。

※この記事はNPCの中の人azusaの実務経験をもとに書いています。

ブログ一覧に戻る << BACK TO BLOG