質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Q&A

解決済

1回答

2030閲覧

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

sin_250

総合スコア112

Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

0グッド

1クリップ

投稿2020/05/04 10:57

編集2020/05/04 10:59

背景

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

miyabi_takatsuk

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_takatsuk

2020/05/04 14:42

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

回答1

0

ベストアンサー

前置きをさせていただきますと、ある程度、使用者達の傾向や、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_takatsuk

総合スコア9528

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sin_250

2020/05/05 13:02

ご回答有り難うございます。 確かに「ビジネスロジックはサービスに記述する」と言われていますが、 便利変換サイトにおいては変換ロジックはサービスかもしれません。 まずはそれでやってみたいと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問