【チュートリアル】ReactNativeで簡単にネイティブアプリ(iphoneアプリ)を作ってみた!

javascriptでiosアプリやAndroidアプリが作れるReactNative。

そんな便利ツールを使って、今回は簡単にiphoneアプリを作る方法をみなさんにご紹介します。チュートリアル形式で解説していきますので、一緒にネイティブアプリを作ってみましょう!

※ReactNativeを使うために必要な環境構築はこちらの記事で解説しています。

まずはCLIをつかって準備完了

上記コマンドをターミナルで叩いて、必要なファイル一式をダウンロードしてください。
ファイル一式がダウンロードされたら、作成されたプロジェクトディレクトリに移動(cd プロジェクト名)して、プロジェクトに必要なファイル一式をダウンロードしてください(npm i)。
【npm i】にてnode_modulesが全てダウンロードできたら、このコマンドを叩いて、ios Simulatorを起動しましょう。

うまく、起動できれば、以下の画面が現れます。(初回起動のみ、時間がかかるので、気長に待ちましょう)

これにて、準備完了です。実際のコードを触っていきましょう。

ディレクトリやファイル

ReactNative CLIで「react-native init プロジェクト名」をすると、上記のようなファイル構造になります。

そして、ここに「src」というフォルダを新規作成して、srcフォルダの中でアプリに使うファイルを作成していきます。

※Web版のReactやVue.jsを使ったことがあると、同じような使い方だと気づくはず!

srcフォルダを追加するとこんな感じ。(srcが増えただけですね!)

親Componentを作る

ReactやReactNative、Vueなどのデータバインディング系のフレームワークはコンポーネント指向と呼ばれていて、サイトやアプリのパーツをコンポーネントという小さな単位に切り分けて、それらを組み立ててプロダクトを作っていきます。

この図のように、まずは親となるパーツ(Component)を作成して、その中に子供となる子Componentをいくつもいれてアプリを作っていきます。

ReactNativeにおいて、大元の親Componentとなるのは、上記で説明したファイル構成の中の「index.js」です。まずは、このindex.jsの中身を

に変更してください。

  • 1〜2行目で、ReactとReactNativeをimportしています。(そういうものだと覚えてください)
  • 4〜5行目で、Appという親Componentを作成しています。このAppの中に子Componentをいれてアプリを作っていきます。
  • 5行目の<Text>は、文字列を表示させたいときに使うタグで、HTMLの<p>のようなものと覚えてください。ただ、ReactNativeの場合は、タグを使う場合、ReactNativeライブラリからimportする必要があります(2行目)
  • 8行目はおまじないだと思って、とりあえず書いておきましょう。

以上のソースを記述して、simulatorをリロード(Command + R)すると、

このように画面が更新されます!

styleが聞いてないので、<Text>で囲った文字が左上に行ってしまっていますが、いまは気にしなくて良いでしょう。

子Componentを作る

親Componentの作成と描写に成功したので、次は子Componentの作成にうつりましょう。まずは、ヘッダー部分を表示するComponentを作成します。

srcディレクトリの中に、Header.jsというファイルを作成して、

と記述してください。これが、ヘッダー部分を表示するヘッダーComponentになります。やっていることは、index.jsの親コンポーネントとほとんど同じなのですが、

  • stylesというオブジェクトを作成して、そのオブジェクトの中身のstyleをViewやTextといったタグに適用している(HTMLとCSSのコーディングとほぼ同じです。)
  • 最後にHeaderをexport defaultして、親Componentでimportして使えるようにしている。

という2点が、index.jsと異なります。

子Componentをimportする

いま作成したヘッダーComponentをindex.jsでimportして使いましょう。

index.jsに Headerコンポーネントをimport(3行目)して、<Header />という記述で描写します。

この状態で、Simulatorをリロードすると、

このように、アプリにヘッダーが描写されました!

こういった具合に、親コンポーネントが子コンポーネントをimportして、ブロックを組み立てるようにアプリを作っていくのがReactNativeによるアプリ制作です。

アプリ制作って難しそうなイメージがありますが、意外と簡単そうじゃないですか?

親コンポーネントから子コンポーネントにパラメーターを渡す

最後に親から子供にパラメーターを渡す方法を紹介します。

まずは、親コンポーネントに渡したいパラメーター名と、その値を記述します。(例:パラメーター名:showText, 値:RARA)

次に、子Componentでそのパラメータを受け取ります。

パラメータの受け取り方は、「アロー関数 () => {}」の引数にpropsと記述して(3行目)、パラメーターを表示したいところにパラメーター名を記述するだけ。今回でいうと、「props.showText」を今まで「ヘッダー」とべた書きしていた部分に記述するだけ(7行目)。

この状態で、リロードすると

パラメーターで渡した値(RARA)がヘッダーに表示されました!

まとめ

ReactNativeによるアプリ制作は、Componentという小さい単位のパーツを組み合わせていくだけ。非常にシンプルにアプリが作れるということで、FacebookアプリやInstagramアプリのような大手のアプリから、まだ創業間もないベンチャー企業のアプリまで、様々なアプリで実用化されています。

是非、あなたも、ReactNativeでアプリ制作ライフを楽しんでください!

引き続き、ReactNativeの記事を書いていきますので、お暇な時に見に来てくださいね!

 

※今回制作したファイル一式をgithubにあげておきましたので、興味ある人は是非😏(https://github.com/rara-tan/react-native-make-header)

ABOUTこの記事をかいた人

新卒ノマドエンジニアとして独立し、半年で月収100万円を達成する。フリーランスのエンジニアとして活動しながら、事務所を売却(バイアウト)したり、Youtuber(最高月間視聴回数109万回、チャンネル登録者1万人)をしたり、Openrecの公式配信者としてゲーム生実況をしたり、ベンチャー企業のCOOをしたり、パラレルキャリアを歩んでいる。 2019年にミニマムライフコストを不労所得で稼げるようになったため、いまは好きなことだけ仕事にしています。