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

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

ただいまの
回答率

90.75%

  • JavaScript

    15314questions

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

  • Node.js

    1734questions

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

  • React.js

    713questions

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

  • テスト駆動開発

    59questions

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

  • 関数型プログラミング

    27questions

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

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 313
退会済みユーザー

退会済みユーザー

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にするってのは何故なのでしょう?

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

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 15:06

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

    キャンセル

  • 2017/10/08 15:14

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

    キャンセル

  • 2017/10/08 15:26

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

    キャンセル

  • 2017/10/08 15:31

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

    キャンセル

  • 2017/10/09 14:51

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

    キャンセル

  • 2017/10/11 08:38

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

    キャンセル

  • 2017/10/11 09:01

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

    キャンセル

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

  • ただいまの回答率 90.75%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    15314questions

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

  • Node.js

    1734questions

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

  • React.js

    713questions

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

  • テスト駆動開発

    59questions

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

  • 関数型プログラミング

    27questions

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