react-v2ex - 抹桥的博客

練習のために、Reactを使ってV2EXのトップページを作成しました。ページアドレスプロジェクトアドレス

プロジェクト全体は react をベースに構築されています。スタイルは当初 inlineStyle で書くつもりでしたが、書くのが大変だと感じたため、sass に戻し、最終的に webpack でコンパイルしました。V2EXのAPIを直接呼び出して純粋なフロントエンドのトップページを作成し、すべてのデータをAjaxで取得できないかと考えましたが、クロスオリジン（CORS）の問題でフロントエンドからデータが取得できないことが判明し、断念しました。結果として、静的なページにするしかありませんでした。

コーディング中に遭遇したいくつかの問題について説明します。まず、プロジェクト全体は以下のファイル構造になっています。

│  .babelrc
│  .editorconfig
│  .eslintrc
│  .gitignore
│  index.html
│  index.js
│  package.json
│  readme.md
│  server.js
│  tree.txt
│  webpack.config.js
│
├─api
│      hot.json
│      latest.json
│
├─build
│      bundle.js
│      index.html
│
├─components
│      CommunityStatus.js
│      Footer.js
│      Header.js
│      Main.js
│      SearchInput.js
│      TopicsHot.js
│      UserLink.js
│      UserPanel.js
│
├─containers
│      App.js
│
├─sass
│  │  main.scss
│  │  _config.scss
│  │  _global.scss
│  │  _normalize.scss
│  │  _page.scss
│  │
│  └─components
│          _CommunityStatus.scss
│          _Footer.scss
│          _Header.scss
│          _Main.scss
│          _TopicHot.scss
│          _UserPanel.scss
│
├─static
│  └─images
│          [email protected]
│
└─utils
        getData.js

利点#

まず、Reactで書くことの利点について説明します。人気が出たのには理由があり、確かに多くの利点があります。ここでは、実際のコーディングにおける利点のみを述べ、Virtual DOMによるパフォーマンス向上などには触れません。

構造が明確#

React自体がコンポーネントベースであるため、ページ全体は構造的にいくつかのコンポーネントに分割されます。各コンポーネントは自身の表示と振る舞いを管理し、最終的にコンテナによって組み合わされるため、構造が非常に明確です。コンポーネントの状態は state または props を介して制御されますが、ほとんどのコンポーネントは props だけで十分であり、state は最上位のコンポーネントでのみ制御することで、state の管理をより明確にできると考えています。

メンテナンスが容易#

構造が明確であるため、メンテナンスが容易であると予想できます。例えば、ヘッダーの構造やスタイルを変更したい場合は、Header.js と対応する _Header.scss を変更するだけで済みます。ロジックを変更したい場合は、Header.js 内の props または state に関連するコードを修正するだけでよく、以前のようにページ全体のロジックの中から該当するコードを探す必要はありません。これは、私が現在保守しているいくつかの古いプロジェクトと比較すると、メンテナンス性においてまさに雲泥の差です。どこを修正すればいいのかコードが見つからないと悩むこともなくなり、何をしているのかわからないjQueryのコードの羅列に文句を言う必要もなくなりました。

テンプレートエンジンが不要#

Reactはテンプレートエンジンを内蔵していると言えるため、JadeやEJSのようなテンプレートエンジンは不要になります。このように、データを受け取ったら直接レンダリングするだけで済みます。

<div>
  {Hot.map((topic, index) => (
    <TopicsHotItem {...topic} key={index} />
  ))}
</div>

欠点#

コンポーネント分割の大きさに関する疑問#

1つのページを一体いくつの部分に分割すべきか？ロジックに基づいて分割するのか、それともページレイアウトに基づいて分割するのか？コンポーネントはどの階層まで分割するのか？V2EXのこのヘッダーのように、1つのコンポーネントとして分割すべきか、それとも3つに分割すべきか？もちろん、これは欠点とは言えないかもしれません。おそらく、私が経験不足でどのように分割すべきか判断できないためでしょう。

エラーメッセージが不親切#

例えば、私が習慣的に className と書くべきところを class と書いてしまった場合、コンソールには「Did you mean className」というエラーが表示されるだけです。しかし、どのファイルでエラーが発生したのかは表示されず、ましてや何行目かなど期待できません。自分で探すしかなく、プロジェクトが大きくなると、これは非常に厄介です。

まとめ#

全体的に見て、Reactでのコーディングは非常に快適で、コンポーネント化、単方向データフロー、関数型プログラミングといった利点も明確です。未熟な点もいくつかありますが、やはり利点が際立っており、可能であれば小規模なプロジェクトで実際に試してみるのは良い経験になると思います。

利点#