Reactのディレクトリー構成を変更

後々のことを考えると、ディレクトリー構成を変えたほうがいいのではないかという思いに至り、画像のように変更してみました。

<main></main>タグの内部のコンテンツ部分と、ヘッダーやフッターなどの共通部分を分離。

Game Usersは他の人も気軽にコンテンツを追加できるようにしたいという目標があるので、新たにページを追加する場合は共通部分のコードは触らずに、そのページはそのページだけで独立してファイルを作成できるようにしたいのです。

ただこの作業をやってると、自分の能力を超えてる部分に手を出しているという不安感が漂います。到達点はわかっているのですが、知識が足りていないので、今やっていることが正しいのかどうかがさっぱりわかりません。

ディレクトリー構成だけはそれっぽくなっているのですが。

ReactでMasonryを使用する

MasonryというJavascript製のライブラリーを利用すると、カード型デザインのページ内で自動的に各カードを並べかえてくれます。カードのサイズがバラバラな場合、均等に横並びにするだけでは無駄なスペースが出来てしまうので、これを使うことで石段を積んだような綺麗な並びに作り変えられるのです。

このライブラリーはとても気に入っているので、なんとかReact上でも使いたいと思い導入してみたのですが、REST APIにアクセス → データ取得 → カード数の増減、こういった形でDOMに反映してからライフサイクルメソッドのcomponentDidUpdate内でレイアウトしてみたところ、ちらつきが発生してしまいました。DOMに反映されてから並び替えるという順序になるため、どうしても一瞬並び替える前のカードが表示されてしまうのです。

そこで他の人がどのようにReactにMasonryのライブラリーを導入しているのか調べてみたところ、有志の方がreact-masonry-componentというコンポーネントを公開してくれていました。これを使ってみたところ非常に簡単にカードの並び替え機能を利用することができるようになり、ちらつきもなし!

並び替え動画

いやーありがたい!優秀な人が様々なコンポーネントを提供してくれているおかげで本当に助かります。なんかこういう無償で何かを提供してくれている人たちに、お礼の寄付をするシステムがあればいいのになと思いますね。

Uncaught TypeError: Class constructor ExtensionJs cannot be invoked without ‘new’

Uncaught TypeError: Class constructor ExtensionJs cannot be invoked without ‘new’

クラスを継承しようと思ったのですが、このエラーが出てうまくいきませんでした。

結論から言うと、拡張子が .js のファイルからクラスを継承しようとするとこのエラーが出るようです。もしかしたらうちの環境だけで普通はこんなことで行き詰まったりしないのかもしれないですが、自分はこれで一日潰してしまったので同じエラーで困る人が出たときのために情報を残しておきます。

Reactを利用している場合は、JSXの記述がないファイルでも拡張子はすべて .jsx にしておいた方がいいのかもしれません。

Reactで実際にアプリケーションを作ってみて感じたこと

日本語でReactについて述べられている記事はまだまだ少なく、英文サイトを読む時間も多い現状ですが、その現状で実際にReactを使ってアプリケーションを作ってみて感じたことを、ありのままに語ってみようと思います。

現在、日本人でReactを触っている人たちはアーリーアダプター(初期採用者)層に当たるためか、レベルの高い人が多いです。記事に含まれる専門用語の多さや、語り口の難しさからそういった印象を受けます。自分のように趣味プログラマーに毛の生えたレベルの人間で、Reactを触っている人は他にいないんじゃないかと思えてくる日々ですが、それでもなんとか頑張っています。

Reactを触ってみて感じたのは、仮想DOMという仕組みはとても優れているということです。サクサク更新されて、一度Viewの部分を作ると、以後は状態を更新するだけで自動的にViewも更新されるのが非常に素晴らしいです。サイトの規模が大きくなってくると、自分の脳内でDOMを組み立てるのが辛くなってくるので、そこに労力を割かなくてよくなるのはすごく楽です。

こんな感じにReactが優れている点について述べられている記事は多いですが、悪い点について述べられている記事はあまりないように思いますので、自分はReactのダメな部分について簡単に語ってみようと思います。

自由度が高すぎる


ReactはViewの部分だけを担うというコンセプトで作られています。View部分だけなのでアプリケーションを作るときに必要になるパッケージは別途入れなければならないのです。良いように言えば、作り手が好きなパッケージを採用して自由度の高い構成にすることができるということになるのですが、実際のところ、あれこれ入れるのは非常にめんどくさく感じます。他パッケージごとに情報を調べて、それが必要かどうかを判断し、また必要なら学習コストを支払わなければならないのです。

例えばReactについて調べてるとよく名前が上がるパッケージに、Redux、Immutable.jsなどがあると思いますが、Reactユーザー中で、これらのパッケージを採用している人と採用していない人に別れることになります。当然、双方コードの書き方は変わってきます。同じ部分について書かれているのに書き方が違うのです。自分のような初心者は情報を調べているときによく混乱させられるのですが、とにかく一貫性とまとまりがないのです。

非同期通信のやり方でもredux-thunk、redux-saga、コンテナに直接書く派に分かれており、本当にややこしい。必要最低限の機能を揃えるための道筋が複数あるので、各自がバラバラに進んでいて、複数人で作業するときは大変だろうなと思わされます。

学習コストが高い


React界隈はとにかく覚えることが多いです。普通にアプリケーションを作ろうとするだけで、各パッケージの公式サイトや、GitHubにアクセスして英語のドキュメントを眺める作業を強制される状態に陥ります。ひとつの高いハードルを超えれば終わりという感じではなくて、中サイズのハードルを何度も超えさせられる感じになるのが、逆にしんどいです。

日本語でReactの記事を書いているプログラマーの方々からは、それらをさも簡単にこなしているような印象を受けるのですが、僕のような末端のプログラマーには本当に辛い作業なのです。概念が難しい、英語の理解に苦しむ、そもそも情報がない。一通りできるようになるまで、あちこち調べ回る作業をこなさなければなりません。

基本パッケージにまとめて欲しい


自由度が高いせいで、あちこち駆けずり回ることを強制され、学習コストが高くなっている。これらの問題を解決するために npm install react –save 全部これだけで済むようにして欲しいです。ReduxとImmutableは本体に取り込んで、後は非同期通信の方法を公式でしっかり定めて、みんながその方法で実装するようにしてくれればいろいろ楽になりそうなんですが。

ReactはViewだけを担うというコンセプトのせいか、できるだけ小さくなろうとしていて、そのせいで逆に複雑になってしまっているように感じます。

僕のようなレベルの人間がサクサクとReactを扱えるようにならないと、本当の意味での普及は難しいのではないかと思います。Facebookにいる優秀な開発者の方々には底辺プログラマーの気持ちはわからないかもしれませんが、切実に願います!

最後に


文句が多いのでReactについて調べている人が読むと、印象が悪くなってしまうかもしれませんが、Reactを導入するメリット自体はとても大きいです。現在、オリジナルのソーシャルボタンを作れるアプリケーションを作っているのですが、途中で方針転換があり、jQueryで書いていた部分をReactに書き直しています。

そこで感じたのは、我流のDOM管理が、React (&Redux)のルールに従って管理されるようになるので、構成がシンプルでわかりやすくなって、ごちゃごちゃしなくなります。ここが一番のメリットですね。Viewを各部品ごとに作っていき、それを一回配置すると、後は状態を更新するだけでDOMに反映されるようになる。昔ながらの手作業をルール化、システム化したような感じです。

学習コストが高くしんどいことも多いですが、その分見返りもあるので、チャレンジする価値はあると思います。ただし、現状は環境がいいようには思えないので気軽には勧めにくいです。頭の良さか、学習意欲の高さ・モチベーションが必要になります。

自分の場合はjQueryをベースにサイトを作っていた結果、グチャグチャになってしまって、新しい技術を導入せざるを得ない状況になってReactを始めました。僕と同じような状況に陥った方なら、賢くなくてもモチベーションでなんとかできるのではないかと思います。

一度、簡単にでも使えるようになると良さを感じられるので、興味のある方はぜひチャレンジしてみてください。

退化しました

すでにソーシャルボタンを出力するコード自体はほぼ完成しており、しばらくソーシャルボタンを作成するページを作っていたのですが、なんと途中でまたもコードの大幅書き直しが発生しました。

画像はWordPressのプラグイン画面なのですが、これはソーシャルボタンを作成するページで、ここで画像をアップロードして設定を行うとWordPress上でソーシャルボタンが表示されるという仕組みになっています。

普通のサイトでも利用できるように、ソーシャルボタンの作成が行えるページを公式ページとしても公開する予定なのですが、このページをなにも考えずjQueryで作っていたのです。WordPressはjQueryが利用されているので、深く考えずにそのまま。

このWordPressのページと、公式ページのコードは共通化しようと考えていたので、当然、Game Users内に設置する公式ページもjQueryになるわけです。

jQueryベースはもうやめて、Reactをメインにして行こうという高い目標を立てたにも関わらず、なぜ未だに古いシステムで作っているんだ?Game UsersをReactで書き直そうとしていた高い志はどこへ行ったんだ?という疑念が生じ、jQueryで書いていたソーシャルボタン作成ページをReactで書き直すことになりました。

結構、進んでいた段階での書き直し作業。しかも実際、進めてみるとReactの勝手がわからず、サクサクというわけにも行かず、どんどん時間が過ぎていきます。

本当になにやってんだろうなぁ。当初すべてPHPで書いていたのをJavascriptに書き直した件も合わせると2回目の書き直し作業。さすがにアホすぎて怖くなってくる!