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

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

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

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

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

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

現在の開発状況 – 2017/10/08

シェアボタン公式トップページ

シェアボタンの公式ページがだいたい完成しました。シェアボタンを作成する機能は問題なく動作しており、次は有料プランを申し込むページを作成する段階です。

PayPalのようなネット上で支払いを行えるサービスを提供している企業は海外にもたくさんあるので、それらを吟味しながら良さ気なサービスを採用しようと思います。シェアボタンは海外の人にも使ってもらえるようにいずれ複数言語で提供したいという思いがあるため、支払いサービスも多くの言語に対応している海外のサービスの方がいいのかなと考えています。

最近、GitHubにファイルを上げていませんでした。なぜかというとWordPressのプラグインは100% GPLで作らないと公式の場所に置いてもらえません。ライセンスが100% GPLでない場合、ネットから実行ファイルをダウンロードしてきて使用するスマホの野良アプリのような扱いになってしまうため、Game Users Share Buttons部分のライセンスもGPLで作らないといけないのです。そのため、Game UsersのWebリポジトリに含めてプッシュすることができなくなっているのです。一緒にアップロードするとライセンス汚染が発生するようなので。

ローカルのシェアボタンのアドレスは https://localhost/gameusers/public/app/share-buttons なのですが、現在、GitHubのリポジトリをクローンして上記URLにアクセスしても、ファイルが足りないためエラーが起こってしまう状況になっています。完成したら別リポジトリで公開する予定なのですが、正常に動作させるためには、そのファイルを特定の場所に設置してからアクセスしなければならないという非常にややこしいことになっています。

汚染が発生するライセンスは本当にめんどくさいですね。

※ 追記 クローンしてもエラーを表示しないようにしました。ただし画像のように内部のコンテンツは表示されません。ヘッダーと左のメニューとフッターしか表示されません。

GitHubを使う習慣がない

GitHubを全然更新していませんでした。日々の作業が終わった後にファイルをアップロードするだけなのに、習慣がないので忘れてしまいます。Atomを使ってるので作業自体はすごく簡単なんですが。というかアップロードじゃなくてプッシュというのが正しいのかな?Gitの概念と用語が難しくていまだによくわかっていません。

久しぶりに更新したついでに、GitHubの容量の上限について気になったので調べてみたところ、リポジトリは1GBが上限サイズのようです。それ以上のサイズになると警告メールが送られてくるらしい。

https://api.github.com/repos/gameusers/web

このアドレスでリポジトリのサイズがチェックできるので、アクセスしてみたところ “size”: 39395 と書かれており、なんとまだ39MBしか使っていないようです。ローカルファイルだと400MBくらいあったのですが、node_modulesや余計な画像などのファイルを除くと、すごく小さくなりますね。

今後は毎日忘れずにプッシュしていこうと思います。

 

現在の更新状況

旧デザイン

新デザイン

モーダルで表示する通知を綺麗にしています。他のデザインに合わせてこちらもカード型にしました。

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回目の書き直し作業。さすがにアホすぎて怖くなってくる!

Chrome Developer Tools便利!

現在、WordPressのソーシャルボタンのプラグインを作っているのですが、適用されているテーマのスタイルシートが邪魔をして思うようなデザインにできないという問題に直面しました。

WordPress ソーシャルボタンサンプル

黒猫の周囲を囲むように存在している、この謎の白枠に2時間以上費やすことに!

marginでもなく、paddingでもなく、borderでもない。自分なりにいろいろ探してみたのですが、原因がまったく特定できず、お手上げ状態になったのですが、ChromeのDeveloper Toolsにスタイルシートの欄があったことを思い出し、開いてみるとそこに答えが書いてありました!

box-shadow

box-shadow…。ほとんど使わないから存在を忘れていました。便利なことにDeveloper Toolsの画面でチェックボックスを外すと、ブラウザ上のデザインにも変更が加えられます。他の人が作ったものはなにが適用されているのかわからないので、この機能は非常にありがたいですね。

ChromeのDeveloper Toolsはいろいろ機能がついてそうなので、一回ちゃんと勉強した方がいいかもしれません。

 

フリーキャット

ちなみにこの黒猫はクレジットを表す画像で、Game Usersのトップにリンクが貼ってあります。ソーシャルボタンを使ってくれた方のブログから、Game Usersにアクセスしてくれる人が増えたらいいなという目論見でつけております。

こういうのってスパム認定されるんでしょうか?SEOについての知識がないのでちょっと心配です。

npmの基本的な使い方

Node.jsに含まれているnpm(パッケージ管理ツール)の基本的な使い方について解説しています。

npmとは開発するプロジェクトにライブラリなどを簡単に導入するための機能です。Node.jsをインストールするとnpmも同時にインストールされます。

インストール方法についてはこちらで詳しく解説しています。

Node.jsをイントールしよう!

Node.js command promptを起動しよう


Windows10のケースで解説しています。他のOSを使用している場合は、そのOSのアプリケーション起動方法に従ってください。

 

Node.js command prompt

スタートメニューからNode.jsの欄を探してください。そしてNode.js command promptを起動してみましょう。

 

起動後

黒い文字だけの画面が起動されると思います。npmは基本的にこのコマンドプロンプトを利用して操作していきます。

以下のコマンドを入力してEnterを押してみてください。

node -v

上記のようにバージョンが表示されると思います。これはあなたの環境にインストールされているNode.jsのバージョンです。

テストプロジェクトを作成する


npmの使い方を覚えるために、テストプロジェクトを作成してみましょう。どこでも構いませんので、新しくフォルダ(ディレクトリ)を作成してみてください。

この解説ではこのようにフォルダを作成しています。

Cドライブ > xampp > htdocs > test

フォルダが完成しましたら、Node.js command promptに戻りましょう。そして cdコマンドを利用して、今作成したフォルダの場所へ移動します。

cdコマンドというのは、ディレクトリ(フォルダ)を移動するためのコマンドです。主に利用するのは以下のコマンドです。よく利用しますので覚えておきましょう。

 

cd test

現在のディレクトリ内に存在するtestディレクトリに移動する。

 

cd ../

現在のディレクトリからひとつ上のディレクトリに移動する。

 

cd ../../

現在のディレクトリからふたつ上のディレクトリに移動する。

 

cd /

ルートディレクトリに移動する。例えば今、Cドライブ内のどこかのフォルダにいる場合は、Cドライブのトップに移動します。

 

現在、こちらの環境では上記のように表示されています。これはCドライブの中にある、Usersフォルダの中にある、AZフォルダに現在いるということです。

ここからさきほど作成したtestフォルダにcdコマンドで移動してみましょう。

cd ../../xampp/htdocs/test

これは現在のディレクトリからふたつ上のディレクトリに移動し、さらにxampp/htdocs/testに移動するというコマンドです。個別に cd ../../、cd xampp/htdocs/testと2回打っても同じ結果になります。

移動ができたら以下のような表示になります。

C:\xampp\htdocs\test>

ちなみにバックスラッシュと¥記号は同じものと考えてください。Windowsのコマンドプロンプトではバックスラッシュの代わりに¥記号が表示されます。

あなたが作成したテストプロジェクトのフォルダに移動できたら、次に進んでください。

package.jsonを作成する


npmを使うためにはまずpackage.jsonというファイルを作成しなければなりません。簡単に作成するコマンドが用意されていますので、以下を入力してみてください。

npm init

英語がズラズラと表示されると思います。これは対話式でpackage.jsonを作成するコマンドで、質問に答えていくとpackage.jsonが作成される仕組みになっています。

とりあえずテストプロジェクトなので、なにも入力せずにEnterだけを何度も押し続けましょう。内容について今は理解する必要はありません。

name: (test)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Is this ok? (yes)

最後の質問でEnterを押すと、テストプロジェクトのフォルダ内にpackage.jsonというファイルが作成されます。エディターで開いて中身をチェックしてみましょう。

これでnpmを利用する準備は整いました。

パッケージをインストールする


npmを使ってパッケージをインストールしてみましょう。今回はテストプロジェクト内にjQueryをインストールしてみます。以下のコマンドを入力してみてください。

npm install jquery --save

すると以下のような表示になると思います。

C:\xampp\htdocs\test>npm install jquery --save
test@1.0.0 C:\xampp\htdocs\test
`-- jquery@3.2.1

npm WARN test@1.0.0 No description
npm WARN test@1.0.0 No repository field.

C:\xampp\htdocs\test>

テストプロジェクトのフォルダをチェックしてみてください。node_modulesというフォルダが新たに作成されています。その中をのぞくと、jqueryというフォルダも存在しています。

npmではnode_modulesというフォルダ内に、インストールしたパッケージを保存していきます。今回はこれでjQueryがインストールされたということです。

次にpackage.jsonを再度エディターで開いてみてください。

"dependencies": {
  "jquery": "^3.2.1"
}

このような表示が追加されていると思います。これはテストプロジェクトにjQueryのバージョン3.2.1をインストールしました、という記録です。npmを使って様々なパッケージをインストールしていくと、ここにどんどん追加されていきます。

この記録をチェックすると、自分がなんのパッケージ(ライブラリ)のどのバージョンをインストールしたのかが、ひと目でわかるようになります。

npmの基本的なコマンド


npmを使う上で必要になる基本的なコマンドについて解説します。

 

npm install パッケージ名

パッケージをインストールするコマンドです。–save または –save-dev をつけずに使うことはおすすめしません。

 

npm install パッケージ名 --save

パッケージをインストールするコマンドに –save というオプションを追加しています。これをつけると、package.jsonのdependenciesに記録が残るようになります。

本番環境にアップロードして利用するパッケージをインストールする場合に –save をつけてください。

 

npm install パッケージ名 --save-dev

–save-dev は開発環境だけで使うパッケージをインストールする時につけるオプションです。本番環境にアップロードしなくてもいいパッケージは –save-dev をつけてインストールしましょう。

package.jsonにdevDependenciesとして記録されます。

 

npm install

パッケージ名を指定しない場合は、package.jsonの dependencies devDependencies に記載されているパッケージをまとめてインストールします。

 

npm update

これまでにインストールしたパッケージを、まとめて新しいバージョンにアップデートします。個別にアップデートしたい場合は updateの後にパッケージ名を記述してください。

 

npm uninstall パッケージ名

インストールしたパッケージをアンインストールします。

 

-g オプションについて

ブログなどでnpmについて書かれた記事に -g というオプションがついていることがありますが、これはグローバルというNode.jsの一番上の階層にインストールするオプションです。

様々なプロジェクトで共通して利用するようなパッケージをインストールする場合に使うオプションで、基本的には使わなくていいものだと考えてください。

Node.js command promptの初期フォルダを設定する


スタートメニューのショートカットから普通にNode.js command promptを起動した場合、Windows10では最初にユーザーのフォルダが開かれると思います。

毎回、開発をするときにcdコマンドで開発しているプロジェクトに移動するのはめんどうなので、アプリケーションを開いた時に、指定のフォルダを開くように設定しましょう。

 

スタートメニュー

  1. スタートメニューでNode.jsを開く
  2. Node.js command promptを右クリック
  3. その他を選ぶ
  4. ファイルの場所を開く

 

エクスプローラーが開きます

ファイルの場所を開くとエクスプローラーが開きます。ここでNode.js command prompt上で右クリックを押して出てきたメニューから、ショートカットの作成を選びましょう。

ここにショートカットを作成することはできません。デスクトップ上に作成しますか?と尋ねられますので、はいを押してください。

デスクトップに作成されたNode.js command promptのショートカット上で右クリックを押し、プロパティを選んでください。

 

ショートカットのプロパティ

プロパティ内部の作業フォルダーの欄を変更しましょう。

"C:\Program Files\nodejs\"
↓
"C:\xampp\htdocs\test\"

開きたいフォルダのアドレスに変更してから、OKを押してプロパティを閉じてください。次回からそのショートカットを使ってNode.js command promptを起動すると、指定したフォルダの場所が開いた状態で開始されます。

最後に


基本的なnpmの使い方は理解してもらえたのではないでしょうか。

上記のテストプロジェクトでは、package.jsonのプロジェクト名は test で、ライセンスもISC(フリーソフトウェアライセンス)と記述されていますが、一人で開発を進める場合はそのままでも問題はありません。

しかしプロジェクトを複数人で開発する場合や、ネットに公開する場合は、正式な書き方でpackage.jsonを作成するようにしましょう。以下のサイトを参考にしてもらうとわかりやすいと思います。

 

ちなみにGame Usersのpackage.jsonはこのようになっています。

 

npmについてさらに詳しく知りたい方は、公式サイトのドキュメント(英語)を確認してください。

以上でnpmの解説を終わります。

コンセプトを推していきたい!

GitHubでソースコードを公開し、開発者募集!を掲げてみましたが、実際に興味持ってくれる人がいるのか?という問題が。GitHub自体に宣伝効果はなく、プロジェクトを公開するだけで人が大勢集まってくるわけではないので、他で宣伝しつつ地道に頑張るしかありません。

そもそもソースコードを公開してみたもののライセンスが配布自由なオープンソース・ライセンスではないので、平等でクリーンなイメージを持たれないと思います。ただそこは信頼して欲しいとしか言いようがありません。できる限りWin-Winな関係を目指します。

怪しい詐欺師のような語り口になっていますが、必要な情報をしっかり公開し、どんな人間なのかを理解してもらいやすいように、自分についての記事も掲載していくつもりです。(一番問題なのは取り分についてですが、そこについても後日記事にします)

他の人が参加してくれるとしたら、公開しているサービスがすでに面白いか、コンセプトに魅力を感じるか、開発者の人間性に興味を持ったか、そのどれかしかないと思う。Game Usersの現状を考えると、サービスを面白いと感じてくれる人は少ないと思うので、コンセプトと人間性についてアピールしていくしかない。

推していきたいのは

「ゲーム好きな開発者が集まってわちゃわちゃする」

というコンセプトですね。プログラマーはゲーム好きな人が他の職業に比べて多そうなので、このコンセプト自体に興味を持ってくれる人はいると思うのです。だからそういう人たちに面白そうだなと感じてもらえるような場所にしなければなりません。

とりあえずはテキストを充実させること、また簡単に参加できるような仕組みを作ることが大事だと思います。現状は無能プログラマーによって数年かけて書かれた変なソースコードを読み込んで、全体像を把握するところから始めなければならないので、ヘビーな仕事レベルのボリュームになっております。まずここをなんとかしないといけない。