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レガシーマイグレーションが気になる方 製造業の方 DXをすすめたい企業の方 これらに当てはまる方におすすめの記事となっています。これを読めばAIレガシーマイグレーションがどう言ったものかがわかるのはもちろん、DEHAのAIレガシーマイグレーションについてもわかりますよ。 (more…)
近年、企業のIT戦略やシステム開発において「AI Native（AIネイティブ）」という言葉が急速に注目を集めています。 この記事ではそんなAI Nativeについて、その概要やメリットなどを紹介していきます。 AI Nativeが気になる方 システム開発をお考えの方 社内にIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めばAI Nativeが何かがわかるのはもちろん、導入するべき理由が丸わかりですよ。 (more…)
IFS Cloudは、スウェーデン発のグローバルERPパッケージであり、ERP、EAM（設備資産管理）、SM（サービス管理）を統合的に提供する統合プラットフォームです。 本日はそんなIFS Cloudについて主要モジュールを解説します。 IFS Cloudに興味がある方 ERPをお探しの方 製造業の方 これらに当てはまる方におすすめの記事となっています。これを読めばIFS Cloudについてわかるのはもちろん、IFS Cloudの強みまで丸わかりですよ。 (more…)
企業のDX推進が本格化する中で、ERP（基幹業務システム）の役割は単なる業務管理ツールから、経営基盤そのものへと変化しています。 その中で、世界的に注目されているクラウドERPが IFS とOracle Cloud ERPです。 どちらも世界トップクラスのERPとして高く評価されていますが、実際には設計思想や得意分野が大きく異なります。 IFS Cloudは「現場・設備・サービス」を重視したERPであり、製造業やインフラ産業との相性が非常に高いことで知られています。 一方のOracle Cloud ERPは、「財務・経営統制・グローバル管理」を重視したERPであり、多国籍企業や大企業における経営管理基盤として強みを発揮しています。 そのため、「どちらが優れているか」という単純な比較ではなく、「自社の業務や経営戦略にどちらが適しているか」を見極めることが重要になります。 この記事では、IFS CloudとOracle…
製造業や建設業、航空・防衛、エネルギー、サービス業など、複雑な業務を抱える企業にとって、ERPシステムは単なる基幹システムではなく、経営そのものを支えるインフラとなっています。 しかし近年、多くの企業で従来型ERPの限界が顕在化しています。そのような中で注目されているのが、クラウド型ERPへの移行です。 この記事では、「IFSクラウドへ移行すべき4つの理由」というテーマで、IFS Cloudがなぜ多くの企業に選ばれているのかを詳しく解説します。 IFSクラウドに興味がある方 製造業や建設業の方 従来型ERPをお使いの方 これらに当てはまる方におすすめの記事となっています。これを読めばIFSクラウドへ移行すべき理由がわかるだけでなく、経営改革の視点からIFS Cloudの価値を整理することができますよ。 (more…)
製造業を取り巻く環境は、ここ数年で大きく変化しています。原材料価格の高騰、サプライチェーンの不安定化、人手不足の深刻化、さらにはDXの加速など、企業にはこれまで以上に迅速かつ柔軟な意思決定が求められています。 こうした中で注目されているのが、企業の基幹業務を統合・最適化するERP（基幹業務システム）の再構築です。 その中で、多くの製造業が比較検討しているのが「IFS Cloud」と「SAP」です。いずれもグローバルで高い評価を受けているERPでありながら、その強みや設計思想は大きく異なります。 そのため、「どちらを選ぶべきか分からない」「自社に合うのはどちらなのか判断できない」といった悩みを抱える企業も少なくありません。 この記事では、そんなIFS CloudとSAPを「製造業」という視点から徹底比較し、それぞれの特徴や強み、導入時のポイントを分かりやすく解説します。 製造業の方 IFS CloudとSAPに興味がある方 グローバルERPの導入を検討している方 これらに当てはまる方におすすめの記事となっています。これを読めばIFS CloudとSAPの違いがわかるだけでなく、「どのような企業にどちらが適しているのか」がわかりますよ。 (more…)