v0.57以降React Nativeが公式でTypeScriptに対応するようになりました。
Babel7でTypeScriptをトランスコンパイル出来るようになったため、その仕組みをReact Nativeが利用する形で実現されています。 ただし、Babelは古いJavaScriptへのトランスコンパイルを行うだけで、型チェックまでは行ってくれません。
そのため型チェックはtscコマンドで別途実行する必要があります。
そこで、この記事ではBabel7でReact Native+TypeScriptを実行しつつ、tscコマンドによる型チェックが出来る環境を構築するための手順を解説していきます。
これらに当てはまる方におすすめの記事となっています。これを読めばTypeScriptをReact Nativeに導入する方法が丸わかりですよ。
まずは下記コマンドでReact Nativeのサンプルプロジェクトを作成します。
react-native init TSSampleApp
サンプルプロジェクトが作成できたら、
下記コマンドを実行して画面が正常に表示されることを確認します。
npm run ios
今回はTypeScriptの環境構築がメインですので、Androidは割愛します。
次に下記コマンドでApp.tsxにファイル名をリネームします。
mv App.js App.tsx
.tsxはJSXを返すファイルでTypeScriptを利用する場合の拡張子です。
リネーム後にシミュレーターを確認すると下記のエラーが表示されます。
これは利用しているReactやReact Nativeのライブラリの型定義ファイルが見つからず、
TypeScriptのコンパイルエラーになるためです。
次に下記コマンドでTypeScript本体とReact Native開発に必要な型定義ファイルをインストールします。
インストールするライブラリはReact Nativeの公式ドキュメントに従っています。
yarn add --dev typescript @types/jest @types/react @types/react-native @types/react-test-renderer
@typesで始まっているTypeScriptの型定義ファイルはDefinitelyTypedで管理されています。
ライブラリのインストールが完了したら、上記のMetro Bundlerを再起動します。
起動が完了したら下記画面が表示されるようになります。
これでTypeScriptをBabelでトランスコンパイルして実行出来るようになりました。
次にtscコマンドでTypeScriptの型チェックが出来るようにします。
下記の内容でtsconfig.jsonをプロジェクトのルートに作成します。
{
"compilerOptions": {
"allowJs": true,
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"isolatedModules": true,
"jsx": "react",
"lib": ["es6"],
"moduleResolution": "node”,
"noEmit": true,
"strict": true,
"target": "esnext"
},
"exclude": [
"node_modules",
"babel.config.js",
"metro.config.js",
"jest.config.js"
]
} noEmit: trueを設定することでJavaScriptのトランスコンパイルはBabelに任せ、 tscコマンドはファイル出力はせず型チェックのみ行うようにしています。
上記の設定内容もReact Nativeの公式ドキュメントに従っています。
次にtscコマンドをnpm-scriptsのbuildで実行できるようにpackage.jsonを修正します。
"scripts": {
"build": "tsc",
…
}, 追加できたら下記コマンドを実行します。
npm run build
実行すると以下のようなエラーが表示されます。
> tsc
App.tsx:26:18 - error TS2304: Cannot find name 'React$Node'.
26 const App: () => React$Node = () => {
App.tsx:35:12 - error TS2304: Cannot find name 'global'.
35 {global.HermesInternal == null ? null : (
Found 2 errors. React$NodeはReact.ReactNodeに書き換え、HermesInternalに関してはCannot find name ‘global’.ts(2304) のイシューを参考に修正します。
TypeScriptテンプレートを利用せずにReact Nativeアプリを作成した場合、デフォルトではflowを利用するようになっています。
TypeScriptを利用する場合は不要なので、 下記コマンドで設定ファイルを削除します。
rm .flowconfig
これでTypeScriptを利用してReact Native開発が行えるようになりました。
TypeScriptを利用してReact Native開発を行うことで、JavaScriptのコードのみでiOSとAndroid両方のアプリを開発することができます。
この記事では環境構築の手順を紹介していきました。こちらの記事では実際の画面の開発について解説しています。
ぜひ合わせてチェックしてみて下さい。
こうしたアプリ開発を外注してみるのはいかがでしょうか。 dehaソリューションズではオフショア開発によって低コストで迅速な開発をサポートしています。
Laravelに関して詳しくお話を聞きたい方、開発相談や無料お見積りをしたい方はこちらからご気軽にお問い合わせください。
▼ dehaソリューションへの簡単見積もりの依頼はこちら
近年、生成AI（Generative AI）はビジネスの在り方を大きく変革する技術として急速に普及しています。 文章、画像、音声、コードなど、多様なコンテンツを自動生成できるこの技術は、従来の業務効率化だけでなく、新たな価値創出や顧客体験の革新にも直結します。 特にエンタープライズ（大企業）においては、膨大なデータ資産や高度なセキュリティ要件、複雑な業務プロセスを背景に、生成AIの導入が戦略的な投資対象として注目されています。 この記事ではそんなエンタープライズ向け生成AIについて具体的な活用事例や導入ステップなど徹底解説していきます。 (more…)
近年、生成AI（Generative AI）は文章生成、画像生成、音声合成、プログラムコードの自動生成など、幅広い分野で実用化が進んでいます。 業務効率化や新しい価値創造の手段として注目され、さまざまな業種で導入が加速しています。 しかし、生成AIサービスを導入するにあたり、どのような形態で利用するかは企業の戦略や要件によって異なります。 この記事では、主な導入形態としてSaaS型の生成AIサービス、オンプレミス型生成AIサービス、API/PaaS活用型生成AIサービスに着目し、それぞれの特徴・メリット・デメリット・選び方のポイントを整理します。 生成AIサービスを導入したい方 生成AIサービスのタイプを知りたい方 社内のIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めば生成AIサービスについてどんな特徴があるのかがわかるのはもちろん、適切な選び方まで丸わかりですよ。 (more…)
2025年、生成AIはビジネスと社会の在り方を大きく変えつつあります。 大規模言語モデル（LLM）、マルチモーダルAI、RAG、AIエージェントといった技術革新が進み、企業の業務効率化から新しい価値創造まで、その活用範囲は急速に広がっています。 この記事ではそんな生成AI市場について、今後の展望や業務への活用について動向などを見ていきます。 生成AIを活用したい企業の方 業務を効率化したい方 社内のIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めば生成AI市場について現状と今後の展望が丸わかりですよ。 (more…)
近年、AI技術の進化とともに、業務効率化やサービス向上を目的とした「AIエージェント」の導入が急速に進んでいます。 弊社でも、この流れを受けてAIエージェントの導入を進め、多くの現場で業務の質とスピードの両立を実現することができました。 この記事では、実際に弊社が取り組んだAIエージェントの活用事例を紹介しながら、AI導入によるメリットとその可能性についてご紹介いたします。 AIエージェントが気になる方 AIエージェントの事例が知りたい方 社内の人材不足にお悩みの方 これらに当てはまる方におすすめの記事となっています。これを読めばAIエージェントの成功事例が丸わかりですよ。 (more…)
近年、業務効率化や顧客対応の高度化を目的として、企業や自治体、教育機関など多くの組織で「AIエージェント」の導入が進んでいます。 AIエージェントとは、人工知能を活用して自動的に応答や処理を行うシステムの総称で、チャットボットやバーチャルアシスタント、RPA（Robotic Process Automation）などが含まれます。 しかしながら、AIエージェントの導入には多くの期待が寄せられる一方で、現場ではさまざまな課題に直面するケースも少なくありません。 この記事では、AIエージェント導入によくある課題とその解決方法について、具体的に解説していきます。 AIエージェントに興味がある方 AIエージェントの導入に不安がある方 社内の人材不足にお悩みの方 これらに当てはまる方におすすめの記事となっています。これを読めばAIエージェントの特徴がわかるのはもちろん、うまく活用するための方法もわかりますよ。 (more…)
近年、AI技術の進化により、私たちの生活やビジネスのあらゆる場面で人工知能（AI）が活用されるようになっています。 その中でも注目されているのが「AIエージェント」です。音声アシスタント、チャットボット、カスタマーサポートなど、さまざまな場面で導入が進むAIエージェントは、業務効率化やユーザー体験の向上に大きな可能性を秘めています。 この記事では、AIエージェントの基本的な定義から、その特徴、導入メリット、さらに活用事例や今後の展望までを網羅的に解説します。 AIエージェントが気になる方 社内の人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めばAIエージェントの特徴や具体的な活用メリットがわかりますよ。 (more…)