【React】Game Usersを一緒に作ろう！【Node.js】 [無断転載禁止]©2ch.net

[過去ﾛｸﾞ] 【React】Game Usersを一緒に作ろう！【Node.js】 [無断転載禁止]©2ch.net (253ﾚｽ)
上下前次 1-新

このｽﾚｯﾄﾞは過去ﾛｸﾞ倉庫に格納されています｡
次ｽﾚ検索歴削→次ｽﾚ栞削→次ｽﾚ過去ﾛｸﾞﾒﾆｭｰ

21: あづみ ◆WYiR3RzL3U 2017/04/15(土)00:00 ID:jVmNsNw5(1) AAS
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 形式で
日時を作成してから保存してたのに、あの手間はなんだったんだという。
省13

22: あづみ ◆WYiR3RzL3U 2017/04/20(木)23:34 ID:7/HYbBCV(1) AAS
WordPressのプラグインだけでなく？

現在の設定画面
https://gameusers.org/dev/blog/wp-content/uploads/2017/04/wp-option-20170420-1.jpg

前の記事から6日も経ってるのに進みが遅い！

なぜ進みが遅くなっているのかというと、途中で方針転換があったためです。
当初はWordPressで使えるプラグインの構想だったのですが
作っていくうちに、どうせなら普通のウェブサイトにも使える方がいいよな？
ということで一部がやり直しになりました。

WordPressはPHPで動いているのですが
PHPでソーシャルボタンを出力する仕様にすると
省15

23: あづみ ◆WYiR3RzL3U 2017/05/12(金)16:52 ID:fB8Uql0I(1) AAS
まだ1/3

ブログの更新が疎かになってしまいました。記事を書くのって結構脳を使うので、
制作作業後にやるのは辛いものがある。…という言い訳でしばらく放置してしまいました。
せっかくブログを作ったんだから、もうちょっと真面目に更新しないと。

2017/5/12 進捗状況
https://gameusers.org/dev/blog/wp-content/uploads/2017/05/wp-option-20170512-1.png

画像を見てもらうとわかりますが、エディットする項目が非常に多くなりました。
ずらーっと縦に長いページに羅列されるフォームの数々。
この値も編集できるようにした方がいいよな
と思いつくまま追加していくとこんな感じになりました。
省15

24: あづみ ◆WYiR3RzL3U 2017/05/22(月)01:25 ID:c2BJY7oP(1) AAS
有名ブロガーから学ぶ、人気ブログを作るための3つのルール
https://gameusers.org/dev/blog/notes/20170522-1

記事が長いので興味ある人はブログで読んでね
Kindle Unlimitedで読んだブログ集客本の内容をまとめてみました

25: あづみ ◆WYiR3RzL3U 2017/06/18(日)12:03 ID:DCperFa8(1) AAS
https://gameusers.org/dev/blog/wp-content/uploads/2017/06/wp-option-20170618-1-300x220.jpg

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

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

普通のサイトでも利用できるように
ソーシャルボタンの作成が行えるページを公式ページとしても
省3

26: あづみ ◆WYiR3RzL3U 2017/06/18(日)12:03 ID:??? AAS
このWordPressのページと
公式ページのコードは共通化しようと考えていたので
当然、Game Users内に設置する公式ページもjQueryになるわけです。

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

結構、進んでいた段階での書き直し作業。
省5

27: あづみ ◆WYiR3RzL3U 2017/06/25(日)12:45 ID:hx0CrLeH(1) AAS
Reactで実際にアプリケーションを作ってみて感じたこと

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

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

28: あづみ ◆WYiR3RzL3U 2017/06/25(日)12:47 ID:??? AAS
自由度が高すぎる

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

例えばReactについて調べてるとよく名前が上がるパッケージに
省10

29: あづみ ◆WYiR3RzL3U 2017/06/25(日)12:48 ID:??? AAS
学習コストが高い

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

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

30: あづみ ◆WYiR3RzL3U 2017/06/25(日)12:49 ID:??? AAS
最後に

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

そこで感じたのは、我流のDOM管理が
React (&Redux)のルールに従って管理されるようになるので
構成がシンプルでわかりやすくなって、ごちゃごちゃしなくなります。
ここが一番のメリットですね。
省12

31: あづみ ◆WYiR3RzL3U 2017/07/26(水)18:37 ID:4ibDvlgQ(1) AAS
Uncaught TypeError: Class constructor ExtensionJs cannot be invoked without ‘new’

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

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

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

32: あづみ ◆WYiR3RzL3U 2017/07/26(水)18:38 ID:??? AAS
// extension-js.js
export default class ExtensionJs {
constructor() {
console.log('ExtensionJs');
}
}

// extension-jsx.jsx
export default class ExtensionJsx {
constructor() {
console.log('ExtensionJsx');
省2

33: あづみ ◆WYiR3RzL3U 2017/07/26(水)18:39 ID:??? AAS
// 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'
省8

34: あづみ ◆WYiR3RzL3U 2017/08/23(水)21:22 ID:rrmCkhEY(1) AAS
ソーシャルボタン開発終盤

思いつきでカスタマイズできるソーシャルボタンを作り始めてはや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

現在はこんな感じになっています。
画像のコンテンツはアイコンをダウンロードしてくると
省2

35: あづみ ◆WYiR3RzL3U 2017/08/23(水)21:26 ID:??? AAS
ソーシャルボタンを表示するコードと設定するページは
だいたい完成していて、今はソーシャルボタンの公式ページを作るべく
Game UsersをReact化しています。
Game Users内に公式ページを設置するつもりなので
そちらも同時にReactで書き直さないといけないのです。

これがまた結構大変！
PHPで書かれているものを一から書き直しており
しかも他の人が手を加えやすいように意識しながら
ファイルをできるだけひとところにまとめようとしております。
今はひとつのページを表示するために必要なファイルがあちこちに散らばっていて
省6

36: あづみ ◆WYiR3RzL3U 2017/08/27(日)13:42 ID:xOzwR13y(1/2) AAS
ReactでMasonryを使用する

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

このライブラリーはとても気に入っているので
なんとかReact上でも使いたいと思い導入してみたのですが
REST APIにアクセス → データ取得 → カード数の増減
省5

37: あづみ ◆WYiR3RzL3U 2017/08/27(日)13:44 ID:xOzwR13y(2/2) AAS
そこで他の人がどのようにReactにMasonryのライブラリーを
導入しているのか調べてみたところ
有志の方がreact-masonry-componentという
コンポーネントを公開してくれていました。
これを使ってみたところ非常に簡単にカードの並び替え機能を
利用することができるようになり、ちらつきもなし！

並び替え動画
https://gameusers.org/dev/blog/wp-content/uploads/2017/08/2017-08-27-13-09-23.mp4

いやーありがたい！
優秀な人が様々なコンポーネントを提供してくれているおかげで本当に助かります。
省2

38: あづみ ◆WYiR3RzL3U 2017/09/03(日)12:39 ID:??? AAS
GitHubを全然更新していませんでした。
日々の作業が終わった後にファイルをアップロードするだけなのに、
習慣がないので忘れてしまいます。
Atomを使ってるので作業自体はすごく簡単なんですが。
というかアップロードじゃなくてプッシュというのが正しいのかな？
Gitの概念と用語が難しくていまだによくわかっていません。

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

39: あづみ ◆WYiR3RzL3U 2017/09/03(日)12:42 ID:Zb0uKC1A(1) AAS
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
省4

40: あづみ ◆WYiR3RzL3U 2017/09/16(土)22:10 ID:??? AAS
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
省2

上下前次 1-新書関写板覧索設栞歴

あと 213 ﾚｽあります
ｽﾚ情報赤ﾚｽ抽出画像ﾚｽ抽出歴の未読ｽﾚ AAｻﾑﾈｲﾙ

ぬこの手ぬこTOP 0.009s