ReactNative入門 基本フォルダ構成について

スクリーンショット 2019-07-29 3.02.38

ReactNativeをExpoやReactNative-CLIを使ってアプリケーションの雛形をReactNative入門 ExpoとReactNativeCliの使い方で紹介しました。

雛形を使ってアプリケーションの構成について紹介します。

利用したツールは、Expoのexpo-cli(version 3.0.4)です。

 

 

フォルダ構成

 

雛形作成後のフォルダ構成です。

 

それぞれの解説をしていきましょう。最初は、プログラムで利用するプラグイン関係です。

yarn.lock

 

yarnは、npmと同じくJavaScriptのパッケージマネージャーです。

アプリケーションを作成時に、Yarnを使うか聞かれたときにYesと答えると作成されます。

すると、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は、アプリケーションで実行されるコードです。

 

 

 

App.jsの中身解説

 

まずは、コードの大きな流れとして

  • 他で作成されたライブラリを使えるようにimport
  • 計算などの関数(今回は雛形のため、説明のみ)
  • 描画するためのrender()関数
  • 描画時のstyleの設定

で分かれています。それぞれを説明していきます。

 

他で作成されたライブラリを使えるようにimport

 

ReactやReactNativeは、アプリケーションを表示するためにいろんなプログラムが入っています。しかし、すべてをページで読み込むと実行までにとても長い時間がかかってしまいます。

そこでimport文は、利用したいプログラムだけを読み込むことができます。

上記のimport文は、直訳すると「Reactって名前でreactライブラリ読み込むよ」「StyleSheetとTextとViewって名前でreact-nativeライブラリを読み込むよ」となっています。

これにより、この後のプログラムで Text や Viewなどを利用することができます。

 

計算などの関数(今回は雛形のため、説明のみ)

 

プログラムでは、数字や文字をボタンを押すことで変化しますよね。

そのときの処理をrender()関数などとは別でfunc()で作成します。

 

描画するためのrender()関数

 

 

render()関数は、描画する内容をreturnで返すものです。

上記のプログラムでは、Hello Worldという文字を表示させています。

returnだけに注目すると

<View> </View>の中に <Text> </Text>が入れ子になっています。

HTMLの<div>などのタグのようにコンポーネント名で<○○>と</○○>でくくると利用することができます。まずは、<View>で画面表示用のViewを設定します。何か図を書くときに白い紙を用意して書きますよね?そのときの紙のようなものをViewだと思ってください。

次にViewに文字を表示させるために、<View>コンポーネントの中に入れ子で<Text>コンポーネントを入れています。コンポーネントを入れ子にすることで利用できるコンポーネントもたくさんあります。<Text>コンポーネントは文字を表示させます。

ReactNativeとReactの大きな違いとして描画時はコンポーネントを使いHTMLの<div>などの要素を使わないことが挙げられます。

 

描画時のstyleの設定

 

Viewコンポーネントの中にstyleがありました。これはViewコンポーネントに表示時のオプションとしてstyles.containerを当てるという意味です。

stylesの中身はこちらで設定しています。

react-nativeのStyleSheetコンポーネントのcreate関数を使ってWeb開発のCSSに当たる装飾要素を設定しています。このflexなどは、また別の機会に説明します。

 

 

まとめ

 

ReactNativeの雛形のフォルダ構成と中身の説明を行いました。

手早く進めるには、App.jsの部分だけみるとわかりますが他のデータは一体なにをしているのかを理解することで、変なエラーのときに助かるときもあります。

雛形の説明が終わったので、次回からApp.jsを編集してアプリケーションを開発していきます。

 


Sponsored Link

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です