JavaScriptでスマホアプリを作る7つ方法

Posted at 2020-09-05

・ヮ・）あ、おはようございまーす

JavaScript でスマートフォンアプリを作る方法を調べる機会があったのでまとめました！

細かいアーキテクチャに関しては割愛します

ネイティブアプリ

React でネイティブアプリを開発できるフレームワーク
JavaScript でアプリ開発といえばこれですね！

Expo という React Native での開発をサポートするプラットホームを使うと
ネイティブ機能を使うためのプラグインに制限がかかりますが
簡単に実機で確認したりAppleの審査なしにアプリをアップデートできるらしいです

Vue記法で書ける React Native です

ビルドするときに .vue ファイルを React に変換するプラグインのようなもので
実質 React Native といっても過言ではないです

Vue Native と React Native のコードを混在させたり
React Native 用のライブラリを使うこともできます

Angular、Vue、JavaScript(TypeScript) でネイティブアプリを開発できるフレームワークです

Svelte Native というプラグインで Svelte で開発することもできるみたいです

Vue でネイティブアプリを開発できるフレームワークです

UIコンポーネントが若干HTMLライクなのが特徴
他のフレームワークと比べてプラグインが少ない印象

ハイブリッドアプリ(WebViewアプリ)と呼ばれるもので
WebView(簡易ブラウザのようなもの)を使い、アプリ内外に仕込ませたWEBページを表示するものです
HTML、CSS、JavaScript といったWEB開発と同じ技術で開発できます

Android と iOS で全く同じUIを作れるのも特徴です

WebView ではカメラなどの JavaScript の API は使用できず専用のプラグインを使う必要があります
しかし、ネイティブ機能へアクセスするためのプラグインが古くなっている印象があります

ionic や Monaca 、PhoneGap といった開発プラットホームを使うことが一般的なようです

Cordova よりスマートにネイティブのコードを実行できるらしいです
Cordova のプラグインに加え、自分で書いたネイティブのコードを簡単に使うこともできます

ionic という開発プラットホームを使うことが一般的なようです

番外になりますが PWA も紹介しておきます

PWA はWebブラウザから直接インストールできるアプリケーションです
通常のWEB開発と同じで HTML、CSS、JavaScript で開発します

Qiitaのこのページを「ホーム画面」に追加してみると PWA を体験できます

ネイティブアプリと PWA の比較はこちらが参考になります

ネイティブ特有のリッチなUIや速度を求めるならネイティブアプリ

HTML、CSS、JavaScript のWEB開発技術を使いたいなら WebViewアプリ or PWA