17
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【GAS+Vue.js】シンプルなWebページを作る

Last updated at Posted at 2025-06-04

はじめに

はじめまして、新卒エンジニアのSouと申します。Qiita初投稿です。
GASをキャッチアップする機会があり、アウトプットとしてシンプルなウェブページを作ってみました!

作ったもの

最近飲んでおいしかったもの

業務の休憩中、通勤中に飲んだ、おいしかった飲み物を紹介するWebページです!

トップページ

スクリーンショット 2025-06-04 130949.png

各項目の見出しにはタイトル、簡単な説明が記載できます。写真なので分かりにくいですが、ホバー時のアニメーションもあり、クリックすると商品のWebページに遷移します。
Bootstrapを使用し、シンプルなデザインで作成することができました!

データベース

スクリーンショット 2025-06-04 131954.png
今回はGASのみで開発することを目指したため、データベースはGoogleスプレッドシートで管理しました。スプレッドシートを更新すると自動でWebページにも項目が増えていきます!

使用技術

  • GAS (Google Apps Script)
  • Vue.js
  • Bootstrap

参考にしたリンク

【0からGASを学ぶ】GASでWebアプリケーションを作ってみよう
GASとJavaScriptフレームワークVue.jsを使ってWebアプリを作成するための最初の一歩

おわりに

GASだけでWebページが作れるのは驚きでした。
デプロイがとても簡単だったのも良いポイントだと思います。
Vue特有のディレクティブに触れたのも良い経験になりました。
(初めて技術記事書いたけどこんなのでよいのか、、?)

17
7
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
17
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?