1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

アプリ開発に使えるUIフレームワーク(Onsen UI/Framework7/Ionic)

Last updated at Posted at 2022-05-19

はじめに

この記事の対象になる方はアプリ開発未経験~初学者より少し強い人です。
以下当てはまらない方には易しい内容となる可能性が高いです。

  • モバイルアプリ開発を始めようとしている
  • Web言語が書けるので、なにか活かしてみたい
  • 最近アプリ開発を始めたが、新しく何か使えるようになりたい
  • 非ゲームアプリを開発する時に使える便利グッズを探している

今回は特に、”開発時に使えるフレームワーク”に焦点を当ててみようかなとおもいます。
ご興味ある方は是非お読みいただければと思います~。

フレームワークを使う理由

「フレームワークなんか使わずに、自分で好きなようにデザインすればええやんか!」と思う方向けではありません。
フレームワークを使う理由は大体以下のようになります。

  • 強いこだわりはないが、綺麗に作りたい
  • UIを考える/作る時間を他の工数に充てたい
  • デザイン力がない。誰か代わりに考えて欲しい
  • アプリ化する際に、アイデアをすぐ世に放出したい
  • ネイティブアプリ風のUIを簡単に実装する事ができる

まぁざっくりとこんなところでしょうか。
特に小規模開発の場合はフレームワークを活用する恩恵を大いに感じると思います。

また、UIフレームワークを使うと全てのアプリが同じ見た目になってしまうのではないかと懸念されるかもしれませんが、アプリの一部だけに組み込むことも可能であり、こだわりたい部分は自前で構築すればよいのです。

モバイルアプリ開発におすすめのフレームワーク

クロスプラットフォーム用に使えるものは他のQiitaやブログなどでも多く取り扱われていますので、
今回はFlutterやReact Nativeなどのフレームワークではなく、UIフレームワークというものを紹介していきます。

Onsen UI

Webアプリ上で iOS や Android のネイティブUIと同等の UX を実現するためのオープンソースのUIフレームワークです。ボタンやリストなど、様々なUIコンポーネントが揃っており、Web言語の基礎知識があれば利用は難しくありません。
また、ハイブリッドアプリ開発に使えるため、iOS/Androidアプリ開発のコードを共通化する事が出来ます。

Onsen UIの特徴

  • 日本語のリファレンスが豊富に揃っており、とても学びやすい
  • Monaca上に用意されているため、試しに使ってみるくらいの気持ちで動かすことが出来る
  • デザイン知識が少なくても綺麗なUIを作ることが出来る
  • 1ソースで開発出来るため、ネイティブ開発に比べて工数が劇的に下がる
  • 開発言語が比較的易しいため、リリース後の保守なども安心できる

海外で人気のUIフレームワークを勉強してみるのも良いですが、
個人的に最初は日本語でしっかりと学んでからでも良いと思います。
ちなみに、monacaを使って実際にOnsenUIの扱いを解説している動画もあります。

Framework7

Framework7も日本語のサイトが用意されているオープンソースのUIフレームワークです。ハイブリッドアプリ開発に使えて、1つのコードでiOS/Androidアプリを開発する際に役立ちます。アコーディオンやスワイプ、ポップアップなども用意されており、アプリに組み込める機能はかなり充実している印象です。アップデートも頻繁に行われているため、最近ではVue.jsなども使う事が出来ます。

Framework7の特徴

  • Monacaにテンプレートが追加されたため、Onsen UI同様に簡単に導入できる
  • リファレンスがかなり豊富なため、学習に困らない
  • 自由度が高いため柔軟に開発が出来るが、その分エラーの解消等は少し大変
  • 1ソースで開発出来るため、ネイティブ開発に比べて工数が劇的に下がる

Ionic

Ionic FrameworkはオープンソースのUIフレームワークで、こちらも同様にWeb技術を使っての開発が可能です。上記に比べても最初に登場したこともあり、コミュニティが広いため情報が見つけやすいです。OnsenUIに比べるとやや日本語のドキュメントは少なく感じるかもしれませんが、情報量という面でとても優れています。

Ionicの特徴

  • 情報量が多く、エラーの解消がしやすい
  • コミュニティが広く、検索しやすい
  • 書籍も出版されていたり、学習の敷居が低い
  • 1ソースで開発出来るため、ネイティブ開発に比べて工数が劇的に下がる

おわりに

簡単になりましたが、今回は3つのフレームワークを紹介しました。
本記事で取り上げたフレームワークであれば、いずれもアプリ開発の役に立つ事は間違いありませんので、ご自身の肌にあったものを学習してみることをお勧めいたします。

ちなみに、アプリを作る際にはニフクラ mobile backend というサービスを使うと更に開発コストが下がるのですが、、後日改めてご紹介できればと思います。

記事の内容で間違っている部分などのご指摘も大歓迎ですので、一緒にアプリ開発について学んでいけたらと思っています。

ではまた!

1
0
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
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?