Riot Games API + Rails + React + Ant design でLeague of Legendでチャンピオンごとにガイドを共有できるwebアプリをつくりました

guidegg.herokuapp.com

なにができるか

チャンピオンを選んでそれぞれ関連する記事を保存できるってだけのアプリです。

名前を入れるとインクリメントサーチでキャラが絞り込まれるUIだけ凝りました。もっとアニメーションつけたりしたら面白そう

アカウントそれぞれで保存していく方式ではなく、みんなが保存したものをみんなが見る形式です。
チャンピオンのデータや現在のフリーチャンピオンとかはRiot Games APIを叩いて取得してます。
URLはるだけなので動画ページでもTwitterのつぶやきでもなんでも載せれます。
また、URLを貼るとはてなブログカードっぽく表示するようにしました。

なんでつくったか

LOLのガイドっていろいろな所にあるし、記事、動画、はたまた一つのツイートと形態も様々ですが、それらをチャンピオンごとにまとめておける or 見れる集約サイトがあると楽だなと。

使った技術

React及びJavaScriptの勉強を兼ねてreact-railsを使ってRailsのviewにAnt Design を導入して作ってみました。
やっぱり出来のいいコンポーネントが多数用意されてると便利です。
フロントとサーバー側を分けた構成にしているわけではないのでページ遷移は直接aタグを使っています。悲しい。
ひらがなでもカタカナでも検索できるようにしてあります。
かなり恥ずかしいですが、下記がソースコードです

github.com

ひらがなをカタカナにするメソッドはこの素晴らしい記事を参考にしました。コピペですすいません。
最初にチャンピオンのデータを全部propsで渡してstateにセットして、検索時にはpropsに検索語句でfilterかけてまたstateにセットしてます。
stateは親以外は知らないような構造になるようにし、直接変更しないようにしました。（そうしろってreactチュートリアルでやってた）

既知の問題点

記事のURLはURLであるかぐらいしかvalidationはってないので、URLがそのチャンピオンに関係あるか？そもそもLOLに関係あるか？等々を全く見ていません。
あと最大の問題点は めんどくさくて記事の削除機能をつくってないことですかね。