JavaScript, GitHub.Page: 日常使いする関数やクラスをutils.jsにまとめて使う方法

Question

実現したいこと

開発時によく使う関数やクラスをutils.jsといったファイルにまとめて記述して、どの開発でもimport的なことをして使えるようにしたいです。

この考え方は『リーダブルコード　―より良いコードを書くためのシンプルで実践的なテクニック』(2012), Dustin Boswell、Trevor Foucher　著、角 征典　訳, O'Reillyの以下の文が元です。

引用テキスト

10.4.　汎用コードをたくさん作る　
ReadFileToString()やformat_pretty()は「無関係の下位問題」のいい例だ。いずれも基本的で広く適用可能なので、複数のプロジェクトで再利用できる。このようなコードには、簡単に共有できるように特別なディレクトリ（例:util/)を用意する。

（１３５ｐより）

プログラマーの先輩方はどのようにして、どのプロジェクトでも使える汎用コードをまとめているのか教えていただきたいです。

発生している問題・分からないこと

わからないこと：どのプロジェクトでも使用可能な汎用コードのまとめかた。

開発環境はVisual Studio Codeを使用し、JavaScript, HTML, CSSを書いてGithub.Pageにレポジトリを作成して、github上のリンクでサイトを公開しています。

該当のソースコード

特になし

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

試したこと

chat gptに聞きながら次のことを試しました（結局、無理でした）
①npmでutils.jsのパッケージを公開しました。
npmのページ

②git bushでhttps://yamatoaita.github.io/yamato-utils/というレポジトリにパッケージをアップロードしました

→結果はUncaught SyntaxError: The requested module does not provide an export named 'FirebaseFunctions' というエラーがでてしまい結果的にnpmの方法はあきらめました。

補足

私はJavaScript３か月目の初心者です。先輩方がどのように汎用コードをまとめて、いつでも使えるようにしているのか知恵をいただきたいです。

私は今後もgithub.pageにて自作の機能をアップロードして、身内に共有したいと考えています。その際に使えるアドバイスをいただければ幸いです。

追記
マルチポストをしました。 その方がより色んな方に教えて貰えると思ったためです。

こちらがquiitaのリンクです
https://qiita.com/yamatoaita/questions/e1d86f74b35b66cfcc52

Comments

[Lhankor_Mhy]

マルチポストです。
https://qiita.com/yamatoaita/questions/e1d86f74b35b66cfcc52
https://ja.stackoverflow.com/questions/100831/

以下のご対応をお願いいたします。
https://teratail.com/help#posted-otherservice

また、スタックオーバーフローの方でも同様に対応を願います。
https://ja.meta.stackoverflow.com/questions/2418/

なお、Qiita にはマルチポストについて明確なルールがないようですので、こちらは対応不要かと思います。

[yamatoaita]

わかりました。 stackoverflowの方は閉じました
Qiitaの方は既に回答してくださった方がいたため

Teratailとquiitaのほうで、お互いに

「マルチポストをしました。リンクはこちらです」
と貼ります

[Lhankor_Mhy]

ご対応ありがとうございます。

[utm.]

「ハンマーしか持っていなければすべてが釘のように見える」という格言があり、アンチパターンのひとつです。
質問者さんはそういった状態に駆られているかと思います。

[yamatoaita]

ご忠告　ありがとうございます！

Answer 1

単に便利な関数をまとめたファイル/ディレクトリを作って使い回したいということであれば、

• その都度コピーしてきて自分のプロジェクトに混ぜて使う

というやりかたが必要充分だと思っています。

ファイルを git で管理しているのであれば、まとめたものも1つのリポジトリとして管理することになるでしょう。
また、もう少し押し進めてsubmoduleを使うという方法がありますね。

そのような運用で、共通モジュールに追加や変更が必要になったら、そのプロジェクト内で対応しておき、必要に応じて手続(あれば)に沿って共通にもリリースするという感じでしょうか。

標準のnpmレジストリは、広く一般に公開するための仕組みです。登録やメンテナンスに手間がかかりますから、作ったものがとても有用でみんなに使ってもらいたいというようなことになったら使うのがいいんじゃないでしょうか。
スキルとして使えるようになっておくのは有用だと思います。

Comments

[yamatoaita]

単に便利な関数をまとめたファイル/ディレクトリを作って使い回したいということであれば、

その都度コピーしてきて自分のプロジェクトに混ぜて使う
というやりかたが必要充分だと思っています
▶回答ありがとうございます！！
確かにそうかなと思いました。

1.utils.jsを開いてコピべし
2. 開発中の.js を開いて ペースト

これで済みますもんね。

Answer 2

よく使う関数やクラスをutils.jsにまとめ、プロジェクトごとに再利用可能にしましょう。まず、utils.jsを作成し、共通の関数やクラスを記述します。次に、他のプロジェクトでimport機能を使ってutils.jsを取り込みます。また、GitHubリポジトリに保存し、npmパッケージとして公開することで、複数のプロジェクトで簡単に利用できます。これにより、効率的に汎用コードを管理できます。

Comments

[yamatoaita]

回答ありがとうございます！！
それを私も行いたいですのですが。私の未熟さゆえ３日間　５０時間ほどそれができずにいます。
ChatGPTにきいたり、https://qiita.com/ShinKano/items/3e9f7813ff37379dd7ff
や、
https://qiita.com/TsutomuNakamura/items/f943e0490d509f128ae2
https://qiita.com/saltyshiomix/items/0306e17cde8f2475f193
https://www.youtube.com/watch?v=J4b_T-qH3BY

など様々なサイトや動画を参考にやってみましたが　最後には上記のエラー結果になってしまいました。

手順が乗っている参考サイトや本などあったら　教えていただけないでしょうか。

[juner]

これとか？
https://stackoverflow.com/questions/17509669/how-to-install-an-npm-package-from-github-directly
これとか？
https://docs.github.com/ja/packages/working-with-a-github-packages-registry/working-with-the-npm-registry#publishing-multiple-packages-to-the-same-repository

[fiveHundred]

（Edward357Jさん宛て）

AIでの回答にはルールがあります。
以下をお守りください。
違うのであれば、その旨をコメントください。

> AIが生成した回答・コメントについて

> AIが生成した回答・コメントを投稿する場合は、1行目に「[アルゴリズム/サービス名]により生成された文章です」と明記する必要があります。明記されていない場合は運営チームで削除させていただく場合がございます。
> 投稿する場合は、内容が正しいかを精査してください。

https://teratail.com/help#about-ai-terms

[yamatoaita]

junerさん
回答ありがとうございます！

2つとも読んだことがありませんでした。
サッと読んだ限り 何が何だか、 まだまだ知識不足で分からないことだらけでした…