共同開発では、ファイル名を見ただけで内容がある程度理解できるようにしておくことがとても大切です。
しかし……私は正直、ファイル名を付けるのがあまり得意ではありません。
- 「あとで変えよう」と思ってそのまま放置
- 3 か月後自分でも意味がわからない
- 他の人に迷惑をかけてしまう
そんな自分の弱点を補うため、ファイルの内容から ChatGPT が複数の候補ファイル名を提案してくれる Web ツールを作りました。
現在 GitHub Pages で公開しています:
👉 https://uni928.github.io/Uni928PublicHTMLs/index2.html
■ 作ったツールの概要
このツールは、ファイル内容を入力すると、それを ChatGPT に渡せる形で URL を生成してくれるものです。
具体的には以下の 2 つの操作が用意されています。
① ChatGPT に直接内容を渡して新しいタブで開く
ファイル内容をそのまま URL に埋め込み、ChatGPT に以下のような依頼を送ります。
下記の内容が記述されたファイルに関して、共同開発で他の人がファイル名を見て分かりやすいファイル名を複数提案してください。。また、おすすめ TOP5 も挙げて下さい。
すぐに候補を見ることができるので便利ですが、ブラウザや文字数によっては遷移に失敗する場合があります。
② コピーモード(遷移失敗時のための安全策)
ファイル内容を自動コピーしたうえで、ChatGPT の入力欄だけ開くモードです。
ユーザーは ChatGPT 側で貼り付けるだけで依頼を送れます。
■ なぜ作ったのか?
冒頭でも触れましたが、私は昔からファイル名をつけるのが苦手です。
共同開発では「ファイル名はチームの共通言語」。
コードを書くスキルと同じくらい重要です。
そこで、
内容に対して適切な名前を ChatGPT に候補出ししてもらえば、苦手を補えるのでは?
と思い、このツールを作りました。
■ 実際の使い方の流れ
1. ファイル内容を貼り付ける
JavaScript / Python / HTML / Markdown / 設定ファイルなど形式は問いません。
2. ボタンを押すだけ
- 「ChatGPTで提案する」
- 「ChatGPTで提案する(遷移に失敗する場合)」
どちらかをクリックするだけです。
3. ChatGPT に複数候補を生成してもらう
実際の ChatGPT の回答例:
- userAuthenticationService.ts
- verifyAndIssueTokenHandler.js
- user-login-session-manager.ts
- authConfigValidator.ts
このように、「あー、確かにこういう名前にするよね」という候補を瞬時に生成してくれます。
■ 見た目にもこだわりました
単なる実用ツールで終わらせたくなかったので、UIは以下を意識してデザインしました。
- ガラス感のあるモダンなカードデザイン
- グラデーションと光の演出
- 情報が整理されて見やすいレイアウト
- ボタンのアニメーション
- コピー完了のトースト通知
毎日使うツールは、使っていて気持ちの良い UI にしたいという思いがあります。
■ 公開ページ(GitHub Pages)
ツールはこちらで公開しています:
👉 https://uni928.github.io/Uni928PublicHTMLs/index2.html
どなたでもそのまま使えます。
ブックマークしておけば、ファイル名を迷ったときに秒で開けます。
■ 最後に:苦手をツールで補うという発想
共同開発では「人にとってわかりやすくする力」が求められます。
特にファイル名は、コードと同じくらい重要なコミュニケーション要素です。
私はそこが苦手なので、ツールで弱点を補うという選択をしました。
同じように「ファイル名をつけるのが苦手だ」という人に、
このツールが少しでも役立てば嬉しいです。
記事やツールに改善案があれば、ぜひ教えてください!
日本語のファイル名版👉 https://uni928.github.io/Uni928PublicHTMLs/index3.html
こちらをブックマークする方法もおすすめです。👉 https://chatgpt.com/?temporary-chat=true&prompt=下記の内容が記述されたファイルに関して、共同開発で他の人がファイル名を見て分かりやすい日本語のファイル名を複数提案して下さい。また、おすすめTOP5も挙げて下さい。%0A%0A