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を導入した企業が、そのまま企業価値を高められているか」という問いに対しては、まだ明確に「Yes」とはいえません。 独立行政法人情報処理推進機構（IPA）が2026年7月に公表した「DX動向2026」では、日本企業のAI導入・試験利用が58.0％に達したことが明らかになりました。AI活用そのものは、もはや一部の先進企業だけの取り組みではありません。 一方で、AIによって得られた成果を見ると、「業務が効率化したり迅速化した」が91.6％であるのに対し、「顧客満足度が向上した」は4.5％、「売上や利益が向上した」はわずか3.9％にとどまっています。 つまり、AI導入は進んでいるものの、その成果はまだ「社内の効率化」という内向きの領域に集中しているのです。 この状況を変えるために重要になるのが、AIツールを増やすことだけではありません。AIが企業の中核業務や顧客接点、データ活用まで入り込めるよう、既存システムそのものを見直すことが必要です。 この記事では「DX動向2026」のデータを読み解きながら、AI活用を企業価値創出につなげるために、なぜレガシーマイグレーションが重要なのか、そしてどのシステムから刷新すべきなのかを解説します。 レガシーマイグレーションについて知りたい方 AIを活用したい方 これらに当てはまる方におすすめの記事となっています。これを読めばレガシーマイグレーションの特徴が丸わかりですよ。 (more…)
「レガシーシステムを刷新したいが、コストや移行リスクが不安」「生成AIをシステム刷新に活用したい」と考える企業が増えています。 2026年は、生成AIを活用して既存システムの解析やコード変換、ドキュメント作成、テストなどを効率化する「モダナイゼーション×AI」が注目されています。 この記事では、AIを活用したモダナイゼーションのメリットや成功のための戦略、失敗を防ぐための注意点について詳しく解説します。 モダナイゼーションが気になる方 モダナイゼーションとAIをどう組み合わせればいいのかわからない方 業務にAIを活用していきたい方 これらに当てはまる方におすすめの記事となっています。これを読めばモダナイゼーションとAIの活用方法やポイントが丸わかりですよ。 (more…)
多くの企業では、長年にわたって利用してきた基幹システムや業務システムが、現在も重要な役割を担っています。 一方で、こうした「レガシーシステム」は、技術の老朽化や複雑化、保守人材の不足、外部サービスとの連携の難しさなど、さまざまな課題を抱えています。 こうした状況を受け、企業ではシステムを単純に新しくする「リプレース」だけではなく、クラウドやAPI、データ分析基盤などを活用して、IT環境そのものを現代のビジネスに適した形へ変える「モダナイゼーション」が進んでいます。 本日はそんなモダナイゼーションについて、具体的な手順や活用事例を踏まえて解説していきます。 モダナイゼーションが気になる方 社内のIT人材が不足している方 レガシーシステムの刷新をしたい方 これらに当てはまる方におすすめの記事となっています。これを読めばモダナイゼーションについてわかるのはもちろん、レガシーシステム刷新の具体的な手順まで丸わかりですよ。 (more…)
〜IPA『DX動向2026』から読み解く、日本企業のリアルな課題と本質〜 はじめに：69ページの報告書が突きつける問い 独立行政法人情報処理推進機構（IPA）が発表した最新の調査資料『DX動向2026』（有効回答数：1,799社）。本レポートを精読する中で、最も印象的かつ示唆に富んでいたのは、次の現実でした。 「コストを削減することは、新たな売上を生み出すことよりもはるかに容易である」 日本においてDXへの取り組み率は75.7%に達し、過去数年間にわたり高水準で推移しています。もはや「DXに取り組むべきか否か」という議論のフェーズは完全に過去のものとなりました。しかし、その取り組みの内実をデータで精査すると、多くの企業が直面している構造的な課題が浮かび上がってきます。 1. 「守りのDX」の成功と、「攻めのDX」の停滞 DXに取り組んでいる企業のうち、60.8%が「何らかの成果が出ている」と回答しています。しかし、その「成果」の内訳には顕著な偏りが見られます。 業務効率化・コスト削減の成果：70.9% 新規事業創出・売上拡大の成果：わずか17.9% ペーパーレス化や社内業務のデジタル化といった、既存プロセスの効率化（いわゆる「守りのDX」）は順調に進展しています。しかし、製品・サービスの変革やビジネスモデル自体の刷新といった、事業価値を拡張する「攻めのDX」で具体的な成果を上げている企業は2割にも満たないのが現状です。 効率化によるコスト削減はDXの重要な足がかりですが、それ自体がゴールではありません。真の変革は、効率化によって生み出された余力を「新たな事業機会の創出」へ再投資することで初めて達成されます。 2. 投資拡大の裏にある「投資対効果（ROI）の不可視性」 レポートが示すもう一つの注目すべきデータは、投資と効果測定のギャップです。…
企業の業務を支える基幹システムや業務システムは、長年にわたって使い続けることで、企業独自の業務ノウハウが蓄積される一方、システムの老朽化や複雑化が進みやすくなります。 「古いシステムを刷新したいが、業務を止めることはできない」「既存システムに詳しい担当者が退職し、保守が難しくなっている」「DXを推進したいものの、既存システムが足かせになっている」といった課題を抱える企業も少なくありません。 こうした問題を解決するための重要な取り組みが「モダナイゼーション」です。 モダナイゼーションは、単純に古いシステムを新しいものへ置き換えるだけではありません。既存システムが持つデータや業務ロジック、ノウハウを活かしながら、現在のビジネス環境に適したIT基盤へと刷新していく考え方です。 この記事では、モダナイゼーションの基本的な意味からDXとの違い、代表的な刷新手法、AIを活用した進め方、実施手順、成功させるためのポイントまで詳しく解説します。 モダナイゼーションについて知りたい方 古いシステムを刷新したい方 DX化をすすめたい方 これらに当てはまる方におすすめの記事となっています。これを読めばモダナイゼーションについてわかるのはもちろん、DX化との違いまで丸わかりですよ。 (more…)
「AIを業務に取り入れたいけれど、導入コストが気になる」「どのようなAIツールを選べばよいのかわからない」「補助金を使ってDXを進めたい」――このような悩みを抱える中小企業・小規模事業者は少なくありません。 そこで活用を検討したいのが、2026年度の「デジタル化・AI導入補助金」です。 従来の「IT導入補助金」から名称が変更され、2026年度はAI活用を含むデジタル化をより意識した制度となっています。 業務効率化や生産性向上につながるITツールの導入費用を支援することで、中小企業のDXを後押しする制度です。 この記事では、2026年度のデジタル化・AI導入補助金について、制度の概要から申請スケジュール、AI活用の具体例、申請時の注意点までをわかりやすく解説します。 AI導入を検討している方 IT導入補助金を申請したい方 これらに当てはまる方におすすめの記事となっています。これを読めば2026年度の「デジタル化・AI導入補助金」の詳細がわかるだけでなく、具体的な申請方法も丸わかりですよ。 (more…)