ちょっとずつ進む

常にWhat's upの精神

Reactのおまじない的なやつから始めるimport文の意味

reactを使う時、最初におまじない的なノリで下記のように書いているやつらの意味をググってみた。せっかくだからブログに書く。

import React, { Component } from "react";  // ①
import ReactDOM from "react-dom";   // ②

まず、簡単な②の方から説明していく。
②は、下記構文を使って書かれている。

import defaultExport from "module-name"; // 構文
import ReactDOM      from "react-dom"  ;   // ②(構文と比較するためスペースで位置をあわせてあります。)

defaultExportは、モジュール側(export文を使って何かをexportしているファイル側)でexport defaultされたものにつける名前のこと。 module-nameは、簡単に言えばexport文を使用して関数とか、オブジェクトをエクスポートしているjsファイルのこと。 なので②は、node_modules/react-dom.jsファイルでexport defaultされているものにReactDOMという名称をつけているということになるが、実際調べてみるとnode_modules/react-dom.jsはなくて、代わりにindex.jsがあり、そのファイルの中では、module.exportsでエクスポートしている。 まず、react-dom.jsというファイルがない件については多分、index.jsファイルがあるときは、index.jsを読み込むようになってるっぽい。(ググったけどいまいちよくわからんかった、けど多分そう) それで、export defaultじゃなくて、module.exportsなのは、下記のような対応があるかららしい。 https://qiita.com/rooooomania/items/4c999d93ae745e9d8657 |CommonJS|Export/Import| |---|---| |module.exports = function() {...}|export default function() {...}| だから②は、node_modules/react-dom/index.jsmodule.exportsされているものにReactDOMっていう名前をつけてるってことになる。

次に①のほうの説明に行きます。

import React, { Component } from "react";  // ①

これのReactのところはnode_modules/react/index.jsmoduel.exportsされているものにReactっていう名前をつけてるってことだと思うからそんな感じで。 新しく出てきているのが{ Component }の部分。 これは下記構文を使っている。

import { export }    from "module-name"; // 構文(スペースで位置を合わせています)
import { Component } from "react";  // ①

でまた、node_modules/react/index.jsを読んで、なんかnode_modules/react/cjs/react/development.jsとか言うのを読んでみるとfunction Component() {~~~}とか言うのが定義されている。ただこのfunction Componentがexportされているわけではなく、Reactっていう変数に格納されてその変数がmodule.exportsされていた。 ぐぐってみたら、別にexportで明示的にexportされていなくても、モジュール全体(今回の場合で言えば、node_modules/react/index.jsファイルのこと)がエクスポートされていればそのオブジェクトが使えるらしい。

「おまじないとかで誤魔化すからダメなんだ!!」とかいうのたまにみるからおまじない調べてみたけど、別におまじないでもいいかなって思った。調べてみて。