技術書典4でサークルチェック漏れした「Libraries of React」の電子版を買って読んだ感想
先日の技術書典4で購入漏れしていた「Libraries of React（れいな＠底なし沼の魔女）」を読みました。 megablacklabel.booth.pm
たまたまフォローしていたので、Twitterを眺めていたら購入漏れに気づき、Boothで買いました。 やっぱし、電子版も出してくれると大変助かります。
本著は、作者様が知り得たReact.jsに関する知見のうち
- 流行りに沿ったコーディング
- ゼロコンフィグ・モジュールハンドラー
- 日本語情報の少ない良さげなモジュール
についてまとめてくれた同人誌です。
で、購入したら
了解です！当方、勉強始めたばっかで簡単な管理画面とFirebaseと連携したスケジュール管理アプリ、クイズアプリ作成中くらいなステータスなんであまり期待しないでくださいw
— Ricck/Riki (@Ricckn) 2018年4月26日
とあったので、書きなれないですが感想を書いてみます。
また、私のReact.jsについてのステータスは上にTweetにあるようなレベルで、初期の学習はUdemyの下記講座を利用しました。 www.udemy.com
1章 Stateless Functional Component（SFC）で可読性向上
Functional Componentについては、上記講座で学んだので、Stateを持つ必要がないComponentについてはすでに利用していました。 が、もしどこかのサイトで勉強して書いている人がいる場合、公式のドキュメントを読んでいないとこういう知識は漏れてしまうので、紹介されているのは助かります。
2章 より良くReactを使うテクニック
個人的にはこの章がすごく助かりました。 基本的には動画で学んだことや、ちょろちょろ見ているサンプルコードで知識を得ているくらいなので、この章にかかれている細かいテクニックなどを見落としがちなのが個人的にも課題だなぁと思っていたところです。
たとえば、「JSXのドット記法」なんかはFunctional Componentとして細かくファイル分割されている今の環境では一発で可読性が良くなりそうな知見だなぁと感じます。 reactjs.org
3章 recomposeでHOCsを扱う
Higher-Order Componentsという概念はこの章で初めて知りました。
（わからんこといっぱいあってすごく助かる・・・。）
「作成したComponentに処理を追加することができるラッパー」ということで、大分理解できたのですが、これはちょっと書いてみないと実感できないんだろうなぁという印象。
幾つか記事も合わせて調べてみましたが、Componentの巨大化を防いだり、再利用性を高めるという意味ですごく良いかもしれないですね。
実際どこかで使ってみたい。
とまぁここまで読んでみて、時代はやっぱしSFCで書くのを推奨しているんだなぁと思った次第。小さいアプリくらいだと余り困らないけど大規模になればなるほど困るのかな・・・？
ここは実感として持てるほど経験がつめていないので、なんとか理解できたらなぁと感じるところ。
4章 ゼロコンフィグ・モジュールハンドラー
今のところすでに組み込み終わった、オレオレ webpack.config.js とか .eslintrc.js とかでやっているのであまり恩恵はないのかなぁ？と思いました。
ただ、本著にもあるように
選択肢の多さで、コーディング以外のところで体力を使う辛い状況から「設定ファイルを0にして実際の開発に注力する」
の部分もあるように、開始初期はここでかなり躓いた記憶があるので、意義はすごくわかる。
自分みたいに趣味レベルで書いてるくらいだと、コンフィグをいじる機会があまりないので困ってなかったけど、ならむしろこっちでいいんじゃね？という気分はあります。
5章 開発時のお勧めモジュール
styled-componentについて
www.styled-components.com
これは使いたいなぁ・・・。
とにかく、React.jsはCSSをどう書くのが良いのかよくわかって無くて、かと言ってsassを普通に読み込ませるのなぁとおもっていたところ。これ以外も調べてなんかCSS書く方法は検討したい。
今のところは、Material-UIをメインで使ってるので底まで困ってないけど、独自に書きたいというのはそうそう遠くないミライに来る予定なので、準備します。
読み終えて
個人的に一番良かったのが、「一般的な技術書と比べてコンパクトにまとまっている」という部分で、Webの記事以上のまとまり具合、読みやすさで、普通に出版されているよりもコンパクトでライトというのが、すごく気に入ってます。
内容については、とても自分の現状にマッチしていると感じました。
なので上のTweetにもありますが、「とりあえず環境は組み終わった、書ける、いくつか書いてみた、けどベストプラクティスなんぞや」みたいな人にはいいんじゃないかなぁと。
ということで、React.js書いてて楽しいけど周りにあまり聞ける人がいなくてどう書いたら良いんだろ、もっと良い書き方がある気がするみたいに悩んでる人がいたらこちらの本買ってみてください。 megablacklabel.booth.pm
最後に、このような素敵な本を書いていただき、ありがとうございました！！！！！！！！！
現在の自分の技術スタックについて
誕生日が二日後に迫っていて、ついでに転職する時自分のまとまったスキルについてのリストがなくてだるかったので現時点のものをまとめておく。
※ 2018/04/19現在
そもそも
はじまりはMumbleサーバー
FEZっていう当時の神ゲーがあって、VCしたかったんですけどSkypeは重いわTSは音質悪いわってことでMumbleというVCツールを建てようとしたところから、それっぽいことが始まりました。
そこでXAMPPでWordPress動かしたりしてた、懐かしい・・・。
ということで以下本編。
言語
JavaScript
jQuery
- JavaScriptの勉強と言うか、そもそもの私のプログラム勉強スタートが、学校の授業でWebサイトを作るというところから始まっていて、その時「Light Box」をjQuery Pluginとして入れるところをやって、そこからTwitterAPI触るのにハマっていってという流れで結構の間お世話になった。
React.js
- ずっとjQueryで書いてたけど、カルマが溜まっていったのと作りたいアプリもあったことから勉強した。
- 簡単な管理アプリなんかはもうReact.js + (Node.js + MongoDB or Firebase)で作ってる
- React Nativeは勉強中。NativeBaseが良い。
Redux
- 使ってみたけど小規模なアプリで利用している為、そこまで恩恵は受けてない。Fluxの概念はなんとなくわかった。
Firebase
- ここにいれるか悩んだけど、使っててすごく良い、面白い。簡単に色々作れる。React.jsとの親和性が高い。
PHP
FuelPHP
Laravel
WordPress
- WebがメインなのではっぱしWordPressは触る機会が多かった。
- 自分のBlogもWordPressを利用中
- カスタムタクソノミーとかフォームとかをいじって、専用の入力ページを作ったり、テーマをカスタマイズしたり作ったりとかやった。
PHP Excel
Node.js
Express
Golang
Cシャープ
- なんか
#が表示されない - ASP.NETの開発で。バックエンドはPostgreSQL
- Office365APIとの連携で、カレンダーアプリを開発
- 調べながらならできる。
HTML / CSS / SASS
- 普通に使える。
- mixinとかその辺もまぁ。
- 普通以上には使えない（絵を描くとか）
DB
MySQL
MongoDB
PostgreSQL
SQL Server
Firebase
- 一応ここにも
まぁDB系は必要に応じて書いてた感じ、すごい難しいSQLを書いたとかではないのでIFNULLなのかISNULLなのかみたいな差異は調べながらやってくみたいな。
サーバーアプリケーション系
Apache
- ずっと使ってたけど最近あまり使ってない。
- 仕事では結構使う
Nginx
- Dockerと組み合わせるようになってからもりもり使ってる。
- でも確かDockerでWordPressを配信する前から、静的ファイルのキャッシュのために利用していたような。
PHP-FPM
- Nginxにしてからは主にPHP-FPMを利用している。
インフラ
さくらのVPS
- 自分の環境は大体さくらのVPSを利用している。主にCentOS7
AWS
- ECっぽいサイトのときに一人で構築。
- ELBとEC2、RDSを組み合わせたシンプルなWebアプリを作成するのに利用
- 他にも、個人的にJavaのアプリを動かすためにEC2だけ契約して使ったことも有り。
Docker
- 結局、自分のVPS環境は中でDockerを動かして、アプリ単位で配置している。
- ローカル開発環境としては基本Dockerで組むようにしている為、主に公式Imageとdocker-composeを組み合わせることが多い（ちょっとカスタマイズすることは多い）
- オーケストラレーション系のツールは未経験、気になる。
- VPS環境はDockerをポンポン設置して、フロントにNginxを置くケースが多い
- Mastodonを入れるときに、初めてVPSに設置した記憶がある。
その他
Git
- 便利、手放せない
明日以降の目標
広めに
とりあえずもうちょっと深く知らないといけない分野が多い印象
今の会社はPHPがメインだけどそれ以外の仕事も多いのでそっちにもガンガン入っていきたい。
具体的には
- デザインパターン周り
- より低レベルのコンピューターサイエンスの知識
は拡充させていきたい。本とか読む
目下やりたい
React.jsが面白すぎるので趣味ではReact.jsを使ったアプリを書いていくと思う。Eslintがよくできてて、どっかで書いたけど大リーグボール養成ギブスっぽさが良い。
そんなわけでReact.jsで書いてるQuizアプリは早めに出したい。
React.jsからAsync, Awaitを使ってNode.jsのExpressで立てたAPIサーバーにアクセスしてMongoDBのデータをFetchする話
ちょっとしたツールを作っていて、普段使っているRDBではなく、MongoDBを使うべきだなぁってシーンが有ったのでNode.jsとMongoDBにReact.jsからアクセスした流れとかを書いていきます。
といっても、今回書こうと思っているのはReact.jsでAPIにアクセスするあたりの処理がメインなので、Node.js Express MongoDBあたりはサクッと紹介していこうかなぁと。
環境はDockerで構築したので、それっぽいものをGithubにPushしておきました。 github.com こんな感じの構成です
- Nginx
- MongoDB
- MongoExpress
- React.js
- Material-ui
- Webpack
Node.jsとExpressとMongoDBを使ったAPIサーバーの設定
APIの数が少なかったので、横着して簡単に書いてますが、以下の項に /expressDir/route/index.html にべた書きしちゃってます。
const Mongo = require('mongodb'); const MongoClient = Mongo.MongoClient; // docker-composeを利用しているため、以下のようなURLを指定している // 同一のサーバーに立てるのであれば、localhostで良いはず const _url = 'mongodb://tm_mongodb:27017/feed'; router.get('/', (req, res, next) => { MongoClient.connect(_url, (err, client) => { const db = client.db('feed'); db.collection('feed', (err, collection) => { collection.find().sort({ 'feed.id_str': -1 }).toArray((err, docs) => { res.send(docs); }); }); }); });
こんな感じにすると、JavaScript側からGETで http://localhost:3000/ にアクセスすると、feedの一覧が取得できます。
なお、Node.jsはプロセスを立ち上げているとファイルの更新をしても処理が変更されないので、大抵は更新検知するプロセスからNode.jsを実行します。 今回利用したのはnodemonというものでしたが、これが自分のDocker環境でうまくファイル更新を検知してくれなかったのですが、以下のような設定を追加すると動いたので備忘録的に残しておきます。
困ってたこれ。docker-compose周りの設定が悪い可能性もあるけど、package.jsonに記述する以下のコードで動くようになった。
— Ricck/Riki (@Ricckn) 2018年4月9日
"scripts": {
"start": "nodemon --legacy-watch ./bin/www"
}, https://t.co/ZBcwG8Xlpf
package.json のscripts部分にnodemonを絡めた実行コードを記述すると思うのですが、そこで --legacy-watch パラメーターを追加してやるといい感じにやってくれます。
React.jsでAPIにアクセスする
React.jsでAjaxを使う場合、ちょっと前までは「ここだけjQuery使うのかよ、FetchAPIもまだ怪しいし」みたい話を聞いたことがあったのですが、現在は使いやすい物があるみたいです。 github.com 今回はこのsuperagentを利用しました。
非同期処理なのでasync awaitを使って書いてあります。
API関係のコードはすべて api.js というファイルに纏めて記述します。
import request from 'superagent'; const url = 'http://localhost'; export const getAllFeed = async () => { const endPoint = url; try { const res = await request.get(endPoint); return res.body; } catch (error) { console.log(error); return {}; } };
呼び出す側はComponentが読み込まれた際に実行してもらいたいので、 componentDidMount() 内に記載します。
componentDidMount() { // すべてのFeedを取得 getAllFeed() .then((feed) => { this.setState({ feed }); }); }
以上がComponentが読み込まれた際、MongoDB側からFeedを取得して、React.jsでsetStateする部分の処理になります。
React.jsは勉強中で、それまではFirebaseを使ってデータを格納していたこともあり、Async, Await系の処理を書いたことがありませんでしたが、思ったよりも簡単にかけてスッキリするので良いです。
Firebaseはそれはそれですごく使いやすいのですが、Realtime Databaseが必要ではないときと、まぁ費用がかかりそうなときは今回作ったDockerファイルあたりを駆使して、MongoDBとExpressを使ってサクッとAPIサーバーを立ててもいいかもしれませんね。
React.jsのboilerplate
- React.js
- Material-ui
- Babel
- ES2016
- Sass
- Eslint
あたりを使ったReact.jsプロジェクト用のレポジトリを、周りの人向けに作ったので共有しておく。
色々コメントを書いてあるのと、まだまだ修正する可能性があるんだけど、もしとりあえず簡単なコードを読んでみたいって需要があったら使ってもらえればと思います。
Dockerで- /etc/localtime:/etc/localtime:ro がMount Deniedを出すやつ
ちょっと古いdocker-compose.ymlには結構
volumes: - /etc/localtime:/etc/localtime:ro
みたいな記述が入ってるんだけど、これが以下のエラーを出す。
Mounts denied: The path /etc/localtime is not shared from OS X and is not known to Docker. You can configure shared paths from Docker -> Preferences... -> File Sharing. See https://docs.docker.com/docker-for-mac/osxfs/#namespaces for more info.
ということで、以下のように書くと良いっぽい。
volumes:
# - /etc/localtime:/etc/localtime:ro
environment:
- TZ=`ls -la /etc/localtime | cut -d/ -f8-9`
環境変数のTZに値を渡す感じ。
もともとDockerさんに時刻を渡す方法はこの二通りなんだけどちょっと前のバージョンから動かなくなってた。
Dockerの時刻 - Qiita
とりあえず誰かの参考になれば
React.jsとFirebaseを使って多人数同時クイズアプリを作ってる
これはオープンソース化しようと思ってるんだけど、ここ2年くらい新年の集まりでクイズアプリを使ってみんなで遊んでる。
今年は30問以上集まっていて、まぁそこそこ楽しめてて良い物だと思う。
株式会社オプトが作成したクイズアプリを試した話 | SteadyWorX
とまぁ、株式会社オプトさんが作ってくれた、フロントはReact.js、バックエンドがJavaで出来ていてWebSocketで通信するオープンソースなクイズアプリを、EC2上に設置して動かしてるんだけどちょいと気になる部分とか、問題設定の手間とかがあるので個人的にも周りでちょろっとやるにも良さげな感じに作り直そうと思って作ってるところ。
なんで
で、ちょっと前にFirebaseを使って他のユーザーとデータを共有できる仕組みを作ってみて、FirebaseのRealtimeDatabaseを使えば、
- 問題表示のタイミング同期
- スペック問題
あたりは一発で解決できそうだなぁと言うのがでかくて、React.jsの勉強も兼ねて書いてる（前作ってる方は終わってない）
問題の部分
うちの利用用途では問題は親族に募集していて、Google Formで募ってます。
するとCSVでDLできるので、今まではコピペしながらjsonに整形してたんだけど、そもそもこのCSV食わせる機能があれば結構楽ちんだなぁと思ってる。
だし、問題募集に使わなくても自分で管理するようにこれ使ってもいいと思うんだよねぇ。
実際に使ってもらうために
実際に使ってもらうためには、
- JavaScriptビルド環境の構築
- Webサーバーの知識
- Firebaseへの登録
くらいは必要になるのでそこそこめんどくさいとは思うんだけど、いや、結構面白いんだよみんなでスマホ片手にクイズやるの！
その辺をモチベーションに頑張っていきます。
とりあえずCSVの読み込みが上手くいかないんですがcsvtojsonは微妙なんですかね？
