App.jsファイルの雛形ソースコードについて解説【ReactNative】

本記事の内容

• App.jsファイルを見てもソースコードの作り、見方が分からない
• アプリを作るのに何から始めればいいのかわからない

と疑問があり、悩んでいる方向けの記事となっています。


前提
今回、ソースコードを編集しますので、エディタが必要になります。
まだ、エディタをインストールされていないと言う方は、インストールしておいてください。

筆者本人が使用しているエディタは、Visual Studio Codeを使用しています。
公式サイト：Visual Studio Code

1. 概要

ここでは、App.jsファイルのソースコードについて解説していきます。
また、App.jsファイルは、JavaScriptで書かれたソースコードであることを前提とします。

2. App.js

App.jsファイルをエディタで開くと以下のように表示されると思います。

2.1 import

必要なコンポーネント(機能)を使うためにライブラリ(パッケージ)から呼び出す為に使います。

以下を例に解説します。

import	読み込む(本アプリで機能を使えるようにする)
{ StyleSheet, Text, View }	コンポーネント(機能の部品)
from	〜から
‘react-native’	ライブラリ(アプリを構成する色んなプログラムが入っている)

つまり、「‘react-native’ライブラリの中からStyleSheet,Text,Viewの機能を本アプリで使えるようにしますよ。」という意味ですね。

他のReactNativeライブラリの機能(ButtonやImageなど)を使いたかったら、{ }内に追加してあげる必要があります。

ライブラリの中にどんなコンポーネントがあるかは、公式ドキュメントに記載してあるので、ご覧ください。(全て英語ですが…)
公式ドキュメント

2.2 return()

return()内に書かれているソースコードがアプリケーションに表示されます。

2.3 コンポーネント

では、次にStyleSheet,Text,Viewコンポーネントについて解説していきます。

StyleSheet

StyleSheetは、スタイルを定義するものです。必ずしもStyleSheetが必要という訳では、ないですがStyleSheetを使うことで、ソースコードの見栄えがきれいになり、作業効率が上がります。活用することをおすすめします。

Text

＜Text＞＜/Text＞で囲われた箇所がを文字列として表示することができます。
app.jsのソースコードでは、＜Text＞で「Open up App.js to start working on your app!」と囲われているので、文字列として、シミュレータに表示されています。

試しにシミュレータを立ち上げた状態で、この文字列を「ReactNative Hello!」と変えてみて、保存してみてください。

▼以下のようにソースコードを変更

下記のように表示が変わるはずです!

表示が変わらないと言う方は、
・シミュレータを立ち上げ直すか
・シミュレータを選択した状態で「command + R」でリロード
をしてみてください。

View

UIを構築するための最も基本的なコンポーネントです。
Viewコンポーネントはアプリ開発に大切な機能ですので、次の記事で解説します。

3. まとめ

今回は、App.jsファイルの雛形ソースコードについて解説しました。
import, コンポーネント, ライブラリは、アプリ開発において大切な知識です。アプリはコンポーネントを組み合わせてできますので、色んなコンポーネントを試してみましょう。