1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

新人プログラマ応援 - みんなで新人を育てよう！
@hello_itoLabinパレットリンク

中学生、高校生でもiPhone/Androidアプリを同時開発！React Native超入門①

1
Last updated at Posted at 2026-03-30

前書き

プロのエンジニアが実際に使っているのと同じ道具を使って、自分だけのアプリを作っていきます。

iPhone、Android、Webでも動く、本物のアプリの世界へようこそ！

そんなものが中学生、高校生でもできるんですか？React Nativeならばできるんです！！
新しい技術に入るときには皆、赤ちゃんなので簡単なところから踏み込んでみましょう！
（プログラミング初心者の大人も大歓迎です）

※実際にアプリを作る下準備をしよう！
まではReactNativeへの事前知識となります。読み飛ばしても問題ありません。

1.はじめに

株式会社パレットリンクに在籍しています、@hello_itoLabです。

今回使用するReact Nativeは実際にプログラミング言語でコードを書いてアプリを作ります。コードを実際に書く力をつけると他の開発でもとても力になります。
学んだ技術はこれからも生かされます！頑張りましょう。

2.今回の目標

・アプリを作る環境構築

・スマートフォンで作成したアプリの初期表示

・画面遷移の実装

3.必要なもの

インターネットに繋がるパソコン

最低限のパソコンの知識
（マウスとキーボード、フォルダ操作ができれば大丈夫です。）

頑張る心
冗談に思えますが、頑張る心は一番大事です。実際にアプリが動く前の環境構築が1つの壁です。投げ出さないようにしましょう！

4.そもそも「React Native（リアクト・ネイティブ）」ってなに？

Meta（旧Facebook）が開発したフレームワークです。Web開発の技術でアプリが作れます。実はInstagramやDiscordなどの有名アプリでも採用されています。

参考
https://vnext.co.jp/v-blog/what-is-react-native.html

みんなが普段使っているスマホアプリは、実は作るのが結構大変です。iPhoneとAndroid、両方のスマホアプリを同時に作るのはこれまた大変です。

例の一つですが、iPhoneアプリを作るなら「Swift」という言葉、Androidアプリを作るなら「Kotlin」や「Java」という言葉のように、別々の言葉を勉強して2回も同じアプリを作らなきゃいけません。

え？どちらのスマホも同じ言葉で作れないの？

と疑問になると思いますが作れないです。日本人には基本的に日本語しか通じないようなものです。
実はReact Nativeはそれを解決してくれます。一つの言語で両方とも動くアプリ開発ができてしまいます。とても便利ですね。

5.【基礎知識】プログラムを組むうえで大事な言語やフレームワークを理解しよう

前述で「Swift」や「Java」を言葉という表現で説明しました。 これらはプログラミング言語というものです。 一方で今回利用するReact Nativeはフレームワークです。 初めてプログラミングの世界に入る人は違いがよくわからないと感じますよね。
プログラミング言語 「何語で書くか？」という基礎（素材）
フレームワーク 「どう効率よく作るか？」という便利な仕組み（キット）

このようなイメージがよいでしょうか？
なのでフレームワークは最悪なくても実はアプリを作ることができます。

ですが、フレームワークを使わずにアプリを作るのはとてつもない労力と時間が必要で不便です。現代では考えられないともいえるくらいにほとんどの製品にフレームワークは必須です。

目的地への移動で表現するならば道を自分自身で作り、そこを徒歩で歩いて目的地に向かうようなものです。フレームワークは電車や車、飛行機を使える、そんなイメージです。それは大変ですよね、なのでアプリを作る時大半はフレームワークを使います。

6.React Nativeを初心者におすすめしたい理由

一言でいえば
プログラミングを学ぶ上で将来を見越した経験を積めるためです。
React Nativeの文献を探すと似たようなフレーズがあります。

「Webエンジニアの知識をそのまま活かせる」

これは世界で最も普及しているWebフレームワークの一つである「React」をベースにしているからです。
ということはWebエンジニアでなければ知識がないため、初心者は敷居が高いと感じるかもしれません。

ですが、こういう見方をしたらどうでしょうか？

React Nativeを知ることでWebエンジニアの知識を得ることが出来て、JavaScriptやTypeScriptなどを取得することができるとしたら？

アプリ開発をしつつWebの知識、言語のスキルを手に入れることができますね。エンジニアとして、プログラマーとして二つの階段を上ることができます。

実はAndroidとiPhoneでアプリを開発できる技術は他にも「Flutter」などがあります。
ただしこちらの言語はDartというものを使用します。
こちらの言語自体は初心者にも進めやすいものですが、DartはJavascriptほど汎用性がまだ高くありません。
Javascriptは使ったことがあるけどReact Nativeは触ったことがない人は沢山いますが、Dartは使ったことがあるけどFlutterを触ったことがない人は少数だと思います。

それくらいにJavascriptは汎用的で世界でも多く様々な場所で使われるプログラミング言語です。
React Nativeを学び、他の関連した技術も自然に手に入れて次の学習へのハードルを下げることを狙いとしています。

7.ReactNativeの欠点

React Nativeの欠点 React Nativeは「OSの部品を借りる」という仕組みゆえの苦労があります。 OS標準の部品を使っているため、iOSやAndroidのバージョンが上がってシステムの見た目が変わると、意図せずアプリのデザインが崩れてしまうことがあります。 他には複雑な機能（カメラの深い制御、Bluetooth、特殊なセンサーなど）を作ろうとすると少し複雑になるなどがあります。

これらの欠点は今回の目的である初心者への学習、という点から離れているので気にしなくてよいでしょう。より深い機能を実現しようとするのであれば「Flutter」などを勉強するのがよいでしょう。

8.【ここからが実際の開発！】　実際にアプリを作る下準備をしよう！

今回のハンズオンでは、以下の3つのチームプレイでアプリを作ります。

React Native: アプリの「部品（ボタンや文字）」を組み立てる設計図。

Expo (エクスポ): 難しい設定を全部やってくれる「頼れるリーダー」。

JavaScript (TypeScript): 部品に「ボタンを押したら画面を変えて」と命令するプログラミング言語。

まずは、アプリを作るための「材料」をダウンロードしたり、動かしたりするための基本ツールを入れます。

必須
Node.js（ノード・ジェーエス）: JavaScriptという言葉を、パソコンが理解できるように翻訳してくれる「通訳さん」です。
やり方: 公式サイトから「LTS（推奨版）」を選んでインストールするだけです！Windowsインストーラーを実行してください。
https://nodejs.org/ja/download

あると便利
VS Code（ブイエスコード）: プログラミング専用の「ハイテクなメモ帳」です。書き間違いを教えてくれたり、色をつけて見やすくしてくれます。なくてもよいのですがある方がよいアプリです。
https://code.visualstudio.com/

同じ所属の@KurosakiTairaさんの記事にVSCodeのインストールが乗っていますのでそちらを参考にすると分かりやすいです。
https://qiita.com/KurosakiTaira/items/72dc360b9c860d6cfd9a

9.アプリの「土台」を作ろう

さあ、ここからが本番です！ パソコンの「コマンドプロンプト」を開いて、コマンドを打ち込みましょう。

初めての人は「コマンドプロンプト」ってなんだ？
となってしまいますが、安心してください、Windowsのパソコンであれば標準で備わっています。
まずはコマンドプロンプトを開いてみましょう。
Windowsキーを押す、もしくはスタートメニューをクリック
「コマンドプロンプト」と入力して実行できます。
もしくは「ファイル名を指定して実行(Win+R)」でcmdと入力し起動することもできます。

image.png
こんな画面がでてきます。
それではここからはコマンドプロンプトを使って進めていきましょう。

開くことができたらまずはプロジェクトを作るフォルダを指定しましょう。フォルダは予め作成したところを使用します。
下記のコマンドを打ち込んで見ましょう。

アプリのフォルダに入る
cd my-app

cd は「Change Directory（フォルダ移動）」の略です。これでプロジェクトを作るフォルダを見ることができます。上記では「my-app」としていますが、実際にプロジェクトを作るパスを指定してください。ファイルエクスプローラーでパスを確認できます。
image.png
今回はこちらのパスを指定しました。

次に実際にプロジェクトを作ってみましょう。

プロジェクトを作る呪文
npx create-expo-app@latest my-app

npx は「ネットから最新の道具を借りてくるよ」、
create-expo-app は「アプリのセット（ReactNative）を作って！」という意味です。
my-app はあなたのアプリの名前になります。好きな名前を入れてください。
Ok to proceed? (y)の質問にはyで問題ありません。
image.png

うまくいくと下記のようにフォルダが自動で作成されます。
image.png

もしもここで作成ができない場合はNodeJSが正しくインストールできていない可能性があります。

NodeJS確認
node -v
npm -v

こちらのコマンドを実行してバージョンが出るか確認してください。

それでは続きに戻ります。作ったアプリの箱の中に移動します。

アプリのフォルダに入る
cd my-app

10.スマホで動かしてみよう！

まだ何もコードを書いていませんが動かせます。コマンドプロンプトにさらにコマンドを書きましょう。
アプリを起動する
npx expo start

何やら沢山のローマ字がでましたね。その中に見覚えのあるQRコードが確認できたら起動成功です！
image.png

11.QRコードを読み取る

スマホに 「Expo Go」 というアプリを入れます（App StoreやGoogle Playにあります）。

パソコンの画面に出た大きなQRコードを、スマホのカメラで読み取ってみましょう。

下記のようにダウンロードが進みスマホで、今作ったばかりのアプリの画面が出たら成功です！

うまく行かない場合
ExpoGoでアプリを確認するにはパソコンとスマートフォンが同じネットワーク（Wifi）にいる必要があります。
モバイル通信などで接続している場合、同じWifiを指定してあげてください。

12.画面を書き換えてみよう（Hello World）

VS Codeで app/(tabs)/index.tsx というファイルを開いてみましょう。中身を全部消して、次のコードをコピーして貼り付けてみてください。

index.tsx
import { View, Text } from 'react-native';

export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#FFD700' }}>
      <Text style={{ fontSize: 40, fontWeight: 'bold' }}>
        こんにちは！
      </Text>
      <Text style={{ fontSize: 20 }}>
        2026年のアプリ開発へようこそ
      </Text>
    </View>
  );
}

保存（Ctrl + S または Cmd + S）した瞬間、スマホの画面がリアルタイムでパッと変わります！

このような画面が出れば成功

これを「ホットリロード」と呼びます。
修正したコードがすぐに反映されるので確認が容易にできます。
ホットリロードがうまく行かない場合は一度アプリを起動し直すこともしてみましょう。

アプリを起動する
npx expo start

「自分の書いた文字が、手元のスマホに映った！」
このワクワクが、アプリ開発の第一歩です。

画面の表示ができたので最後に動きをいれてみましょう！あとちょっとです！

13.ボタンを作って画面を切り替えてみよう（画面遷移）

2026年のReact Native（Expo）では、「Expo Router（エクスポ・ルーター）」という仕組みを使います。これは、Webサイトを作るのと同じように、「ファイルを作ると、それがそのまま新しい画面になる」という、とても直感的な仕組みです。

「詳細画面」を作ろう
今は app/(tabs)/index.tsx（ホーム画面）しかありません。新しく「詳細画面」という2枚目のページを作ります。

app/(tabs)/フォルダの中に、新しく details.tsx という名前のファイルを作ってください。
その中に、以下のコードをコピーして貼り付けましょう。

details.tsx
import { View, Text, StyleSheet } from 'react-native';
import { Link } from 'expo-router';

export default function DetailsScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>ここは詳細画面です！</Text>
      
      <Link href="/" style={styles.backButton}>
        <Text style={styles.buttonText}>ホームに戻る</Text>
      </Link>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#e0f7fa', 
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  backButton: {
    padding: 15,
    backgroundColor: '#007aff',
    borderRadius: 10,
  },
  buttonText: {
    color: 'white',
    fontWeight: 'bold',
  },
});

14.ホーム画面からジャンプできるようにしよう

次に、最初に作った app/(tabs)/index.tsx を書き換えて、「詳細画面へ行くボタン」を設置します。

下記のコードを入れてみましょう

index.tsx
import { View, Text, StyleSheet } from 'react-native';

import { Link } from 'expo-router';

export default function HomeScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>ホーム画面</Text>

      <Link href="/details" style={styles.button}>
        <Text style={styles.buttonText}>詳細ページを見てみる</Text>
      </Link>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  title: {
    fontSize: 30,
    fontWeight: 'bold',
    marginBottom: 30,
  },
  button: {
    padding: 20,
    backgroundColor: '#ff6347', 
    borderRadius: 15,
  },
  buttonText: {
    color: 'white',
    fontSize: 18,
    fontWeight: 'bold',
  },
});

スマートフォンのExpo Goを見てみましょう。

ホーム画面に大きなボタンが出ていますか？
それをタップするとパッ！と画面が切り替わりましたか？

詳細画面のボタンを押せば、またホームに戻ってこれます。

以上で今回の実装する内容は終わりです。

終わりに

今回の内容は画面を作り、ボタンを押して画面遷移するだけの単純アプリまで進めました。
これだけの機能でもうまく組み合わせればクイズ、図鑑、辞書などのアプリを作ることができます。
とても敷居が高いと感じるアプリ開発ですが一歩足を踏み出せば案外作るのほ難しくありません。
これからもReactNativeの記事を続けていきますのでぜひ他の記事も合わせて読んでいただけると嬉しいです。

パレットリンクでは、日々のつながりや学びを大切にしながら、さまざまなお役立ち記事をお届けしています。よろしければ、ぜひ「Organization」のページもご覧ください。
また、私たちと一緒に未来をつくっていく仲間も募集中です。ご興味をお持ちの方は、ぜひお気軽にお問い合わせください。一緒に新しいご縁が生まれることを楽しみにしています。

◆編集履歴
3/31 画像サイズ変更、あとがき追記

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?