【React】Game Usersを一緒に作ろう！【Node.js】 [無断転載禁止]©2ch.net
ゲームユーザーズはゲームユーザーのためのコミュニティサイトです。
現在、開発者を募集しています。
初心者でもWebを触ったことのないプログラマーでもOKです！
ReactやNode.jsを使える、または興味があるみなさん
ぜひ一緒にやりましょう！
デザインできる人も協力してくれると嬉しいです。
開発者募集！
https://gameusers.org/dev/blog/developer/
開発ブログ
https://gameusers.org/dev/blog/
GitHub
https://github.com/gameusers/web
Game Users
https://gameusers.org/
質問・疑問なんでも書き込んでください。
ブログの記事をここにも投稿するので読んでみてね。 Open Game Users
これからはもっとオープンにGame Usersの開発を進めていくぞ！
というわけで、WordPressでブログを開設し、GitHubでコードを公開してみました。
GitHub / Game Users Web リポジトリ
https://github.com/gameusers/web
昔から不特定多数の人間が関わる開発への強い興味があって
プログラムを本格的に勉強し始める前から
共同制作・コラボレーションツールのようなものを作りたいという思いがありました。
例えるならGitHubシステムをもっと誰もが簡単に使えるようにした場所・アプリのようなものです。
ただそんな大規模な構想を自分一人で実現させるのは、とても現実的ではないため
いつの日にか実現させたいアイデアとして今は胸に秘めているのみです。
しかし不特定多数での開発への興味は変わらず強く持っており
機会が来ればGame Usersでもぜひやってみたいと思っていたのです。
いずれコードが綺麗にまとまったときに、他の人が参画しやすいような状況が整った時に
そう思いつつ開発を進めていたのですが
悲しいかな開発が進むにつれコードは汚くなり
中身もグチャグチャになっていくのでした（無能！）
このままでは永久にオープンな開発を進める環境が作れないと考え
無理矢理でもいいのでとりあえず公開してみようと思い行動してみました。 Game Usersの現状はサーバーはFuelPHP
フロントはjQueryでSPA（シングルページアプリケーション）という状況になっています。
スキルの低い開発者がjQueryでSPAを作るとどうなるか？
知識のある方ならだいたい予想はつくのではないでしょうか。
pushStateを使ってコンテンツの切り替えを行うコードがページごとに書かれ
状態はあちこちに保存され、自分で書いたコードながら
時間をかけて読み込まないとなにがどうなっているのかわからないという状況に。
このまま無計画に開発を進めていくのは本当にやばい！
というわけで現在の開発でトレンドになっている手法を調べてみたところ
React + Reduxを発見。
ひとつの場所に状態を保存するという概念に心を打たれ
これしかない！と導入を決意しました。
まだ勉強をし始めて半月も経っていませんが
学習が進むにつれ、サーバーサイドも同じ言語で書いたほうが
良くないかという思いが芽生え（FuelPHPはマイナーすぎるし）
React & Node.jsでの開発に手を出そうとしている現状です。
ガラッとシステムを刷新しようとしている段階での
GitHub公開 ＆ 開発者募集。
しかもライセンスはオープンなものではなく
Game Users プロジェクトに帰属すると書かれている。
こんなプロジェクトに参加する人なんているの？
という話を次の記事で書こうと思います。 WEB+DB vol.97 の特集が、React
WEB+DB vol.94 の特集が、Kotlin, Electron 何をしたいのか目的がちゃんと読めない
ある一つの作品を作り上げるのが目標なのか？参加型で様々なプロジェクトの進行管理ができるのがウリなのか？これを使ってほしいのか？作ってほしいのか？
GaneUsers構想というのが己の中にはあるらしいが、そこに関する説明がないから何してるのか分からんぞ >>4
Reactって日本では地味な存在だけど
一応、雑誌で特集もされてるんですね
良さ気な技術なので、もっと流行ってもいいと思うんですが
>>5
今、Game Usersというゲーム関係のSNSを作ってて
一緒に作ってくれる人を探してるんです
普通ウェブサイトを作る時は、企業や個人が主体になって作りますが
もっとフリーダムな感じで、ゲームを好きな開発者が
コンテンツを好き勝手に作れるような場所にしたいのです
庭を用意するので、みなさん好きなお花を植えてくださいという感じです
今のところ自分で植えたお花がポツンとひとつ存在しているだけで
庭園として全然面白みがないので、誰か一緒にやりませんかというスレです
ゲーム好きな開発者のみなさんぜひ一緒にやりましょう！ コンセプトを推していきたい！
GitHubでソースコードを公開し、開発者募集！を掲げてみましたが
実際に興味持ってくれる人がいるのか？という問題が。
GitHub自体に宣伝効果はなく
プロジェクトを公開するだけで人が大勢集まってくるわけではないので
他で宣伝しつつ地道に頑張るしかありません。
そもそもソースコードを公開してみたものの
ライセンスが配布自由なオープンソース・ライセンスではないので
平等でクリーンなイメージを持たれないと思います。
ただそこは信頼して欲しいとしか言いようがありません。
できる限りWin-Winな関係を目指します。
怪しい詐欺師のような語り口になっていますが
必要な情報をしっかり公開し
どんな人間なのかを理解してもらいやすいように
自分についての記事も掲載していくつもりです。
（一番問題なのは取り分についてですが、そこについても後日記事にします） 他の人が参加してくれるとしたら
公開しているサービスがすでに面白いか
コンセプトに魅力を感じるか、開発者の人間性に興味を持ったか
そのどれかしかないと思う。Game Usersの現状を考えると
サービスを面白いと感じてくれる人は少ないと思うので
コンセプトと人間性についてアピールしていくしかない。
推していきたいのは
「ゲーム好きな開発者が集まってわちゃわちゃする」
というコンセプトですね。
プログラマーはゲーム好きな人が他の職業に比べて多そうなので
このコンセプト自体に興味を持ってくれる人はいると思うのです。
だからそういう人たちに面白そうだなと
感じてもらえるような場所にしなければなりません。
とりあえずはテキストを充実させること
また簡単に参加できるような仕組みを作ることが大事だと思います。
現状は無能プログラマーによって数年かけて書かれた
変なソースコードを読み込んで
全体像を把握するところから始めなければならないので
ヘビーな仕事レベルのボリュームになっております。
まずここをなんとかしないといけない。 開発環境の作り方について
Game Usersの開発に参加するには、
Reactが動かせる環境を作らなければならないのですが
これが本当にめんどくさい！！
なにがめんどくさいかと言えば日本語の情報が少ない上に
いろんなものをインストール＆設定しないとまともに動かせない。
具体的に挙げると以下のものが必要になります。
・ Webサーバーソフト：例）Apache
・ パッケージインストール：Node.js (npm)
・ コードチェック：例）ESLint / airbnb
・ Javascript (ES2015)変換：例）webpack / babel
ややこしいのはESLintとwebpackは
独自のコンフィグファイルを作成しないといけないところ。
React自体の学習コストが高いのに
ES2015、ESLint、webpackについても
同時に学ばなければならないのは非常に大変です。
Game Usersの開発に気軽に参加してもらいたいけど
ひとつひとつ検索して情報を仕入れながら導入してもらうというのは
ちょっとハードルが高すぎると思うので
できるだけ簡単に環境を整えてもらえるような
読みながら設定ができる情報を揃えたい。
自分はHello Worldを表示させるレベルから2、3歩進んだ程度のレベルなので
あまり高度な話はできませんが
Reactに興味を持っている人のために
多少はお役に立てるような情報を提供できれば幸いです。 記事書くのって大変！
開発環境の作り方について一通り情報を揃えようと思って、
とりあえずXAMPPのインストール、設定
アップデートについての記事を書いてみたけど、めちゃくちゃ大変でした。
ここ何日かコードを書かずにずっとテキストを書いてる感じなんですが
本当に時間があっという間に過ぎていきます。
世の中、役に立つ記事を書いてる人々はその情報を提供するために
すごい時間を費やしてるんだなということに気づかされました。
そもそもなぜXAMPPの導入記事を書く必要があるんだ
という話なんですが、これは開発環境の構築に
自分もXAMPPを使っているからなんです。
Reactに手を出そうとしてるのに、未だにXAMPP使ってるの？
と言われそうですが、手軽さが気に入って
初心者の頃からずっとXAMPPを愛用しております。
レベルの高いプログラマーの方々は
なんとなくMacや仮想環境のLinuxを使ってそうなイメージですが
実際、みなさんはどういう環境で開発をしているんでしょうか。
ずっとXAMPP使ってるような人間はまれなんかな。 Reactに興味ある人！
開発環境の作り方をまとめてみたので、ぜひ参考にしてください
XAMPP、Node.js、webpack、EditorConfig、Atomの記事もあるよ
開発環境の作り方 ? まとめページ
https://gameusers.org/dev/blog/environment/index WordPressのソーシャルボタンを作りたい
開発環境の作り方についての記事作成は一通り終わり、
今なにをしているかというと、WordPressのソーシャルボタンを作ろうとしております。
プラグインで良さ気なのを探してみたのですが
外国製は、はてなやLineに対応しておらず
日本製のは公式のソーシャルボタンを使ってるので重く（非同期ではない）
どちらもいまいち気に入らなかったのです。
そこでGame Usersで使ってるソーシャルボタンを
WordPress用に改造して独自につけようと思ったのですが
どうせやるなら他の人も使えるようなプラグインとして公開しようと考え
今、勉強しながら作り始めております。
非同期でカウントを表示して
さらにボタンのデザインをいじれるようなものにしたいと考えています。
テーマやテンプレートのような形で
好きなデザインのボタンをアップロードして使うようなイメージ。
実際できるかどうかわからないので構想だけで終わってしまうかもしれませんが
とりあえず頑張って作ってみます。 とりあえず node_modules/ は.gitignoreに追加したほうがいい ですよね
この前見つけたGitHubについて書かれてる記事でも
node_modulesは載せないようにと書かれてたので
次、編集するときに消しておきます ソーシャルボタンのサンプル
https://gameusers.org/dev/blog/wp-content/uploads/2017/04/share_buttons.jpg
ソーシャルボタンのサンプルをスタイルシートで作ってみました。
画像のボタンは全部素材サイトで集めたものです。
こんな感じで同じように画像を集めてアップロードするだけで
誰でも自分好みのソーシャルボタンを作れるようにしたいのです。
ただプラグインの設定画面で画像のアップロードが
自由にできるのかわからないのが不安ですね。
もしできなかったら、プラグインフォルダに
最初から画像を含めるしかないので
サンプルのような多様なボタンが作れなくなってしまいます。
自分がデザインセンスのある人間なら
オリジナルの画像をいろいろ提供できるのですが
こればっかりは才能がないのでどうしようもないですね。
でも、もし構想どおりに作れたら
なかなか面白そうなプラグインになりそうな気がします。 なんで2chでtwitterみたいなことしてるの？ ここにはWeb制作に関わってる人がいるからです！
最近始めたブログだけだと広がりがありません
1日のアクセスが10くらいしかないんですよ Chrome Developer Tools便利！
現在、WordPressのソーシャルボタンのプラグインを作っているのですが、
適用されているテーマのスタイルシートが邪魔をして
思うようなデザインにできないという問題に直面しました。
WordPress ソーシャルボタンサンプル
https://gameusers.org/dev/blog/wp-content/uploads/2017/04/social-buttons-20170408-1.jpg
黒猫の周囲を囲むように存在している
この謎の白枠に2時間以上費やすことに！
marginでもなく、paddingでもなく、borderでもない。
自分なりにいろいろ探してみたのですが
原因がまったく特定できず、お手上げ状態になったのですが
ChromeのDeveloper Toolsにスタイルシートの欄があったことを思い出し
開いてみるとそこに答えが書いてありました！ box-shadow
https://gameusers.org/dev/blog/wp-content/uploads/2017/04/social-buttons-20170408-2.png
box-shadow…。ほとんど使わないから存在を忘れていました。
便利なことにDeveloper Toolsの画面でチェックボックスを外すと
ブラウザ上のデザインにも変更が加えられます。
他の人が作ったものはなにが適用されているのかわからないので
この機能は非常にありがたいですね。
ChromeのDeveloper Toolsはいろいろ機能がついてそうなので
一回ちゃんと勉強した方がいいかもしれません。
フリーキャット
https://gameusers.org/dev/blog/wp-content/uploads/2017/04/social-buttons-20170408-3.jpg
ちなみにこの黒猫はクレジットを表す画像で
Game Usersのトップにリンクが貼ってあります。
ソーシャルボタンを使ってくれた方のブログから
Game Usersにアクセスしてくれる人が増えたらいいなという目論見でつけております。
こういうのってスパム認定されるんでしょうか？
SEOについての知識がないのでちょっと心配です。 MariaDB ? DEFAULT CURRENT_TIMESTAMP
WordPressのプラグイン制作、なかなか手ごわいです。
独自の書き方を学ばないといけないので、慣れるまで調べることが非常に多いです。
WordPressはデフォルトでjQueryが読み込まれるのですが、
そのバージョンが1.12.4でとても古いのです。
今後、jQuery依存のライブラリを利用するときに
バージョンの問題で使えないといったことが起こると困るので
最新のものを読み込もうとしたのですが
そのためにはまず古いものを読み込まないという処理をしなければなりません。
https://gist.github.com/az1979/34dc72976ce5c71be38ab9de3c216d4e#file-optionpackage-php
たったそれだけのことでも上記のような感じで
独自の関数をいくつか利用して書かなければならないのです。
これが本当にわけがわからない。
一応、リファレンスも用意されているのですが
どこになんの項目があるのか分かり辛い上に
解説が難解で理解するまでに時間がかかるのです。
プラグインをサクッと完成させてから
Game Usersの開発も進めていこうと思っていたのですが
世の中そんな簡単には行かないもんですね。
作っているうちに追加したい機能も増えてきたので
当初思ってたよりずっと時間がかかってしまうかもしれません。 MariaDB 日時のデフォルト値
プラグインで使うデータベースのテーブルを作成するコードは以下になるのですが
これを書いているときに、便利な日時のデフォルト値の設定方法を知りました。
https://gist.github.com/az1979/e5e85e157ace7d506f8b3fd2c9c5d489#file-createdatabasetable-php
datetime_renewal DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP NOT NULL
データベースの日時のデフォルト値をこのように設定しておけば
Updateするだけで自動的に日時が更新されることを知って
ちょっとしたショックを受けました。
今までデータベースを更新するたびに 0000-00-00 00:00:00 形式で
日時を作成してから保存してたのに、あの手間はなんだったんだという。
すごく便利なので、みなさんもぜひ使ってみてください。
追記: 記事を書いてすぐに
これってもしかして新しい機能なんじゃないかと気になって調べてみたところ
MySQL5.6.5からの機能でした。
またMySQLが古い環境だと、DEFAULT CURRENT_TIMESTAMPが
2つあるとエラーが出るようなので、どのみち上に挙げたSQL文は使えません。
公式によるとWordPressの推奨環境は
MySQL 5.6 / MariaDB 10.0以上ですが、MySQL 5.2.4でも動くようです。
プラグインは環境が様々なので、ちゃんと考えてコードを書かないとダメですね。
プラグインの設定画面
https://gameusers.org/dev/blog/wp-content/uploads/2017/04/wp-option-20170414-1.jpg
プラグインの制作は設定画面を表示するところまで来ました。
Bootstrapのタブを利用しています。これから設定画面の中身を作っていきます。 WordPressのプラグインだけでなく？
現在の設定画面
https://gameusers.org/dev/blog/wp-content/uploads/2017/04/wp-option-20170420-1.jpg
前の記事から6日も経ってるのに進みが遅い！
なぜ進みが遅くなっているのかというと、途中で方針転換があったためです。
当初はWordPressで使えるプラグインの構想だったのですが
作っていくうちに、どうせなら普通のウェブサイトにも使える方がいいよな？
ということで一部がやり直しになりました。
WordPressはPHPで動いているのですが
PHPでソーシャルボタンを出力する仕様にすると
利用できない環境が出てきてしまうため
Javascriptでコードを出力する仕様にしたのです。
数日かけて書いたPHPのコードを書き直す悲しさ
モチベーションの上がらなさでこうなってしまいました。
毎回、自分はこうなってしまうんだよなぁ。
自分なりにしっかり構想を練っているつもりなんですが
作っていくうちに構想がどんどん膨らんでいき
同じ部分を何度も書き直して無駄に時間が費やされるのです。
これ客だったら最悪なクライアントですね。
途中で方針転換を繰り返して制作者に余計な作業を増やすという。
他人を巻き込んでこんなことをしていると非難轟々になりそうなので
いい加減学習したいところなのですが
妄想だけは無駄に膨らむタイプなので、この病の治療は無理かもしれません。
いつの日か、誰かに作業を依頼できる身分になれたら
最初から仕様変更ありの契約でお金を上積みしとかないとダメですね。 まだ1/3
ブログの更新が疎かになってしまいました。記事を書くのって結構脳を使うので、
制作作業後にやるのは辛いものがある。…という言い訳でしばらく放置してしまいました。
せっかくブログを作ったんだから、もうちょっと真面目に更新しないと。
2017/5/12 進捗状況
https://gameusers.org/dev/blog/wp-content/uploads/2017/05/wp-option-20170512-1.png
画像を見てもらうとわかりますが、エディットする項目が非常に多くなりました。
ずらーっと縦に長いページに羅列されるフォームの数々。
この値も編集できるようにした方がいいよな
と思いつくまま追加していくとこんな感じになりました。
細かく編集できるのはいいのですが
ユーザーの方にめんどくさそうに思われるんじゃないかと、ちょっと心配しております。
進捗状況的には全作業の1/3くらいは終わったかな？というところです。
1ヶ月かけて1/3は、さすがに時間がかかりすぎに思いますが
この後、フキダシを使わないバージョン（画像にシェア数を重ねるタイプ）と
ソーシャルボタンの公式ページ、課金システムを作るつもりなので
まだまだ作業が終わりそうにありません。
課金システムについて説明すると
ソーシャルボタンを使うとネコの画像が表示されてリンクが貼られるのですが
そのリンクを外したい方は課金してくださいというシステムにしようと思っております。
Web制作の現場ではWordPressの案件が結構多いようなので
そういう形でWordPressを商用利用しているユーザーの方が
有料プランを利用してくれるとありがたいな、という思惑で作っています。
WordPressのテーマを作って収益あげてる人もいるみたいなので
うまくいってくれると嬉しいのですが。 有名ブロガーから学ぶ、人気ブログを作るための3つのルール
https://gameusers.org/dev/blog/notes/20170522-1
記事が長いので興味ある人はブログで読んでね
Kindle Unlimitedで読んだブログ集客本の内容をまとめてみました https://gameusers.org/dev/blog/wp-content/uploads/2017/06/wp-option-20170618-1-300x220.jpg
すでにソーシャルボタンを出力するコード自体はほぼ完成しており
しばらくソーシャルボタンを作成するページを作っていたのですが
なんと途中でまたもコードの大幅書き直しが発生しました。
画像はWordPressのプラグイン画面なのですが
これはソーシャルボタンを作成するページで
ここで画像をアップロードして設定を行うと
WordPress上でソーシャルボタンが表示されるという仕組みになっています。
普通のサイトでも利用できるように
ソーシャルボタンの作成が行えるページを公式ページとしても
公開する予定なのですが
このページをなにも考えずjQueryで作っていたのです。
WordPressはjQueryが利用されているので、深く考えずにそのまま。 このWordPressのページと
公式ページのコードは共通化しようと考えていたので
当然、Game Users内に設置する公式ページもjQueryになるわけです。
jQueryベースはもうやめて
Reactをメインにして行こうという高い目標を立てたにも関わらず
なぜ未だに古いシステムで作っているんだ？
Game UsersをReactで書き直そうとしていた高い志はどこへ行ったんだ？
という疑念が生じ、jQueryで書いていたソーシャルボタン作成ページを
Reactで書き直すことになりました。
結構、進んでいた段階での書き直し作業。
しかも実際、進めてみるとReactの勝手がわからず
サクサクというわけにも行かず、どんどん時間が過ぎていきます。
本当になにやってんだろうなぁ。
当初すべてPHPで書いていたのをJavascriptに書き直した件も合わせると
2回目の書き直し作業。さすがにアホすぎて怖くなってくる！ 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を始めました。
僕と同じような状況に陥った方なら、賢くなくてもモチベーションでなんとかできるのではないかと思います。
一度、簡単にでも使えるようになると良さを感じられるので
興味のある方はぜひチャレンジしてみてください。 Uncaught TypeError: Class constructor ExtensionJs cannot be invoked without ‘new’
クラスを継承しようと思ったのですが、このエラーが出てうまくいきませんでした。
結論から言うと、拡張子が .js のファイルからクラスを継承しようとすると
このエラーが出るようです。もしかしたらうちの環境だけで
普通はこんなことで行き詰まったりしないのかもしれないですが
自分はこれで一日潰してしまったので同じエラーで困る人が出たときのために情報を残しておきます。
Reactを利用している場合は、JSXの記述がないファイルでも
拡張子はすべて .jsx にしておいた方がいいのかもしれません。 // extension-js.js
export default class ExtensionJs {
constructor() {
console.log('ExtensionJs');
}
}
// extension-jsx.jsx
export default class ExtensionJsx {
constructor() {
console.log('ExtensionJsx');
}
} // entry.jsx
import ExtensionJs from './extension-js';
import ExtensionJsx from './extension-jsx';
class ClassA extends ExtensionJs {
output() {
console.log('Success ClassA');
}
}
const instanceClassA = new ClassA();
instanceClassA.output();// Uncaught TypeError: Class constructor ExtensionJs cannot be invoked without 'new'
class ClassB extends ExtensionJsx {
output() {
console.log('Success ClassB');
}
}
const instanceClassB = new ClassB();
instanceClassB.output();// Success ClassB
https://gist.github.com/az1979/db63d32583ad912406a68c328a6c79fa#file-invoked-without-new-jsx ソーシャルボタン開発終盤
思いつきでカスタマイズできるソーシャルボタンを作り始めてはや4ヶ月。
どのみちBabelでトランスパイルするんだからということで
XMLHttpRequestをやめてfetchを使い、async awaitも導入
なんだかんだと新しいことを覚えながらやってきたとは言え
さすがに4ヶ月は時間がかかりすぎ。しかもまだ完成してないという。
2017/8/23 進捗状況
https://gameusers.org/dev/blog/wp-content/uploads/2017/08/wp-option-20170823-1.jpg
現在はこんな感じになっています。
画像のコンテンツはアイコンをダウンロードしてくると
こんな感じのソーシャルボタンが作れますと
サンプルを含めた素材サイトを紹介するタブです。 ソーシャルボタンを表示するコードと設定するページは
だいたい完成していて、今はソーシャルボタンの公式ページを作るべく
Game UsersをReact化しています。
Game Users内に公式ページを設置するつもりなので
そちらも同時にReactで書き直さないといけないのです。
これがまた結構大変！
PHPで書かれているものを一から書き直しており
しかも他の人が手を加えやすいように意識しながら
ファイルをできるだけひとところにまとめようとしております。
今はひとつのページを表示するために必要なファイルがあちこちに散らばっていて
他の人が状況を把握するのが困難になっているので
それを改善すべく頑張っているのです。
Game Users React化 進捗状況
https://gameusers.org/dev/blog/wp-content/uploads/2017/08/wp-option-20170823-2.jpg
ヘッダーとフッターの表面的な部分はReactで書き直せています。
一度表示すると、以降はサクサク動いてなかなかいい感じです。 ReactでMasonryを使用する
MasonryというJavascript製のライブラリーを利用すると
カード型デザインのページ内で
自動的に各カードを並べかえてくれます。
カードのサイズがバラバラな場合
均等に横並びにするだけでは無駄なスペースが出来てしまうので
これを使うことで石段を積んだような綺麗な並びに作り変えられるのです。
このライブラリーはとても気に入っているので
なんとかReact上でも使いたいと思い導入してみたのですが
REST APIにアクセス → データ取得 → カード数の増減
こういった形でDOMに反映してから
ライフサイクルメソッドのcomponentDidUpdate内でレイアウトしてみたところ
ちらつきが発生してしまいました。
DOMに反映されてから並び替えるという順序になるため
どうしても一瞬並び替える前のカードが表示されてしまうのです。 そこで他の人がどのようにReactにMasonryのライブラリーを
導入しているのか調べてみたところ
有志の方がreact-masonry-componentという
コンポーネントを公開してくれていました。
これを使ってみたところ非常に簡単にカードの並び替え機能を
利用することができるようになり、ちらつきもなし！
並び替え動画
https://gameusers.org/dev/blog/wp-content/uploads/2017/08/2017-08-27-13-09-23.mp4
いやーありがたい！
優秀な人が様々なコンポーネントを提供してくれているおかげで本当に助かります。
なんかこういう無償で何かを提供してくれている人たちに
お礼の寄付をするシステムがあればいいのになと思いますね。 GitHubを全然更新していませんでした。
日々の作業が終わった後にファイルをアップロードするだけなのに、
習慣がないので忘れてしまいます。
Atomを使ってるので作業自体はすごく簡単なんですが。
というかアップロードじゃなくてプッシュというのが正しいのかな？
Gitの概念と用語が難しくていまだによくわかっていません。
久しぶりに更新したついでに
GitHubの容量の上限について気になったので調べてみたところ
リポジトリは1GBが上限サイズのようです。
それ以上のサイズになると警告メールが送られてくるらしい。 https://api.github.com/repos/gameusers/web
このアドレスでリポジトリのサイズがチェックできるので
アクセスしてみたところ “size”: 39395 と書かれており
なんとまだ39MBしか使っていないようです。
ローカルファイルだと400MBくらいあったのですが
node_modulesや余計な画像などのファイルを除くと、すごく小さくなりますね。
今後は毎日忘れずにプッシュしてこうと思います。
現在の更新状況
旧デザイン
https://gameusers.org/dev/blog/wp-content/uploads/2017/09/notification-20170903-1.jpg
新デザイン
https://gameusers.org/dev/blog/wp-content/uploads/2017/09/notification-20170903-2.jpg
モーダルで表示する通知を綺麗にしています。
他のデザインに合わせてこちらもカード型にしました。 React関連パッケージのバージョンによって起こる問題
npmのパッケージは気が向いたときにアップデートしているのですが、
まれにアップデートをしたせいでこれまでどおりに動かなくなることがあります。
現在、react関係のパッケージで起こっている問題を参考までに載せておきます。
もしかするとWindows環境だけで起こる問題で
MacやLinux上では起こらないかもしれませんのであしからず。
eslint-plugin-jsx-a11yのバージョンが5.1.1より上の場合エラーが出る。
コードをルールに沿って正しく記述するためのチェック用パッケージなのですが
6.0.2にアップデートすると以下のエラーが出るようになってしまいました。
definition for rule 'jsx-a11y/href-no-hash' was not found
5.1.1に戻すとエラーが出なくなります。
npm install eslint-plugin-jsx-a11y@5.1.1 --save-dev webpackをインストールする際にfsevents絡みでエラーが出てしまう。
ルートの権限でインストールしてくださいと出るのですが
その際、毎回 fsevents 絡みのエラーが出ます。
npm ERR! Please try running this command again as root/Administrator.
npmのバージョンを5.0.4に戻すとエラーが起きません。
npm install -g npm@5.0.4
webpackでbuildする際にファイルを圧縮することができない。
久しぶりにファイルを圧縮してみようと思い
プロダクション版でファイルを出力しようとしたところ
uglifyが正常にできなくなっていました。
Uglify SyntaxError: Unexpected token: punc ())
上記のエラーが表示されます。
調べてみたところ、ES6絡み？で圧縮ができなくなっているようです。
webpackに備え付けられているuglifyだと動かないようなので
パッケージ uglify-js（バージョン2）& uglifyjs-webpack-plugin（最新のβバージョン）を
インストールして利用してみたところ圧縮が可能になりました。
npm install uglify-js@2 --save-dev
npm install uglifyjs-webpack-plugin@1.0.0-beta.2 --save-dev
https://github.com/webpack-contrib/uglifyjs-webpack-plugin/issues/31
https://stackoverflow.com/questions/44287584/how-to-minify-es6-code-using-webpack/45088328#45088328
https://github.com/webpack-contrib/uglifyjs-webpack-plugin
同じエラーで悩んでいる方がおられましたら参考にしてください。 Reactでドロワーメニューを作る
Reactで作っているサイトの内部にドロワーメニューをつけたい！
というわけで、jQuery製のライブラリーをReact上で動かそうとしてみるも失敗。
React用に公開されているパッケージをいくつか試してみるも失敗。
いろいろやってみたのになぜか正常に動かない…。
仕方がないので自分で作ってみることにしました。
なんとなく難しそうなイメージがあったのですが、
いざ作り始めてみると思ってたよりも簡単でした。
完成品
https://gameusers.org/dev/blog/wp-content/uploads/2017/09/2017-09-17-11-22-39.mp4 画面遷移が起こる際にフェードイン・フェードアウトなどの
アクションを挟み込める velocity-react というパッケージを使うと
シンプルなコードで実装することができます。デモもいい感じです。
https://github.com/twitter-fabric/velocity-react
http://twitter-fabric.github.io/velocity-react/
npm install velocity-react --save
まずnpmでパッケージをインストールしましょう。
コード
https://gist.github.com/az1979/868c058249d4d80505448daed8fd5f32
VelocityComponentはすでに存在している要素に対して
アニメーションをつける際に利用し、VelocityTransitionGroupは
要素を新しく追加したり、削除したりする際に利用します。
上記コードでは、ドロワーメニューのtranslateXをマイナスに指定して
画面外に配置しておき、メニューを表示するボタンをクリックすると
translateXが0に移行し、アニメーションつきで表示されるように設定されています。 メニュー外側の黒い半透明のオーバーレイ部分は
VelocityTransitionGroupで作っており
メニューがactiveになった際に要素が追加される形で
表示されるようになっています。
なぜオーバーレイを要素の追加・削除で実装しているかというと
オーバーレイ部分には、クリックするとメニューを閉じる関数が設定がされており
メニューが表示されていない間は、オーバーレイの要素を削除することで
同時にそのクリック判定も消えるようにしているのです
（ずっとオーバーレイのクリック判定が残っていると、コンテンツのリンクが機能しなくなります）
通常スタイルシートのdisplay: noneを設定すれば
クリック判定も消えるようなのですが、なぜかうまくいかなかったので
表示・非表示のたびに追加・削除する形で実装しています。
※ ドロワーメニューのコードは画面遷移で更新されない場所に設置してください。
更新されるコンテンツの内部にメニューを設置すると
画面遷移とともにメニュー自体も再描画されて
ドロワーメニューが閉じるアクションが省略されてしまいます。
できるだけ上の方の階層に設置することをおすすめします。 スタイルシート
https://gist.github.com/az1979/95119067ce1f0f62cc3bbf03778f7a5a
デザインは各自好きなように編集してください。
上記スタイルシートではMaterial iconsをリンク横に表示するデザインになっています。
Material iconsを利用したい場合は公式サイトを確認してください。
シンプルなコードでカスタマイズも可能なドロワーメニューを設置したい方は
ぜひこの記事を参考にしてみてください。
参考リンク
http://velocityjs.org/
http://qiita.com/nabepon/items/c005a7d4491fd04b453e package.jsonに設定を書けるって知ってました？
自分は最近知りました。プロジェクトのルートディレクトリーに
見慣れないファイル（postcss.config.js）があったのでチェックしてみたら
パッケージで使用する設定ファイルでした。
自分で作ったのにすっかり忘れていたのです。
npmでいろいろパッケージをインストールして使っていると
別途設定ファイルを作らないといけなくなることがあります。
例えば .babelrc / eslintrc.json / .stylelintrc / postcss.config.js
こんな感じのファイルです。1つや2つくらいなら大して気になりませんが
3つ4つ…と増えていくと、プロジェクトのルートディレクトリーがごちゃごちゃしてくるので
ひとつのファイルにまとめられるならそうしたいと思ったのです。
ツールの設定をpackage.jsonに書く
https://chocolateorange.github.io/2017/05/03/01/
そこでウェブを検索してみたところ、こちらの記事を発見し
詳しく解説してくれていたので、この記事にならって
自分も設定ファイルをpackage.jsonにまとめてみました。
パッと見よくわからないファイルが減ってすっきりしたので
みなさんにもおすすめします。
ちなみに 2017/10/1 現在のpackage.jsonの設定部分はこんな感じになっています。
https://gist.github.com/az1979/2f5578c628a9b35f6866c504560488d3 現在の開発状況 ? 2017/10/08
シェアボタン公式トップページ
https://gameusers.org/dev/blog/wp-content/uploads/2017/10/share-buttons-top-20171008.jpg
シェアボタンの公式ページがだいたい完成しました。
シェアボタンを作成する機能は問題なく動作しており
次は有料プランを申し込むページを作成する段階です。
PayPalのようなネット上で支払いを行えるサービスを提供している企業は
海外にもたくさんあるので、それらを吟味しながら
良さ気なサービスを採用しようと思います。
シェアボタンは海外の人にも使ってもらえるように
いずれ複数言語で提供したいという思いがあるため
支払いサービスも多くの言語に対応している海外のサービスの方がいいのかなと考えています。 最近、GitHubにファイルを上げていませんでした。
なぜかというとWordPressのプラグインは100% GPLで作らないと
公式の場所に置いてもらえません。
ライセンスが100% GPLでない場合
ネットから実行ファイルをダウンロードしてきて使用する
スマホの野良アプリのような扱いになってしまため
Game Users Share Buttons部分のライセンスもGPLで作らないといけないのです。
そのため、Game UsersのWebリポジトリに含めてプッシュすることができなくなっているのです。
一緒にアップロードするとライセンス汚染が発生するようなので。
ローカルのシェアボタンのアドレスは
https://localhost/gameusers/public/app/share-buttons
なのですが、現在、GitHubのリポジトリをクローンして上記URLにアクセスしても
ファイルが足りないためエラーが起こってしまう状況になっています。
完成したら別リポジトリで公開する予定なのですが
正常に動作させるためには、そのファイルを特定の場所に設置してから
アクセスしなければならないという非常にややこしいことになっています。
汚染が発生するライセンスは本当にめんどくさいですね。 >>42
DOM に直接アクセスするのは、ref属性
jQuery プラグインをラップした、React コンポーネントを作って、
自分で後片付けなども記述する
詳細は「入門 React ――コンポーネントベースのWebフロントエンド開発」の本の、
8章「DOM操作」を参照 >>49
調べてみたんですが
ref属性というものがあったんですね、知りませんでした
jQueryプラグインの動作が怪しい場合などに試してみようと思います
良い情報をありがとうございます！ jQuery プラグインを作っている人の、技術レベルによる
自分の要素よりも、子孫の要素しか更新していないのなら、何とか使えるけど、
自分の要素よりも親要素や、グローバルな要素を更新しているような、
プラグインなら使えない
つまり、完全にカプセル化できている、プラグインなら使えるけど、
場当たり的に作られているようなものは使えない なるほど非常に勉強になります
知識不足のせいで動かせないのかと思っていましたが
プラグインの作りによっては諦めるしかないこともあるんですね
覚えておきます！
ReactもjQuery並にライブラリが充実してくれると嬉しいんですが
こなれてくる前に、また新しい技術が出てきて
そちらが主流になったりするかもしれないのが悩ましいところですね
Web界隈は本当に流れが早い… Reactのディレクトリー構成を変更
https://gameusers.org/dev/blog/wp-content/uploads/2017/10/files-20171015-1.png
後々のことを考えると、
ディレクトリー構成を変えたほうがいいのではないかという思いに至り
画像のように変更してみました。 mainタグの内部のコンテンツ部分と
ヘッダーやフッターなどの共通部分を分離。
Game Usersは他の人も気軽にコンテンツを追加できるようにしたいという目標があるので
新たにページを追加する場合は共通部分のコードは触らずに
そのページはそのページだけで独立してファイルを作成できるようにしたいのです。 ただこの作業をやってると
自分の能力を超えてる部分に手を出しているという不安感が漂います。
到達点はわかっているのですが、知識が足りていないので
今やっていることが正しいのかどうかがわかりません。
ディレクトリー構成だけはそれっぽくなっているのですが。 よくわからないNGワードに引っかかったので細切れに投稿しました >>1
お前まだ自殺してなかったのか
もう38歳だろ
その年齢で職歴なし童貞は自殺以外に社会貢献ないぞ 
