ちまちまとプログラムを書き、Github pagesで公開する
自分用に生成AIを使いJavascriptで西暦・和暦変換処理などをちまちま作っていたところ、新しいサービスでマスタ的なファイルを参照しようとJSONファイルを準備した所、Javascriptではローカルのファイルを直接参照出来ないということが判明し、そのためテスト時にもわざわざGithubのパブリックなリポジトリにおいたりGoogle CloudのCloud Strageにファイルを置いてそこを参照させたりしてました。
で、そのうちローカルテストで使ったファイルをアップロードする処理がめんどくさくなったので、何か他の手段はないかといろいろ調べてたら、Python環境があるマシンではコマンド一発でカンタンなサーバ機能を立ち上げる事ができると知ってやってみたら便利だったので、忘れないようにそれについて書いときます。
起動方法はカンタン
起動はカンタンで、まずは作成した表示したいindex.htmlがあるディレクトリへ移動して、以下のコマンドを入力することでお手軽サーバが立ち上がります。
python3 -m http.server
参照先を確認するには、ローカルホストに接続すればオーケーです。
http://localhost:8000
起動時にポート番号を指定した場合、その番号で接続すること。何も指定しなければおなじみの8000番です。
なお、http:serverに接続するとserverを起動したディレクトリ配下にあるindex.htmlを参照しそれを表示しますので、テストしたいhtmlがindex以外であればポート番号のあとに指定すると希望のhtmlが表示されます。また参照したいファイルはindex.htmlと同じフォルダ配下において置くだけでオーケーです。
構成例）
|- フィルダ
|- index.html
|- data
|- data.json
上の構成時のJavascriptでのファイルパス指定
fetch('data/data.json')
まとめ
Javascriptで外部ファイル参照などの処理をしていなければ、作成したhtmlファイルをダブルクリックするとブラウザ上に作成したコンテンツが表示され結果確認はできますが、Javascriptで外部ファイルを参照する処理を含む場合には上の通りlocalhostへ接続しなければ、ファイル読み込みエラーが発生して悲しい結果となりますので注意が必要です。
個人的なサービスをインターネット上で動作させたい時、Javascriptをよく理解してなかったから(今でもよくわかってないけど）Pythonで書いてStreamlit Cloudで公開してたりもしたけれど、そういったサービスは一定日数接続がないとスリープして再起動に時間がかかるため、生成AIに同じ処理結果となるようJavascriptコードで書いてもらったらカンタンに構築できるし再起動はないしで便利なので切り替えました。公開はおなじみのGithub Pagesなのでソースを修正した場合でも、pushすれば自動的に更新してくれて超便利です。
マスタなどのを参照する処理を実装する場合、更新がない（少ない）データをhtmlのscriptタグ内や実行するjsファイルに定数としてベタ書きするっていうものアリだけど、コードとデータを分離するメンテナンス性の向上や、様々な処理で共通的に利用したいという場合など、JSONなど独立したファイルにまとめ必要に応じてそこを参照するほうが良いと思います。