React.js
Pocket

4月27日に開催された「React.kyoto v0.1.0」で、「React Nativeが 楽しく感じるまでの話」というタイトルでスピーカーをやってきました。

スライドはこちら

ありがたいことに100はてぶ以上いただきまして、人気エントリー入りしました。

内容は初心者からもう一歩進んで見た目や動きをつけるところまでです。

ぼくみたいに普段はWebをやっていて一切アプリを作ったとことがない人が、React Nativeを触った時にどうしても慣れないところがあって、アプリ作りを楽しめるところまでなかなか到達しないという経験があったのでこのスライドを作りました。

慣れないポイント

慣れないポイントとしては、

  • React Native独特のエラーやデバッグ方法がある
  • Hello Worldやカウントアップみたいなよくあるサンプルを作るぐらいは簡単だけど、それでは正直おもしろくない
  • ネット上にある簡単なサンプルを真似てみても、一ページで完結するようなアプリばかりだったり、動きがなかったりしてて触っててあんまり面白くない

など、さほどモチベーションが上がらないというのがあります。

仕事で導入されたり、作りたいアプリがあってどうしてもReact Nativeでというなら別でしょうが、とりあえず触ってみたくて、そのうちアイディアが降りてこれば本格的に作りたいぐらいの人にとってはなかなか腰が上がらないだろうなと感じました。

スライドの内容

そこでスライドの内容としては大きく3つ。

  • エラーが出た時の対処方法とデバッグ方法、オートリロード
  • ライブラリでナビゲーションをつけよう
  • Native Baseを使ってCSSを一切書かずにサクッと見た目を作ろう

という感じにしています。

ライブラリを使えば、ドキュメントやサンプルコードで割と簡単に動きを取り入れることができます。

特に重なっていくページ遷移やタブなどをつけると一気にアプリ感が出てきて楽しくなります。

さらにNative Baseを使えば見た目をiOSとAndoroidの両方をつくってくれるので、ここまでできると、後はどんな機能をつけるかだけを考えればアプリが完成します。

紹介したサンプル

今回は最後にサンプルとしてWP REST APIを使ってこのブログをアプリ化してみました。Code Gridなど、いわゆるマガジン系のアプリが参考アプリです。

記事詳細などへリンクする時の重なっていくページ遷移と一番下のタブはReact Natvigationで、それ以外はNativeBase。検索などの機能的なところは全てWP REST APIです。

サンプルのGif動画はこちら

まだまだ足りないところはありますが、最低限の機能は付いているかなと思います。

完成したら、実際に申請とかもやってみようかなと思います。もうちょっと欲しい機能を付けてから。

React.kyotoについては第一回ですが、たくさんの人に来ていただき無事盛り上がりました。

すでに次回の登壇者も決まりつつあるようなので、Reactについて興味ある人はぜひconnpassページをチェックしてみてください。

React.kyoto

WordCamp Kyotoにもぜひ

スライドの中でも宣伝していてくどいようですが、WordCamp Kyoto 2017でスタッフをやっています。

wck2017

アプリのサンプルでも使ったWP REST APIの話なんかも聞けると思います。

参加登録はちょうど昨日はじまりました!以下のイベントサイトのメニューにある「参加登録」ページから参加登録できます。関西の方も、遠方の方も京都へ旅行ついでにぜひご来場ください!

WordCamp Kyoto 2017

Pocket