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

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

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

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

関数型プログラミング

関数型プログラミングとは、関数を用いて演算子を構築し、算出し、コンピュータプログラムを構成する枠組みです。

テスト駆動開発

テスト駆動開発は、 プログラム開発手法の一種で、 プログラムに必要な各機能をテストとして書き、 そのテストが動作する必要最低限な実装を行い コードを洗練させる、といったサイクルを繰り返す手法の事です。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

2018閲覧

外部のものに依存した関数はなぜ好ましくないのか?

退会済みユーザー

退会済みユーザー

総合スコア0

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

関数型プログラミング

関数型プログラミングとは、関数を用いて演算子を構築し、算出し、コンピュータプログラムを構成する枠組みです。

テスト駆動開発

テスト駆動開発は、 プログラム開発手法の一種で、 プログラムに必要な各機能をテストとして書き、 そのテストが動作する必要最低限な実装を行い コードを洗練させる、といったサイクルを繰り返す手法の事です。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

1クリップ

投稿2017/10/08 04:57

編集2017/10/08 05:04

React.js、redux、Immutable.jsを使ってるのですが、reduxのドキュメントを見ると、immutable.jsの使用を猛烈推薦する一方で、下層の単にビューを表示するだけのコンポーネント(関数)では使うな、絶対使うな!といっております。

理由としてはビューをレンダーするだけのコンポーネントはpure function(参照透過性でしたっけ?)であるべきだからということなのですが、immutable.jsのような外部ライブラリに依存してしまうのも純粋関数にならなくなるのでしょうか?

外部の状態に依存する関数は純粋関数の条件に満たなかったと自分の浅い知識では記憶していますが、外部ライブラリに依存もダメですか?純粋関数どうこうっていうより、外部ライブラリ使うと関数の引数から外部ライブラリに依存したオブジェクトやインスタンスを渡したとしても、テストしづらくなるってことでしょうか?

http://redux.js.org/docs/recipes/UsingImmutableJS.html

Never use Immutable.JS in your Dumb Components

Your dumb components should be pure; that is, they should produce the same output given the same input, and have no external dependencies. If you pass such a component an Immutable.JS object as a prop, you make it dependent upon Immutable.JS to extract the prop’s value and otherwise manipulate it.

Such a dependency renders the component impure, makes testing the component more difficult, and makes reusing and refactoring the component unnecessarily difficult.


Such a dependency renders the component impure, makes testing the component more difficult,

テストがしづらくなるというのはモックのインスタンス作らないといけなくなったりしてわかりますが、外部への依存性がコンポーネントをimpureにするってのは何故なのでしょう?

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

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

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

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

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

guest

回答1

0

ベストアンサー

immutable.jsをつかってコンポーネントを作るというのはつまりpropsに渡す型として
immutable.jsのlistやMap,Recordを使うということですよね。

propsに渡すべき型は極力シンプルにすべきです。再利用性というのもそうですし
わかりやすさと言うのもあります。
propsはそのコンポーネントのインターフェースなわけですから、propsに渡すものによって
どういう表示になるか意図が分かる形であるのが理想です。

何よりpropsに渡すものがjson以外ですとそのコンポーネントを使いたいという目的だけのために
immutable.jsに依存することになります。

内部ロジックとしてコンポーネント内でimmutable.jsを使いたいというのであれば
それはまだコンポーネントの分解が必要だと思われます。

追記

コンポーネントを作る時に2つの概念を意識して作っています。

https://qiita.com/tuttieee/items/a3ca7d9d415049d02d60

上記が参考になるかと思いますがUIの表示を担当するのがPresentational componentで
複雑なデータを扱えるようにするのはContainer componentです。
immutable.jsのデータ型はContainer componentまでに限定する方針にしています。

投稿2017/10/08 05:28

編集2017/10/08 06:17
m0a

総合スコア708

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

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

退会済みユーザー

退会済みユーザー

2017/10/08 06:06

ご回答ありがとうございます。propsに渡すのはobjectやarray、string, number, functionなどの単純なjavascriptが好ましいのでしょうか?例えば、immutable.jsに限らずなのですが、自作クラスのインスタンスをpropsに渡して、コンポーネント側でそのインスタンスを使ってデータを表示してもらうというのも、やはり、自作クラスに依存しているから好ましくないのでしょうか?
m0a

2017/10/08 06:14

その辺はプロジェクト次第というところではないでしょうか?例えばcomponentを作るのに私は(storybookを使ってます。)[https://storybook.js.org/] コンポーネントをstorybookで表示できるように作る時にpropsに複雑なオブジェクトを使うとかなりしんどくなります。
退会済みユーザー

退会済みユーザー

2017/10/08 06:26

追記もありがとうございます。実は既に自分も再利用性の観点からimmutable.jsはcontainerまでに利用を留めています。ただ質問にあるように純粋関数って外部の状態には依存してはいけないけど、外部から注入されたインスタンスを使ってはいけないという訳ではないのじゃないのかなと思いまして。なんでimpureになるのかいまいち分からんのです。
退会済みユーザー

退会済みユーザー

2017/10/08 06:31

immutable.jsがcontainerまでに利用を留めることが推薦される場合は、必然的に自作クラスの利用もcontainerまでにした方が良いのかなと昨日、今日いろいろ考えてるのですが、hocでcontainerからcomponentにpropsで値を渡す時に自動的にimmutable.jsのオブジェクトを通常のjsオブジェクトに変換するようにしてるので、その辺りもテコ入れしないといけなくなるし、悩ましいところです。。。
退会済みユーザー

退会済みユーザー

2017/10/09 05:51

すみません。日付のフォーマット加工処理や数字のカンマ付処理などはコンテイナーの方で済ませてからコンポーネントに渡してますか?ビューコンポーネントの方では外部ライブラリや外部からインポートしたヘルパー関数使うと、それも依存関係できて再利用性が下がってしまうなと。どうしてるのでしょうか?
m0a

2017/10/10 23:38

Date型はそのままpropsに渡して、moment.jsに依存するコンポーネントになっちゃってますね。なんとなくjs標準なオブジェクトはそのままでいいかなと思ってます。結局さじ加減は自分で決めるしか無いのかなと
退会済みユーザー

退会済みユーザー

2017/10/11 00:01

なるほど。指針が見えてきました。本当に再利用性を高く追求する必要がある場合は、this.props.childrenでコンポーネントにラップされた子要素を書き出すようにしてあげれば、使う側が好きにmomentなりなんなり使えば良いし、再利用性をそこそこに求める場合は、コンポーネントが外部ファイルに依存しても、それはopinionatedであるってことでオッケーなのかなと。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問