Angularのプロジェクトにおける自作ライブラリの置き場所

背景

AngularでWebアプリを作ろうとしています。
緯度経度などの地理情報の便利計算サイトのようなものです。
Angular, TypeScriptについては素人（公式チュートリアルを一通り終えた程度）です。

質問

例ですが、以下のような緯度経度に関する計算を司るモジュール（関数群）の実装が必要です。

緯度経度で与えられる2地点間の直線距離を計算する関数
緯度経度で与えられる基準地点から、与えられた距離だけ平行移動した地点の緯度経度を計算する関数
上記関数群を統一的・効率的に実装するための型やインターフェースの定義

これらは基本的にWebとは無関係なので、Angularのcomponentやserviceとして実装するのはおかしいと感じています。
しかしこの場合、Angularプロジェクトディレクトリ内のどこのファイル・ディレクトリに実装するのが一般的なのでしょうか？

srcディレクトリ以下の階層はコンポーネント志向のコードが格納されると理解しています。
かといってsrcと同じ階層に手動で適当なディレクトリを作っていいものか、よく分かっておりません。

参考

Angularの標準的なディレクトリ構成(ng newコマンドで作成したプロジェクト）

sh
1.
2├── angular.json
3├── browserslist
4├── e2e
5├── karma.conf.js
6├── node_modules
7├── package.json
8├── package-lock.json
9├── README.md
10├── src
11│   ├── app
12│   ├── assets
13│   ├── environments
14│   ├── favicon.ico
15│   ├── index.html
16│   ├── main.ts
17│   ├── polyfills.ts
18│   ├── styles.css
19│   └── test.ts
20├── tsconfig.app.json
21├── tsconfig.json
22├── tsconfig.spec.json
23└── tslint.json

miyabi_pudding

2020/05/04 13:08

ライブラリ、プラグインとして、その機能を設置したい、ってことでしょうか？特に外部に（npmなど）公開する予定がないのであれば、わざわざプラグイン、ライブラリとして作成せずに、serviceでやっちゃった方が、やりやすいかと思いますが・・・。（Angularの枠組み外での機能を、Angular内で使うのはけっこうめんどくさいというか難しい）それでも、ライブラリとして、機能定義したい、ってことでしょうか？

sin_250

2020/05/04 14:34

コメント記載ありがとうございます。私のやりたいこととしては、、、・外部にNPMライブラリとして公開する予定はない。あくまで自サイト内でのみ使用するライブラリ。・ただ、自サイトのコードのディレクトリ構成はキレイにしておきたい。たとえばWebサイト上のUIと関係ないロジックや型定義をコンポーネント内に記載したくない、など。あるべきコードをあるべき場所に書いて、できるだけ再利用性が高いコードにしたい。・本来、緯度経度にまつわる計算ロジックは、Webとは全く関係ない、純然たる数値計算処理なのですが、Angular内のディレクトリ構成上、Webと関係ないロジックを置く場所が見当たらない、というのが困りごとです。＞serviceでやっちゃった方が、やりやすいかと思いますが・・・。＞（Angularの枠組み外での機能を、Angular内で使うのはけっこうめんどくさいというか難しい）やはりそういうことなのですかね。そういうことであればそれが答えですかね・・・　>o<

miyabi_pudding

2020/05/04 14:42

なるほど・・・。回答に移らせていただきます。

行動規範の内容に同意します

回答1件

ベストアンサー

前置きをさせていただきますと、ある程度、使用者達の傾向や、CLIを使っている以上、その方が、構築しやすい、などはありますが、最終的には正解はなく、作成者の自由ということはご承知おきください。
（つまり本回答も、ただの一つの案に過ぎないということ）

・外部にNPMライブラリとして公開する予定はない。あくまで自サイト内でのみ使用するライブラリ。

を踏まえて回答させていただきます。

これらは基本的にWebとは無関係なので、Angularのcomponentやserviceとして実装するのはおかしいと感じています。

たとえそうであっても、Angularを使う以上、Angularはcompornent指向であるため、（言語ではなく、フレームワーク自体がコンポーネント指向ということ）
compornentを中心に構築すべきですし、そちらの方が、自然に、かつ機能的な構築が可能です。
よって、今回の機能を作成するには、serviceで構築するのが一番妥当でしょう。
ディレクトリを綺麗にしたいなら、
app/services/といった風にディレクトリを作り、その中に各serviceを展開していくのがいいかと。

Angularはもちろん、その枠組み外のライブラリなどを読み込むことは可能です。
ただし、インポートがやりずらかったり、そのライブラリの機能を、Angular内で使うには、設定やらないし、毎回手で各コンポーネントで仕様を記述しなければいけなくなる、など、けっこう厄介です。
（かくいう私も同じことをやろうとして、様々格闘した挙句、これserviceでいいじゃん・・・って結論になった経験があるので）
それであれば、Angularの枠組み内で機能を作成した方が、手間も少ないですし、
最終的にコンポーネントに落とし込むのも、自然にできるのでそちらのほうがいいかと。

逆に、最終的にはWebページで使うが、直接Webページで使うわけではないが様々な処理をするために、Angularの枠組み内で機能を提供するのが、serviceという機能と推察されます。

投稿2020/05/04 15:02

miyabi_pudding

総合スコア9555