ReactNativeをExpoやReactNative-CLIを使ってアプリケーションの雛形をReactNative入門 ExpoとReactNativeCliの使い方で紹介しました。
雛形を使ってアプリケーションの構成について紹介します。
利用したツールは、Expoのexpo-cli(version 3.0.4)です。
Contents
フォルダ構成
雛形作成後のフォルダ構成です。
|
1 2 3 4 5 6 7 8 9 |
App.js assets/ ios/ node_modules/ package-lock.json yarn.lock package.json app.json babel.config.js |
それぞれの解説をしていきましょう。最初は、プログラムで利用するプラグイン関係です。
yarn.lock
yarnは、npmと同じくJavaScriptのパッケージマネージャーです。
アプリケーションを作成時に、Yarnを使うか聞かれたときにYesと答えると作成されます。
|
1 |
? Yarn v1.7.0 found. Use Yarn to install dependencies? |
すると、yarnツールを使ってインストールされたライブラリやモジュールなどのバージョンなどがメモされたデータがyarn.lockです。
パッケージマネージャーとは、いろんなライブラリを管理するためのツールで導入や削除を簡単にしてくれます。バージョンが日々更新されるライブラリが多いため、他の人がアプリケーションを各自のPCで確認するときに、バーションを指定してインストールしてくれます。
package.json package-lock.json
yarnと同じでnpmコマンドで生成されるパッケージです。
lockとの違いは、package.jsonはnpm installコマンドをするときにインストールする項目リストでlockはそれらが、すでにインストールされていたりするかのインストールログリストのようなものだと思ってください。
babel.config.js
babelは、新しいコードを古いコードへ書き直す変換ツールです。
JavaScriptは、EcmaScriptで標準化がされています。JavaScriptは、現在es6というバージョンで作成されています。JavaScriptは主にブラウザで利用されますが、ブラウザごとで前のバージョンでしか動かないケースもあります。そこでbabelが活躍してくれます。
ReactNativeのコーディングには直接関係がないため、詳しいことは省きます。
app.json
アプリケーションの名前やバージョンなどアプリケーションの詳細についてかいてあるデータです。起動時のスプラッシュ画像を選択することもできます。
App.js
ここからやっとReactNativeの入門のパートです。
App.jsは、アプリケーションで実行されるコードです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; export default function App() { render() { return ( <View style={styles.container}> <Text>Hello World!</Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, }); |
App.jsの中身解説
まずは、コードの大きな流れとして
- 他で作成されたライブラリを使えるようにimport
- 計算などの関数(今回は雛形のため、説明のみ)
- 描画するためのrender()関数
- 描画時のstyleの設定
で分かれています。それぞれを説明していきます。
他で作成されたライブラリを使えるようにimport
|
1 2 |
import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; |
ReactやReactNativeは、アプリケーションを表示するためにいろんなプログラムが入っています。しかし、すべてをページで読み込むと実行までにとても長い時間がかかってしまいます。
そこでimport文は、利用したいプログラムだけを読み込むことができます。
上記のimport文は、直訳すると「Reactって名前でreactライブラリ読み込むよ」「StyleSheetとTextとViewって名前でreact-nativeライブラリを読み込むよ」となっています。
これにより、この後のプログラムで Text や Viewなどを利用することができます。
計算などの関数(今回は雛形のため、説明のみ)
プログラムでは、数字や文字をボタンを押すことで変化しますよね。
そのときの処理をrender()関数などとは別でfunc()で作成します。
描画するためのrender()関数
|
1 2 3 4 5 6 7 8 9 |
export default function App() { render() { return ( <View style={styles.container}> <Text>Hello World!</Text> </View> ); } } |
render()関数は、描画する内容をreturnで返すものです。
上記のプログラムでは、Hello Worldという文字を表示させています。
returnだけに注目すると
|
1 2 3 4 5 |
return ( <View style={styles.container}> <Text>Hello World!</Text> </View> ); |
<View> </View>の中に <Text> </Text>が入れ子になっています。
HTMLの<div>などのタグのようにコンポーネント名で<○○>と</○○>でくくると利用することができます。まずは、<View>で画面表示用のViewを設定します。何か図を書くときに白い紙を用意して書きますよね？そのときの紙のようなものをViewだと思ってください。
次にViewに文字を表示させるために、<View>コンポーネントの中に入れ子で<Text>コンポーネントを入れています。コンポーネントを入れ子にすることで利用できるコンポーネントもたくさんあります。<Text>コンポーネントは文字を表示させます。
ReactNativeとReactの大きな違いとして描画時はコンポーネントを使いHTMLの<div>などの要素を使わないことが挙げられます。
描画時のstyleの設定
|
1 |
<View style={styles.container}> |
Viewコンポーネントの中にstyleがありました。これはViewコンポーネントに表示時のオプションとしてstyles.containerを当てるという意味です。
stylesの中身はこちらで設定しています。
|
1 2 3 4 5 6 7 8 |
const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, }); |
react-nativeのStyleSheetコンポーネントのcreate関数を使ってWeb開発のCSSに当たる装飾要素を設定しています。このflexなどは、また別の機会に説明します。
まとめ
ReactNativeの雛形のフォルダ構成と中身の説明を行いました。
手早く進めるには、App.jsの部分だけみるとわかりますが他のデータは一体なにをしているのかを理解することで、変なエラーのときに助かるときもあります。
雛形の説明が終わったので、次回からApp.jsを編集してアプリケーションを開発していきます。
