PWAとは?プログレッシブウェブアプリに必要なプログラミング言語は?

pwa

Web界隈の人であれば、「PWA」という言葉を耳にしたことがある人もいるかもしれません。

これはGoogleによって2015年にリリースされた技術で、新たなWebの可能性を秘めている技術 (に、なるかもしれない)と言われています。

2015年リリースと言ってもまだまだ周知されていない技術ではあるので、今回は PWAとは?という点から掘り下げて紹介していきます。

対象読者はこのような感じです。

  • PWAってなに?
  • PWAに必要なプログラミング言語は?
  • PWAのサンプルを見てみたい

それではさっそく見ていきましょう!

PWAとは?

Progressive Web Appsの略称でPWA。

これはGoogleが開発したモバイルユーザー向けの技術です。

簡単に言うと、モバイル版のWebサイトでネイティブアプリのようなUXを提供するというものです。

ネイティブアプリというのは、iOSアプリであったりAndroidアプリのことですね。

通常、スマホユーザーがなにかアプリを利用したいとなるとストアからダウンロード→インストール→利用という手順を踏みますが、PWAはWebサイトにアクセスするだけでまるでスマホアプリのような体験ができます。

 

例えば、国内では不動産仲介の大手であるSUUMO(スーモ)さんがPWAを提供しています。

不動産検索アプリのように使えて、プッシュ通知も可能です。

引用:リクルートのSUUMO、Androidスマートフォン用サイトでプッシュ通知できる機能を実装

アプリっぽいUIだけではなく、例えば

  • カメラを起動する
  • 位置情報を取得する
  • プッシュ通知を送る

など、およそモバイルサイトとは思えないような機能を実装できるのもPWAの魅力だと思います。

しかし、まだまだ道のりは長いようで簡単なメディアアプリくらいなら問題ありませんが、例えばTwitterやインスタグラムライクなアプリを再現するまでには至ってないようです。

PWAに必要なプログラミング言語は?

まだまだ課題は多いようですが、ネイティブアプリライクなものをスマホサイトで実装できるとなると夢がありますよね。

特にWebデザイナーの人にはPWAを使ってアプリ(のようなサイト)を開発できるとなると興味が湧いてきますよね。

Googleは公式サイトでチュートリアルを公開しています。

はじめてのプログレッシブウェブアプリ

PWAに始めるにあたって必要となるプログラミング知識は

  • HTML
  • CSS
  • JavaScript

この3つになります。どれもフロントエンドではよく使われる知識なので学習コストは少なく済みそうですね。

また、プログラミング初心者の人でもさほど難しくないプログラミング言語なので0ベースでネイティブアプリを作るよりも障壁は少ないでしょう。

PWAのサンプル、開発例

PWAを勉強するとこういったPWAが開発できるというサンプルを紹介しているおすすめのサイトを最後に紹介します。

https://pwa.rocks/

こちらのサイトではPWAの実例がカテゴリごとにまとめられています。

個人的におすすめなのが、flappy bird。

ベトナム人の方が開発したアプリで中毒性があると話題になったネイティブアプリですね。

パソコンでアクセスしても閲覧できますが、ぜひスマホからアクセスしてPWAの操作感などを体験してみてください。



カテゴリー