Allied ArchitectsAllied ArchitectsEngineer Blog

React Nativeを触ってみる

2017/11/24 React

React Nativeを触ってみる

はじめに

初めまして!プロダクト開発部のタンと申します。

最近、弊社の新サービスを開発するプロジェクトに携わってたことで、いろいろな新しい技術を学んだことができました。その中にReactというJavascriptライブラリーがありまして、javascriptも興味がありますので、それとReact Nativeというネイティブアプリを開発するためのライブラリーを調べて、触ってみました。React Nativeはとても素晴らしいライプラリーだと思いますので、今回ご紹介したいと思います!

React-Nativeとは

  • ReactはFacebookが開発したUIのパーツを作るためのJavascriptライブラリです
  • React NativeはReactベースでネイティブアプリを構築できるライブラリです

特徴

  • Javascriptだけで両方IosとAndroidプラットフォームのアプリを構築できます
  • WebのCSSの属性でUIを調整できます
  • IosとAndroidの基本的なコンポーネントはサポートされいて、使うことができます
  • 拡張性(例えば: React Nativeはまだサポートしてないコンポーネントを使いたい場合、自分で開発し、追加できます)
  • chromeやSafariでデバッグすることができます
  • オプンソースのライプラリなので、コミュニティが広い

デメリット

  • いくつかのコンポーネントはまだサポートされていません。例えば: Map, AndroidのpushNotification
  • WindowとLinuxでIosアプリをビルドできません
  • 複雑なアプリを開発したい場合、React Nativeの以外にReduxやRelayなどを勉強するべきです

開発環境を設定する

Macで開発環境の設定する方法を紹介します。

MacでReact Nativeの開発環境を立ち上げるために、以下のツールをインストールする必要があります

これはFacebookが作ったファイルの変更を監視するためのツールです。

  • React Native CLI

サンプルアプリを作ってみよう

簡単な画像スライドショーアプリを作ってみましょう!

新規プロジェクトを作る

まず、React Native CLIで簡単に新規のプロジェクトを作ってください

アプリを走ってみる

以下のコマンドを実行したら、iOS Simulatorにアプリがインストールされて、表示されます

ソースコードを変更する

React NativeはJavascriptのES2015を使いますので、ES2015が知らない方は事前に調べてください。

プロジェクトの構造は以下の通りです。

  • index.js: Reactアプリ(App.js)を登録して、初期化するところです。

  • App.js: アプリのメインクラスです。

  • components: アプリで使うコンポーネント
  • Header.js: アプリのヘッダー

 

  • Item.js: スライドショーのアイテム

  • app.js: いくつか属性を定義するところ。例えば: アプリの長さ、高さやスライドショーのアイテムアイテムのサイズなど

 

  • data:
  • images.js: スライドショーの画像データを定数で定義するためです

処理について、簡単に説明したいと思います。

  • アプリケーションのレイアウトは以下の二つのコンポーネントで分けて、App.jsにインポートすることで使えます
    – Header.js: アプリのヘッダーのコンポーネント
    – Item.js: スライドショーのアイテムのコンポーネント
  • UIを変更するため、各のクラスにstyles定数を定義し、CSSと同じ属性で変更します
  • アニメーションの処理はReact NativeのAnimatedを使います

デバッグ方法について

上記に書いてある通り、React Nativeはjavascriptを使いますので、webアプリケーションと同じブラウザーでデバッグすることができます

  • iOS Simulatorでアプリを走っている時に、「⌘D」ショートカットキーで開発メニューを開いて、「Debug JS Remotely」を選択すると、MACのブラウザーのコンソールでデバッグすることができます

 

 

最後に

今回はReact Nativeについて紹介しました。

React Nativeを使って、javascriptだけで両方 IOS、Androidとも動くことができるアプリケーションを構築できますので、Webエンジニアにとって、とてもいいライブラリだと思います。

Webエンジニアの方はネイティブアプリケーションを開発したい場合、React Nativeをオススメします。ぜひ試してください!!!

ページTOPへ