AI活用の教科書
モバイル開発ふつう3分で読了

React Native

React Nativeりあくとねいてぃぶ

ひとことで言うと

Reactの書き方でiPhoneとAndroidのアプリを一度に作れる仕組みです。

📖 もうちょい詳しく

何が新しいの?

スマホアプリは、これまでiPhone用とAndroid用を別々の言語で作るのがふつうでした。同じアプリでも二回作る手間がかかります。React Native(リアクトネイティブ)は、Webサイト作りで人気の「React(リアクト)」という道具を使い、一つのコードでiPhoneとAndroidの両方に対応させようという仕組みです。Facebook(現Meta)が公開しました。

どうやって動いてるの?

開発者は、ふだんWeb開発で使うJavaScript(ジャバスクリプト)というプログラミング言語と、Reactの書き方でアプリの中身を書きます。React Nativeは、その指示を「ネイティブ部品」、つまりiPhoneやAndroidが本来もっているボタンや文字といった本物の画面部品に変換して表示します。だからWebサイトを表示しているのではなく、その端末らしい見た目と動きになります。

何ができるの?

Webの知識を持つ人が、その経験を活かしてスマホアプリ作りに入りやすくなります。一つのコードを土台にできるので、二つのアプリを別々に作るより手間を減らせる場合があります。実際に多くの有名アプリの一部にも使われていて、写真共有や買い物、業務用アプリまで幅広く作れます。

🌱 身近なたとえ

二か国語の通訳をつける仕組みで例えると分かりやすいです。あなたは日本語(React)だけで話せばよく、通訳(React Native)が同じ内容を英語と中国語(iPhoneとAndroid)に同時に伝えてくれます。書く(話す)のは一度きりで、その一つの内容が相手それぞれの言葉に合わせて届く、というイメージです。

✅ まず覚えるポイント

  • ReactでiPhoneとAndroidのアプリを作れる仕組みです
  • 一つのコードを土台に両対応をめざす「クロスプラットフォーム開発」です
  • 中身はJavaScriptとReactの書き方で書きます
  • 画面はその端末本来の部品(ネイティブ部品)で表示されます
  • Webの知識を活かしてアプリ開発に入りやすくなります
  • Metaが公開し、多くのアプリで使われています

🧭 よくある勘違い

Webサイトをアプリの形にしただけ?

いいえ、少しちがいます。Webページをそのまま枠に入れて表示する方法もありますが、React Nativeはその端末本来のボタンや文字を呼び出して描きます。そのため、操作の感触がよりアプリらしくなることが多いです。

一度書けば何でも全自動で両対応?

そこまで万能ではありません。多くの部分は共通化できますが、カメラや通知など端末ごとの細かい違いに合わせて、個別に調整が必要になる場合もあります。共通化できる範囲が広い、と捉えるのが正確です。

🧩 関連して覚えると楽な言葉

  • React: Webの画面を部品ごとに組み立てるための、人気の道具です
  • JavaScript: ブラウザやアプリを動かす、よく使われるプログラミング言語です
  • Flutter: React Nativeと同じく、一つのコードで両対応をめざす別の仕組みです
  • SPA: ページを切り替えず、なめらかに動くWebアプリの作り方です

🏁 ひとことでまとめ

Webで身につけたReactの腕を、そのままスマホアプリ作りに持ち込める入り口がReact Nativeです。