raect.jsを触ったお話

React.jsを
使って見た作った話
伊波龍一 @Ryu1__1uyR
1

伊波龍一です
＠Ryu1__1uyR
2

伊波龍一です
ツイッターに住んでます
@Ryu1__1uyR
ポケモンが好き
JavaScript好きRuby学習中
ISUCONに出たい
3

React.jsとは？
• SPI(シングルページアプリケーション)
• node.jsのライブラリ (合ってるかな…)
• UIをパーツで作っていく
• facebookがOSSとして公開してる
5

React.jsをなんで始めたの？
6

• 専門学校の授業でReact.jsを取り扱った
7

8
出会い

9
出会い
LTのテーマ回収

伊波龍一です
@Ryu1__1uyR
ISUCONに出たい
13

伊波龍一です
@Ryu1__1uyR
ISUCONに出たい
14

ポケモン図鑑を作ろう

何やら良さそうなAPIがあるぞ

Pokéapi
URL
http://pokeapi.co/api/v2/pokemon/

Pokéapi
URL + ポケモンの図鑑番号

Pokéapi
ポケモンのいろんな情報!!
JSONで！！

Pokéapi
こいつはいい！！！

第１号完成!!!!!!
👏
👏

第1号
•ポケモンの番号を入力すると情報を表示できる
25

友達「ポケモンの番号知らんがな」

確かにポケモンを
図鑑番号で覚えてる
人は少ない

{ ピカチュウ :025}
コンマ繋ぎでポケモン全部

ポケモン全部で807種類

npm pokemon
ポケモンのnodeModule

pokemon.getId( 名前 , ja )
日本語のポケモン名から
図鑑番号が取れるようになった！！！

ポケモンの名前
全部打ち込むのめんどくね？

material-ui
autoComplate
(nodeModule)
自動補完機能

pokemon.all( ja )
const pokeData =
hoge

自動補完機能実装👏👏

ポケモンの能力値を見れたら
面白いのでは？？

ポケモンの能力値を見れたら
面白いのでは？？
npm recharts

第２号完成!!!!!!
👏
👏

ギークハウスのさぼさんに
見てもらった！！！

ボタン押すの面倒臭い！！！

確かに🤔
エンターキーとかで動くと便利そう

(デザインに)
悩んだら
bootStrap大先生

ここからの目標
• React-routerでhistoryとurlを書き換える
• もっといい感じのデザインにしたい…
• (できれば)pokeDexのVue.js版を作ってみたい

ここからの目標
• React-routerでhistoryとurlを書き換える
• もっといい感じのデザインにしたい…
• (できれば)pokeDexのVue.js版を作ってみたい
@Ryu1__1uyR

More Related Content