きみはねこみたいなにゃんにゃんなまほう

ねこもスクリプトをかくなり

React のファイル名から受ける想定利用法

React を触り始めて 1 年くらい経過しましたが、始めの頃はモジュールのファイル名の命名規則がよくわからなくて迷走していたのをふと思い出しました。

例えば「load data」の 2 語からなるファイル名を考えると、以下 の 3 パターンが考えられます。

  • load-data.js (kebab-case)
  • loadData.js (lowerCamelCase)
  • LoadData.js (UpperCamelCase)

ある程度慣れてくると、ファイル名から作者が想定しているそのモジュールの利用法が読み取れるようになります。 今回はその個人的な感覚のまとめになります。

load-data.js から感じ取る利用法

旧来(いつだろう)の JavaScript 的には一番自然に見えるモジュールファイル名ですね。 「各メンバを個々に読み込んで利用するタイプのモジュール」と受け取れます。

import { func1, func2, const1 } from './load-data'

const result1 = func1() + const1
const result2 = func2()

loadData.js から感じ取る利用法

初見で「おや、命名規則が読み取れない...」と思わされたモジュール名です。

これは「default export されている function のメンバが存在するモジュール」と受け取れます。

import loadData from './loadData'

const myData = loadData()

default export しているメンバがあるので、可能ならファイル名と同じ名前で利用してね、というメッセージを感じますね。

LoadData.js から感じ取る利用法

これも上のパターンに似ていて「default export されている class のメンバが存在するモジュール」と受け取れます。

import LoadData from './LoadData'

const loadData = new LoadData()

もしくは React などの JSX であればコンポーネントとして利用できる、という意味も追加されます。 この場合の実装はクラス・関数問わずになりますね。

import LoadData from './LoadData'

function MyComponent() {
  return <LoadData />
}

JSX の場合は new するクラスか、それともコンポーネントか、どちらを指すモジュールなのかは仕様や実装を見なければ判断できませんね。