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技術の進化とともに、業務効率化やサービス向上を目的とした「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…)
AI（人工知能）は、世界各国の経済成長を支える基盤技術として注目されています。 とりわけベトナムでは、政府が国家戦略としてAIの導入を明確に位置づけ、経済、教育、公共行政、スタートアップ育成まで多岐にわたる分野で取り組みを強化しています。 この記事では、「ベトナムAI経済2025年」レポートをもとに、マクロ経済との接続性、国家戦略、セクター別の導入状況、スタートアップ・投資動向、そして将来の展望について解説します。 ベトナムのAIが気になる方 最新のベトナムの経済動向が気になる方 社内のIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めばAIがもたらすベトナム経済の進化と、その背景にある政策と市場構造を総合的に理解することができます。 (more…)
近年、開発現場では「品質」「スピード」「セキュリティ」のすべてを高次元で実現することが求められています。 特に、高度な専門性や情報セキュリティが重要視される分野では、国内同様の品質と体制が前提となります。 そんな中、「No-BrSEオフショア開発」をご紹介します。 これは従来のオフショア開発におけるブリッジSE（BrSE）を介さず、日本語で直接やり取りができる完全日本語対応のラボ型開発チームを導入するモデルです。 この記事ではそんなNo-BrSE開発の特徴、メリット、適した活用シーンまでを詳しく解説します。 No-BrSEオフショア開発が気になる方 社内のIT人材が不足している方 開発の品質を高めたい方 これらに当てはまる方におすすめの記事となっています。これを読めばNo-BrSEオフショア開発のメリットや活用方法が丸わかりですよ。 (more…)
近年、開発コスト削減やリソース確保を目的として「オフショア開発」を導入する企業が増えています。 その中でも開発スタイルとして注目されているのが「請負型（受託型）」の契約形態です。 この記事では、請負型の基本的な概要から、メリット・デメリット、向いているプロジェクトの特徴、活用シーンまでを徹底解説します。 オフショア開発が気になる方 請負型について気になる方 社内のIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めばオフショア開発の請負型について メリットデメリットがわかるだけでなく活用できるシーンまで丸わかりですよ。 (more…)