作っているもの: http://billboard-tv.tk/
github: https://github.com/abeyuya/billboard-tv
serverlessとかreactに興味があったので、土日とかに勉強がてら、billboard-tvというWebサイトをちまちま作っています。
今まで趣味プログラミングのコードを公開してなかったけど、公開した方がいろいろ良いよなぁ、と思い公開してみた。
その解説の記事です。
(だらだらと感想文みたいになってしまいました...)
一人でやるよりも誰かの目に晒した方がやる気が出るかもしれないしね!
serverless編: http://qiita.com/abeyuya/items/28d2da771582ff1139a8
ケチる
趣味サイトだし、サーバーレスで構築するし、できるだけ無料でやることを目指してたけど、現状だと月に$1弱くらいかかっています。
ざっくり構成
インフラ系は全てAWSに乗っけています。AWS好き。
フロントは完全に静的配信をしていて、reactで書いてgulpとかでビルドしてS3にホストしています。
気になる人はリポジトリ覗いてみて下さい。
このS3で月に$0.04くらい。
ドメインはdot.tkというところで無料で取れた!
けどRoute53で管理してるので、これが月に$0.5くらい。
ここ調べたけど無料にする方法が思いつかなかった。
EC2だとMyDnsってサービスで無料ドメイン運用してたけど、今回みたいな構成だと無料にする方法がわからず。
serverless
今回のWebサイトだと動的に更新する箇所がランキング情報しか無いのですが、そこはserverlessでやるようにしている。
serverlessってのはこれ https://github.com/serverless/serverless
こいつはlambdaとAPIGatewayの課金だけど、今回みたいに細々使うだけなら無料枠に収まる。
amazon様ありがとうございます 
serverlessで定期的にランキング情報を取得して、jsonをS3に吐く。
serverlessについての記事はまた別途書く予定。
初めてのReact.js
rebuild.fmとかwebの記事とかでreactの名前だけやたら目にしたけど、やっと皆が何を言っているのかが少しわかった感じ。
個人的な感想としては、今回みたいに軽く使う程度なら、そんなに難しいものでは無いように感じた。
学習コストがそんなに高いものではないし、興味がある人はちょろっと何か作って見ると、reactが何なのか腹落ちすると思う。
どっちかと言うとモダンフロントエンドの環境構築に苦労した。
初めてのモダンフロントエンド
ぼくは仕事ではあまりjsは書かない。
だけど、gulpでビルドしたりとかのモダンフロントエンド界隈はちょっとオシャレでイケててモテるイメージがあったのでぜひモテたいと思っていたし、今回一通り触ってちょっと垢抜けたと思う。
ただ、一通りビルド-デプロイとかやってみたけど、すげえ面倒くさい世界だなと思った。
Rails脳なので、結局Railsみたいなことがやりたいと思うようになって
- 開発時用ビルド
- デプロイ用ビルド
- assetのハッシュ付与
とかの設定をしたけど、最初からこの辺の設定をコミコミした状態の薄いフレームワークというか開発環境みたいなの無いかなぁ、と何度か思った。
ググってたらボイラープレートみたいな単語を目にしたので、それがそういうものだと思うけど、オレオレボイラープレートみたいなのの種類がありすぎて調査を早々に諦めてしまった。
自分で一通り設定書いたおかげで多少理解が深まったような気がするし、初めてのモダンフロントエンドはまあこれでも良いか。
あとはES6のトランスパイル(今回初めて知った単語)とかよくわからず苦労した。
未だによくわからんのが、ES5とES6の文法をごっちゃにしたときにエラー出たりするとこ。
途中まで(たぶん)ES5で書いてて、使おうとしたライブラリがES6でしか動かないことがわかって、ソースを一通りES6っぽく直したら動くようになったりした。
この辺ですごくハマった。
この辺りそもそもちゃんと理解できていないので、また調べてみようと思う。
今時のフロントエンドは未来仕様で書いて古い仕様で動くように変換しているというのを知らなかったけど、面白いなぁと思った。
Reactどこに向いているのか
事前情報で、Reactは大規模開発に向いていて、今回みたいな小規模には向かないという記事は何度か目にした。
今回は趣味プログラミングだし、Reactを触ってみたいというのがあったのでもちろんReactを採用した。
やってみた結果、やはり今回みたいなプロジェクトには向いていないと感じた。
さくっと何か作るには学習コストがかかるし、ググってもまだ情報は少ない。
jQueryで作ったらすぐできそうだなーと何度も思った。
jQueryなら何かやろうとすれば大抵なんでもできるし、ライブラリもすごく数があると感じるし、jQueryってすげえなと思った。
書き始めたら思いの外長文になってしまった...
また今度serverlessの記事を書こうと思います