BLOG

JSでスプレッドシートからデータを取得し、動的要素を作成しよう!

更新日:2022/11/30

JSでスプレッドシートからデータを取得し、動的要素を作成しよう!
担当していた案件でJSでスプレッドシートからデータを取得し、動的要素を作成することになりました。
しかし、調べてみると意外にその方法を一から詳しく紹介している記事が見つかりませんでした。
そこで今回はJSでスプレッドシートからデータを取得し、動的要素を作成する方法について一から詳しく紹介します。

静的コーディング

ということで今回はJSでスプレッドシートからデータを取得し、動的要素を作成するのですが、
スプレッドシートからデータ取得する前に、まずは静的コーディングを行います。

ということでHTMLは下記のように作りました。

ここからCSSでいい感じにスタイルを整えます。

静的コーディング後の状態

整いました。

今は商品の画像等は設定せず、同じ中身を繰り返しているだけなのでイメージが掴みづらいですがデータが入ればいい感じになるでしょう。

300×200のところには商品の画像、ドットの部分には商品のカラーバリエーション一覧、そして商品名、商品価格それぞれが動的部分になります

それではここから本題のJSを使用してスプレッドシートからデータを取得し、表示する部分を作っていきましょう。

スプレッドシートの作成

まず、スプレッドシートでデータ一覧を作成しましょう。

下記のようになりました。

作成したスプレッドシート

A列ではメインとなる画像、B列では商品名、C列では価格、D列以降はカラーバリエーションの画像を設定しています。
なお、今回使用する画像はGoogle Driveにアップしたものを使用します。

続いて、このスプレッドシートに入力したデータをAPIとして公開します。

APIの公開

画像のように「拡張機能」のタブから「Apps Script」を選択し、新しいスクリプトを作成します。
すると、コードエディタが開きますのでそこに下記のコードをコピペしてください。

4行目では読み取る対象となるシート、5行目では読み取るセルの範囲を指定しています。
なお、読み取るセルの範囲の指定をするときは上記のコードの5行目のように、始まりのセル(左上のセル)と終わりのセル(右下のセル)でコロン(:)を挟むように指定してください。

8行目から23行目でスプレッドシートの行を1行ごとに回し処理しています。
data_rowにはその行の全ての値が配列で設定されています
例えば、data_row[0]だと、作成したスプレッドシートではA列を意味しています。

13行目から15行目ではカラーバリエーション(スプレッドシートのD列以降)の値をcolorsという配列に入れ
17行目から22行目でキーとキーに応じたセルを設定した配列オブジェクトを作成しています。

これでJSONを出力するコードができました。
「プロジェクトの保存」を行い、画像のように初めに実行される関数を指定します。

初めに実行される関数の指定

そして、デプロイボタンから「新しいデプロイ」を選択してください。
種類の選択より「ウェブアプリ」を選択し、アクセスできるユーザーには「全員」を設定してください。
アクセスできるユーザーを「全員」に設定しないとAPIにアクセスできず、JSでデータを取得することができません

作成を押し少し待つとアクセスの承認画面が表示されるかと思いますので承認を行ってください。

承認が完了するとウェブアプリのURLが生成されたかと思います。
一旦、正しくJSONが出力されているかを確認するためにリンク先に飛んでみましょう。

下記のようにJSON形式のデータが出力されていればAPIの作成は完了です。

公開されたAPI

APIを取得

続いて、JSでJSONを取得し、HTMLに出力する部分です。
まず、先ほどの公開したAPIからJSONを取得します

スプレッドシートから取得したデータはスプレッドシートで入力した内容1行ごとからなる多次元配列になっています。
そのため、HTML要素に出力する際にはfor()等のループを使用して中身を取り出す必要があります。
正しくデータが取得できているかを確認するため、コンソールに商品名を出力してみましょう。

2行目には「Apps Script」で作成したウェブアプリのURLを指定してください。

こちらのコードを簡単に説明すると、
6行目でJSONデータを取得し、9行目から11行目でスプレッドシートに入力した行数回処理が回るようになっています

コンソールログ

画像のようにスプレッドシートに入力した内容が表示されていたら正しくデータが取得できています。

ここまできたらあとは最初の静的コーディングしたHTMLに出力すれば完成です。
ただ、最初に書いたHTMLコードは確認用にli要素を複数作っていましたが、JSのほうで商品の数だけ複製するのでli要素はベースとなる1つだけで十分です。

また、ベースとなるli要素はフロントでは表示する必要はないため「js-based」というクラスを指定し、CSSでそのクラスには「display: none;」を指定しておきます。
なお、カラーバリエーションの要素にも「js-based」というクラスを指定し、色の数に応じて要素を増減できるようにしています。

最終的なHTMLコードがこちらです。

そして、下記のJSコードで取得したデータをこのHTMLに出力していきます!

2行目には先ほど同様、「Apps Script」で作成したウェブアプリのURLを指定してください。

こちらのコードを簡単に説明すると、
12行目でベースとなるli要素を指定し、13行目で複製、14行目で複製したli要素から「js-based」というクラスを外しています

16行目から18行目でメイン画像と商品名を設定し、20行目から21行目で取得した価格を3桁区切りの日本円にしたうえで出力しています。

23行目から34行目では配列にした「colors」を回し、存在する色の数だけ複製しています。

そして、取得したデータを設定したら、最後に複製した要素を36行目でliの末尾に追加します。

では、実際に動いているか確認してみましょう。

出力結果

スプレッドシートで入力した通りに出力されていますね!
ということでこれで完成です。

jQueryを使用したコードも併せて載せておきます。

まとめ

ということで今回はJSを使用してJSでスプレッドシートからデータを取得し、動的要素を作成する方法を紹介しました。
いかがだったでしょうか。

配列の扱いが分かれば、内容的にはそこまで難しいという内容ではないかと思います。
JSでスプレッドシートからデータを取得し、動的要素を作成することがあれば参考にしてもらえたら幸いです。

以上、最後までご覧いただきありがとうございました。

FOLLOW US