どんなチームがReact Nativeによる開発に向いているか

はじめに

最近はアプリ開発にReact Native(以下RN)を使用するケースも増えてきているようですが、RNはネイティブアプリを開発する最強のライブラリというわけではありません。 メリットをうまく利用すればとても良いアプリができると思いますが、失敗すると、さらに倍の時間をかけてSwift、Javaで作りなおし、、、といったことも発生するかもしれません。 特徴や他社事例をよく調査し、チームの状況に応じて、採用するかどうか判断することがとても大事です。 この記事では、どういった状況に置かれたチームが、RNで開発するのに適しているか、僕なりの考えを書きますので、参考にしていただければと思います。 RNがどういったものであるかの説明や、実装方法については書きません。

目次

  1. なるべく早くリリースしたいチーム
  2. iOS/Androidで仕様・見た目を揃えたいチーム
  3. WEBのエンジニアは足りているけど、ネイティブのエンジニアが十分にはいないチーム
  4. アプリのデザイン経験が無いデザイナが多いチーム
  5. アプリの改善サイクルをなるべく早く回したいチーム
  6. WEBとアプリの見た目を合わせたいチーム
  7. 最速・最高を求めないチーム

  8. なるべく早くリリースしたいチーム RNはiOS/Androidのソースを一括で記述/管理することが可能です。 また、ホットリロードが可能なので、修正後のビルドの時間も短くてすみます。 そのため、なるべく早くiOS/Androidアプリを開発したいというチームには適しているかと思います。 また、記述するのは主にJSなので、エディタやIDEも好みのものを使えます。 そのため、開発がより進むこともあるかもしれません。

  9. iOS/Androidで仕様・見た目を揃えたいチーム iOS、Androidを別の人が実装すると、仕様や認識のズレが発生したり、OS固有の理由により、出来る出来ないが発生したりするというのが、アプリ開発におけるあるあるかと思います。 RNで1ソースで管理すれば、そういったことも少なくなるでしょう。 また、もちろん、OSによって適したデザインがあると思いますが、それでも見た目を揃えたい箇所がある場合、実装が1箇所になるので目的は果たされるかと思います。 ただ、1箇所にまとめたコードの中で、あえてiOS/Androidそれぞれで処理を分岐させる箇所が多くなってくると、「一括でソースを管理しているのはなんでだっけ?」となるくらい、分岐が多く、読みづらいコードになる可能性もあります。 そういった場合には、*.ios.js*.android.js などとファイルごと分けてしまうなど、設計を考える必要があるかと思います。

  10. WEBのエンジニアは足りているけど、ネイティブのエンジニアが十分にはいないチーム アプリの需要は依然として高く、ネイティブのエンジニアは売り手市場です。 基本的にどのチームもネイティブのエンジニアは足りていないと思います。 ただ、アプリ以外のエンジニアにも目を向けてみると、WEBのエンジニアであればJSを書いたことが無い人はあまりいないかと思うので、どうしても手が足りない場合には、少し(?)Reactを勉強してもらって、開発に携わってもらうこともできるかと思います。 ただ、リリースの際にXcodeを使うなど、iOS、Androidの知識は少なからず必要なので、ネイティブのエンジニアが全くいない状態でJSだけで書けるからとRNを採用するのはおすすめしません。 (その状態ではSwift、Android Javaでもアプリが作れるかというとわかりませんが。。。) まとめると、ネイティブの知識はゼロでは無く、少しは必要。ただ、WEBのエンジニアに手伝ってもらえる可能性もある、ということです。

  11. アプリのデザイン経験が無いデザイナが多いチーム RNの見た目の部分はcssライクに書くことができます。 また、見た目もネイティブよりかは自由度があります。 なので、アプリの経験がなくても、開発時には対応できるかと思います。 ただ、やはりアプリらしいデザインや、それぞれのOSに適したデザインがあるので、それは常に勉強して、改善していくのがいいかと思います。

  12. アプリの改善サイクルをなるべく早く回したいチーム RNを利用する大きなメリットとして、CodePushが利用可能であることがあげられます。 そのため、デリバリーの高速化が可能です。 ネイティブのデメリットとして、特にiOSですが、実装してもリリースまで時間がかかる、リリースしてもユーザーがアップデートしないと使ってもらえない/バグが直らない、というのがあります。 CodePushを使えば、実装したものをすぐに届けられるので、細かなバグ修正や、見た目の修正、ABテストもやりやすくなるのかなと思います。

  13. WEBとアプリの見た目を合わせたいチーム React Native for Webというものがあります。 最初は名前に少し違和感があるかと思いますが、スマホのブラウザから見た場合のWEBのHTMLをRNのようにコンポーネントでラップして開発できると考えるといいかもしれません。 こういったものを利用すれば、WEBとアプリの見た目を揃えたり、コンポーネントを共通化させて開発速度を上げることができるかもしれません。 少し難易度は高そうですが、細部から少しずつ挑戦してみるといいと思います。

  14. 最初から最速・最高を求めないチーム RNは一度JSを経由するため、ネイティブ実装に速度でまさることは出来ません。 また、ネイティブをちゃんと実装できるエンジニアがいて、時間も十分ある場合、(codepushを除いては)RNを利用するメリットはありません。 アプリ開発において、それに越したことはないです。 ただ、最初のリリースは品質は2の次でとにかく早く出したい、ユーザーの意見を聞いて早く改善していきたい、という場合には適しています。 それでサービスがスケールしたら、ネイティブのエンジニアを採用して、ネイティブで書き直すのがいいと思います。

まとめ

上にも書いたように、RNはアプリ開発における最適解ではありません。 ただ、適した場所で使用すればとてもメリットがあると思います。 上に書いたような環境に置かれた時に、開発の選択肢を増やす意味でも、RNを勉強しておくのがよいと思います。

ReactのFunctionComponentでライフサイクル

こんにちは。Boostnoteのメンテナのsosukesuzukiです。BoostnoteはReactで書かれていています。そして実はBoostnoteは作られてから結構時間が経っていて至る所に肥大化したコンポーネントが存在します。Boostnoteでは肥大化したコンポーネントはコントリビュータの皆様のおかげもあって以前と比べたらマシになってはいますが、放置され気味になっています。それについていつかなんとかしたいと考えていて、なんとかする方法についての記事です。

極力StatelessFunctionalComponent

肥大化したコンポーネントは読みにくく、管理がしづらいので、適切な大きさにコンポーネントを分割していくことがが必要です。分割していく上で重要なのは省けるStateは全て省きコンポーネントは極力StatelessFunctionalComponentにすることです。extends React.ComponentではなくStatelessFunctionalComponentとして実装することで状態を保持していないことが自明になります。

// StatelessFunctionalComponentの例

const component = ({hoge, huga}) => (
  <h1>{hoge}</h1>
  <h2>{huga}</h2>
)

ある程度コンポーネントが状態を保有するのは仕方がないことだとしても、状態の管理に気を遣わなければならない箇所はできるだけ増やしたくはありません。そんな所まで頭が回りません。

ライフサイクルはHigherOrderComponent(HOC)

そんな理由があって、StatelessFunctionalComponentを使う方が人間にとって結果的に易しくなることが多いわけですが、アプリケーションを作る上での欠点として、StatelessFunctionalComponent単体ではlifecycleを扱うことができません。それを実現するためにはHighrtOrderComponentを使う必要があります。 HigherOrderComponentはReactコンポーネントを引数として受取りReactコンポーネントを引数として返す関数により実装されます。型シグネチャをHaskellライクに表すと次のようになるでしょう。 hocFactotryがHOC(HigherOrderComponent)のファクトリーとなる関数の名前、Wが引数に渡すReactコンポーネント、Eが返り値のReactコンポーネントです。

HigherOrderComponent:: W: React.Component => E: React.Component

HOCはコンポーネントの抽象性を高め、さらなる再利用を可能にします。 HOCを使うとStatelessFunctionalComponentのライフサイクルをフックすることができます(それ以外にも様々なことに使えますが、この記事ではHOCについての詳しい解説はしません。FaceBookの公式ドキュメント、franleplant氏のReact Higher Order Component in depthなどが非常にわかりやすくHOCについて解説しています。)。

// HOCでStatelessFunctionalComponentのライフサイクルをフックする例
const InputComponent = ({hoge, boo}) => (
  <h1>{hoge}</h1>
  <h2>{boo}</h2>
)

function logProps(WrappedComponent) {
  return class extends React.Component {
    componentWillReceiveProps(nextProps) {
      console.log('Current props: ', this.props);
      console.log('Next props: ', nextProps);
    }
    render() {
      return <WrappedComponent {...this.props} />;
    }
  }
}

const EnhancedComponent = logProps(InputComponent);

この方法をとるにしてもHOCで返すコンポーネントはextends React.Componentを使って記述する必要があります。この形をとるコンポーネントが増えていくと、class宣言とrenderはボイラープレートになっていきます。

recomposeでHOCを楽に

recomposeというライブラリがあります。このライブラリはHOCのためのユーティリティ関数群で、react版lodashと例えられているのを見たこともあります。このライブラリには様々な関数があり、それらはrecomponseのGithubでドキュメントを見ることができます。 上述の通りHOCには様々な使い方があって、それらのための関数が大半でライフサイクルに関係する関数はごく一部です。なので、比較的簡単に導入することはできるんじゃないでしょうか。このあたりは本当にlodashみたいですね。適宜必要な関数だけ使えばよくて、ライブラリ自体が複雑な構造になっているということはありません。 HOCでライフサイクルを楽に実装する上で必要な関数はlifecycle関数です。 lifecycle関数は次のような型シグネチャを持ちます。

lifecycle :: spec: Object => H: HigherOrderComponent 

そして、このようにして使われます。

const PostsList = ({ posts }) => (
  <ul>{posts.map(p => <li>{p.title}</li>)}</ul>
)

const PostsListWithData = lifecycle({
  componentDidMount() {
    fetchPosts().then(posts => {
      this.setState({ posts });
    })
  }
})(PostsList);

lifecycleの引数の中でのStateは、HOCの引数に渡すコンポーネントにpropsとして渡されます。 また、lifecycleの型シグネチャは次のように書き換えることもできます。

lifecycle :: spec: Object => W: React.Component => E:Component

HOCの型がHOC:: W: React.Component => E: React.Componentなので当然なのですが、Haskellやらそのあたりの人にはこのように書いた方がわかりやすいかもしれません。

よさそう

reomposeでHOCを使えばStatelessFunctionalComponentで簡単にライフサイクルまで扱うことができるようになります。状態について考えることがなくなるのも記述が簡潔になるのも人間にとってはよいことだと思うので、使える機会がありそうだったらどんどん使っていったらいいと思います。時間があればBoostnoteでもこのようにコンポーネントを適度に分割していきたいと思っています。

オープンソースのPYTHONプロジェクト 5選 [12/24~12/30]

GitHubで公開されているオープンソースの人気PYTHONプロジェクトを紹介していきます🌟 f:id:junp0819:20171230184337p:plain

No.1

wangshub / wechat_jump_game

f:id:junp0819:20171230183323p:plain:w300
https://wangshub.github.io/
Star:809🌟
github.com

No.2

gaojiuli / toapi

f:id:junp0819:20171230183402p:plain
すべてのウェブサイトはAPIを提供しています。
Star:1,321🌟
github.com

No.3

zhoubear / open-paperless

f:id:junp0819:20171230183511p:plain
すべての紙文書をスキャンし、索引付けし、アーカイブする。
Star: 1,563🌟
github.com

No.4

rockyzhengwu / FoolNLTK

f:id:junp0819:20171230183702j:plain
中国語自然言語ツールキット
Star:543🌟
github.com

No.5

sb2nov / mac-setup

f:id:junp0819:20171230183744g:plain
Mac OS Xでの開発環境のインストール
Star: 3,523🌟
github.com


Curated by Boostnote boostnote.io

GitHub Repository github.com

オープンソースのSwiftプロジェクト 5選 [12/23~12/29]

GitHubで公開されているオープンソースの人気Swiftプロジェクトを紹介していきます🌟

No.1

SoySauceLab / CollectionKit

f:id:junp0819:20171229171432j:plain:w300
再利用可能なデータ駆動型コレクションコンポーネントを構築するための最新のSwiftフレームワーク。
Star:1,627🌟
github.com

No.2

efremidze / Shiny

f:id:junp0819:20171229171442g:plain
Iridescent Effect View (Apple Pay Cash)
Star:300🌟
github.com

No.3

EyreFree / EFQRCode

f:id:junp0819:20171229171523j:plain
Swiftで迅速な応答コードを操作するためのより良い方法。
Star: 2,370🌟
github.com

No.4

kmikiy / SpotMenu

f:id:junp0819:20171229171652p:plain
メニューバーにSpotifyとiTunesを追加。
Star:540🌟
github.com

No.5

lhc70000 / iina

f:id:junp0819:20171229171534p:plain
MacOS用の最新のビデオプレーヤー。
Star: 9,803🌟
github.com


オープンソースのJavascriptプロジェクト 5選 [12/21~12/27]

f:id:junp0819:20171227180051p:plain GitHubで公開されているオープンソースの人気Javascriptプロジェクトを紹介していきます🌟

No.1

Chalarangelo / 30-seconds-of-code

f:id:junp0819:20171227174917p:plain
30秒以内に理解できる有用なJavascriptスニペットの整理されたコレクション。
Star:12,556🌟
github.com

No.2

danilowoz / react-content-loader

f:id:junp0819:20171227174926j:plain
SVGを使用して、Facebookカードローダーと同様にロードされるコンテンツの構造をシミュレートするローダーのコレクションを作成するコンポーネントを使用します。
Star:2,637🌟
github.com

No.3

parcel-bundler / parcel

f:id:junp0819:20171227175024g:plain
急速にWebアプリケーションバンドラの設定をする
Star: 13,267🌟
github.com

No.4

google / boardgame.io

f:id:junp0819:20171227175305p:plain
状態管理など、ターンベースのゲームにも適しています。
Star:4,580🌟
github.com

No.5

facebook / Docusaurus

f:id:junp0819:20171227175338p:plain
オープンソースのドキュメンテーションWebサイトを簡単に管理できます。
Star:2,860🌟
github.com


Boostnoteの使い方 まとめ

Boostnoteの記事一覧をまとめました。
お問い合わせなどありましたらこちらまでよろしくお願いします。
Twitter
Facebook
Reddit f:id:junp0819:20171014132548p:plain

はじめに

Boostnoteコミュニティの紹介

Boostnoteの各コミュニティのまとめです。
コミュニティ上で最新記事を発信しているので、ぜひ参加していただけると嬉しいです。 boostnote.hatenablog.com

記事一覧

基本的な使い方

ノートの作成方法と設置画面

上記の2つの主な機能の使い方と、Boostnoteのデザインやフォント、エディタのモードなどを変更方法を紹介している記事です。
boostnote.hatenablog.com

Boostnoteのメモを、クラウド上に同期する方法。

Boostnoteは、何も設定しなければlocal storageにデータが保存されるようになっているのですが、
DropboxやGoogle Driveを使えば、それらのデータをクラウドに保存することが出来ます。
boostnote.hatenablog.com

Boostnoteのデータを、複数デバイスで共有する方法

モバイル版Boostnoteとデスクトップ版Boostnoteを同期する方法を紹介しています。 boostnote.hatenablog.com

ショートカットキー

Boostnoteで使用できるショートカットキーの使い方を紹介している記事です。
boostnote.hatenablog.com

エクスポート、インポート、プリント機能

書いたメモ帳をPlain Text(.txt),Markdown(.md)形式でエクスポート、インポートしたり、PDFとして出力、保存する方法を紹介している記事です。 boostnote.hatenablog.com

ノートにピンをつける方法

ピンをつけるとノートを一番上に上げることができ、見やすくなります。 boostnote.hatenablog.com

ノートの削除方法

ノートの削除方法の紹介です。
boostnote.hatenablog.com

Markdownノートの使い方

Markdown記法の紹介

BoostnoteでサポートしているMarkdown記法を紹介している記事です。コピペして使用してください。
boostnote.hatenablog.com

Latexを使用して数式を綺麗にメモする方法

Latex(Tex)の使い方を説明しています。 boostnote.hatenablog.com

クリップボードから直接画像を貼り付ける方法

クリップボードに保存された画像をそのままノートに貼り付ける方法を紹介しています。 boostnote.hatenablog.com

Snippetノートの使い方

Snippetノートに、シンタックスハイライトを反映させる方法

Snippetノートのシンタックスハイライトに関する記事です。 boostnote.hatenablog.com

設定

Vimエディタの設定方法

Vimモードの設定方法と、使い方を紹介している記事です。 boostnote.hatenablog.com

フォルダの順番を変更する方法

作成したフォルダの順番を変える方法を紹介しています。 boostnote.hatenablog.com

Boostnoteのテーマデザイン 早見表

テーマデザインの一覧を素早く見ることができるのでテーマの設定前に是非ご覧ください。 boostnote.hatenablog.com

その他

Boostnoteの使い方 動画紹介

Youtubeでのチュートリアル動画です。 boostnote.hatenablog.com

Evernoteのノートをコマンド一発でBoostnoteへ変換! "ever2boost"の紹介

EvernoteのノートをBoostnote内に保存する方法を紹介しています。 boostnote.hatenablog.com

ノートが突然消えてしまった場合の対処法

ノートが消えてしまったという方は以下のリンクに対処法を記載しております。 boostnote.hatenablog.com

Boostnote MeetUp vol.3

boostnote.hatenablog.com

活用例

素早くブログの下書きを書けるツール Boostnoteの活用例

下書きを行うことのメリットや、スマホからの下書きなどの方法も紹介しています。 boostnote.hatenablog.com

Snippetノートを活用してプログラミングを早くする方法 - 活用例 -

プログラマの方向けの記事です。Snippetノートをうまく活用して、仕事速度を上げましょう。 boostnote.hatenablog.com

Boostnoteを使って効率よくプログラミング学習

Snippetノートにプログラミング学習の内容を残しておくことで復習の時にとても便利です。 boostnote.hatenablog.com

リリース情報

Boostnoteのダウンロード

対応OSは、Mac,Windows,Linux,iOS,Androidです。
Ubuntuのユーザーは下記のWebサイトから64ビットのインストーラをダウンロードできます。 boostnote.io

Githubリポジトリはこちら

github.com

react-native androidの開発環境構築方法 [Mac版]

以下のリンクは公式リファレンスです。
Gettting Started

Node, Watchmanのインストール

Homebrewを使用してNodeおよびWatchmanをインストールすることをお勧めします。
Homebrewをインストールした後、ターミナルで次のコマンドを実行します。

$ brew install node
$ brew install watchman

Nodeをインストールしている場合は、それがバージョン4以上であることを確認してください。

React NativeCLI(コマンドラインインターフェイス)のインストール

Nodeにはnpmが付属しており、React NativeCLIをインストールできます。

$ npm install -g react-native-cli

JDKのインストール

androidアプリを動かすためにはJavaの開発環境が必要になるのでインストールされていなければ下のURLからJDK(Java SE Development Kit)のインストールをします。
Java SE Development Kit 8 Downloads

開発環境の設定

1.androidの開発環境を整えます。

  • ここからAndroid Studio(androidアプリ開発用のIDE)をダウンロードしてインストールします。
    インストールタイプを選択するように求められたら、「Custom」セットアップを選択します。
    次のすべてのチェックボックスがオンになっていることを確認します。
    ・Android SDK
    ・Android SDK Platform
    ・Performance (Intel ® HAXM)
    ・Android Virtual Device

2Android SDKのインストール

Android Studioのインストールが終わってWelcome画面がでてきたらAndroid SDKのインストールを行います。
React Nativeがネイティブアプリをビルドする際にはAndroid6.0(Marshmallow)のSDKを要求するため別途手動でインストールする必要があります。

Welcome画面の右下の「Configure」をクリックして「SDK Manager」を選択します。
f:id:junp0819:20171220184816p:plain 「Android6.0(Marshmallow)」という項目を選択し、"Show package detail"で中身を見て以下のものをインストールします。
・Google APIs
・Android SDK Platform 23
・Intel x86 Atom_64 System Image
・Google APIs Intel x86 Atom_64 System_Image
f:id:junp0819:20171220201503p:plain

3.次に上のタブで「SDK Tools」を選択して、「Show Package Details」をクリックします。

「Android SDK Build-Tools」という項目があるのでその中から「23.0.1」を選択します。
f:id:junp0819:20171220184840p:plain

最後に「Apply」をクリックして、AndroidSDKとビルドツールをインストールします。
f:id:junp0819:20171220185841p:plain

4.次に ANDROID_HOMEの環境変数を設定します。

  • react nativeはネイティブコードでアプリをビルドするためにいくつかの環境変数を設定する必要があります。
  • シェルでbashを使っている方は.bash_profileに(もしほかのシェルを使っていたら各々の設定ファイルに)以下の環境変数の設定を追加します。
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/platform-tools

シェルにsource $HOME/.bash_profileと入力して上記で記述した設定をbashに適用させます。
最後にANDROID_HOMEがきちんと設定されているか確かめるためにecho $PATHと入力して環境変数に追加されているか確認します。

新しいアプリケーションの作成

React Nativeコマンドラインインターフェイスを使用して、 "AwesomeProject"(任意)という新しいReact Nativeプロジェクトを生成します。

$ react-native init AwesomeProject

Android搭載端末の準備

React Native Androidアプリを実行するには、Android端末が必要です。
普通のAndroid端末でもいいですが、仮想デバイスを使用することもできます。

普通の端末の使用

Android端末をお持ちの場合は、USBケーブルを使用してPCに接続します。

仮想デバイスの使用

・Android Studio で、[Tools] > [Android] > [AVD Manager] を選択します。
・ツールバーから [AVD Manager] AVD Manager アイコン をクリックします。

AndroidスタジオAVDマネージャ

Android Studioをインストールしたばかりの場合は、新しいAVDを作成する必要があります。
[Create Virtual Device ...]を選択し、リストから電話を選択して[next]をクリックします。
f:id:junp0819:20171220202609p:plain

AndroidスタジオAVDマネージャ

「x86 Images」タブを選択し、Android 6.0(Google API)ターゲットでx86_64 ABI画像のMarshmallow API Level 23を探します。 f:id:junp0819:20171220202554p:plain

React Nativeアプリケーションの実行

react-native run-androidReact Nativeプロジェクトフォルダ内で実行します。

$ cd AwesomeProject
$ react-native run-android

f:id:junp0819:20171220202621p:plain

これで環境開発は完了です。