LoginSignup
28
27

More than 3 years have passed since last update.

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

Posted at

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

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

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

ネイティブアプリ

1. React Native 89.9k

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

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

Playground(expo)

2 Vue Native 7.4k

Vue記法で書ける React Native です

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

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

3 NativeScript 19k

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

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

Playground

4 Weex 13.8k

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

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

Playground

WebViewアプリ

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

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

5. Cordova

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

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

6. Capacitor

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

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

7. PWA

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

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

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

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

まとめ

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

  • React Native が圧倒的人気
  • Vueが好きな方は、何かあったら安心の React Native へすぐシフトできる Vue Native が良さそう
  • Angular、Svelteで開発したいなら NativeScript

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

  • Webアプリケーションとスマホアプリ同時に作りたいなら PWA
  • PWAでは足りないネイティブ機能を使いたいなら WebViewアプリ
28
27
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
28
27