【GIG勉強会Vol.18】「Nuxt.jsを使ったPWAへの対応アプリ開発」とデザインプロトタイピングツール「Figma」の活用事例

こんにちは！インターンのキシリトールです。厳しい暑さが続くなか、GIGブログ読者のみなさまはいかがお過ごしでしょうか。さて、今回は第18回社内勉強会として行われたLT（ライトニングトーク）の様子をご紹介します！

前半のテーマは「Nuxt.jsを使ったPWA対応アプリの開発」について

まず登壇してくれたのは、フロントエンドエンジニアの†黒神†（こくしん）こと、石黒雄介さん。Nuxt.jsを使ったPWA対応アプリの開発方法について詳しく解説してくれました。

石黒 雄介（いしぐろ ゆうすけ）：フロントエンドエンジニア。Web系の専門学校を卒業後、地元・名古屋のWeb制作会社に新卒で入社。約4年間、マークアップエンジニアとして従事し、小規模なものから大規模なものまで数多くの案件に携わる。2018年4月に上京し、フロントエンドエンジニアとしてGIGにジョイン。

Nuxt.jsとはVue.jsを拡張したフレームワーク

Nuxt.jsとは、各種ライブラリをはじめ、多くの機能が最初から組み込まれたフレームワークです。
Nuxt.js公式サイト

石黒：「Nuxt.jsとはVue.jsをさらに拡張させたフレームワークです」

石黒：「環境構築の手間を省いて開発に着手できるというメリットがあります」

石黒：「Nuxt.jsは、動的ルーティングや静的ファイル生成にも対応しています。そのため、Webページ制作にも十分に使えるフレームワークとして期待されています」

PWAとは、ネイティブアプリのようなWebページを提供するための技術

PWAとは、Progressive Web Appsの略です。Googleが推奨している仕組みで、モバイル端末上のWEBページでネイティブアプリのようなUXを提供するために開発された技術です。

石黒：「Webサイトをホーム画面に追加することで、ネットワークを切断していてもアプリとして使えるようになります」

PWAのメリット／デメリットは以下の通りです。

【メリット】

• プッシュ通知やスプラッシュスクリーンなど、ネイティブアプリに近い体験を提供できる
• ストアを経由する必要がないので、導入コストを抑えられる。
• オフラインでもアプリとして使用できる。

【デメリット】

• iOSへの対応が遅れており、iOSではPWAの一部の機能しか扱えない。

Nuxt.jsを使ってPWAを実装する

Nuxt.jsを使ったPWAを実装する手順は以下です。

1. 「vue-cli」というCLIツールを利用し、nuxt.jsの開発テンプレートをダウンロードする。
2. PWAを実行させるためのモジュール 「@nuxtjs/pwa」 を、開発テンプレートにインストールする。
3. 設定ファイル 「nuxt.config.js」 に先程インストールしたpwaモジュールを読み込むための設定を追記する。
4. 設定ファイル 「nuxt.config.js」 にmanifest（アプリの情報を記述したもの）を追記する。
5. ホームアイコン用の画像を 「static/icon.png」 として配置する。

石黒：「このような簡単な手順だけで、Nuxt.jsを使ったPWAの開発環境を整えられます」

石黒：「PWAの実装を前提としたWebアプリ/サイト開発を行うのであれば、プロジェクトの初期段階からNuxt.jsを採用すると良いでしょう」

質疑応答

Q：Nuxt.jsはどのくらいの期間に渡って現場で使われそうですか？

石黒：「React.jsなどと同様にイマドキなJSフレームワークですが、流れの速いフロントエンド界隈でも最低1年は使われることを祈っています」

後半のテーマは「Figma」について

次に登壇したのは、ちゃっきーこと高原里沙さん。

複数人で同時にWebページのデザインができるデザインプロトタイピングツール「Figma」を、実際の活用事例を踏まえて解説してくれました。

高原里沙（ちゃっきー）：デザイナー。大学在学中インターンにてフロントエンドとデザインを学びWeb制作会社に入社。その後フィリピンでのインターンに参加し、Web開発とブリッジSEを担当。帰国後フリーランスを経てGIG入社。

プロトタイピングツールについて

まず、プロトタイピングツールについて解説してくれました。

高原：「プロトタイピングツールはトランジション型、インタラクション型、2つの複合型の3つに分けられます」

トランジション型はアプリの画面遷移のみが表示されますが、インタラクション型では遷移時のアニメーションまで表示されるという違いがあります。

高原：「今回解説するFigmaはトランジション型です」

Figmaのメリット／デメリット

高原さんは実際の導入事例を踏まえてFigmaのメリット／デメリットについて解説してくれました。

【メリット】

• 同時編集ができる
• Webブラウザで閲覧／編集できるため、OSに依存しない
• 未経験でも簡単にストレスなく使える。
• アプリのデザインからプロトタイプ制作までなんでもこなせる。
• アカウントがあれば全画面にコメントできる。
• Sketchからドラック＆ドロップでコピーできる。

【デメリット】

• How to 記事が少ない（公式サポートは充実している）
• PDFでの出力ができない（現在、公式が改善対応中）
• プラグインがないので、総合的な拡張性はSketchに劣る
• FigmaからSketchへはコピーできない。
• コメントの種類が解決済みと未解決の2つしかない
• Adobe製品との互換がない
• 日本語入力に細かなバグがある

実際にFigmaを使ってみる

最後に参加者全員でFigmaを使ってみました。

Figma上のコメント機能を使って質問のやり取りをするなど、直感的にFigmaの使い方を理解する場となりました。

高原：「このように、全ページの一覧表示が可能なので俯瞰して見やすいのがFigmaの長所です」

勉強会後は毎度恒例、ピザパーティー！

勉強会が終わると、みなさんお待ちかねのピザパーティー！ 各々お好きなお酒やソフトドリンクを持ち、乾杯です！

実は僕はパーティーには参加できなかったのですが、写真からも楽しそうな雰囲気が伝わってきて少し羨ましいです。
（写真は弊社社員のじきるが撮影しました）

GIGでは、一緒に働く仲間を募集しています

現在GIGでは「一緒に学びながら成長していきたい！」と意欲のある仲間を募集しています。

話を聞いてみたい方はお気軽にどうぞ！