やりたいこと
ReactでGoogle Calender APIを実装しようとしています。
こちらのサイトを参考にしました。
JavaScriptでGoogle Calendar APIを実装する方法を現役エンジニアが解説【初心者向け】 | TechAcademyマガジン
このサイトと同じように、画面に日本の祝日一覧をテキストで表示させたいです。
App.js
import { Component } from 'react'; import * as React from 'react'; import './App.css'; require('https://apis.google.com/js/api.js') function App() { const API_KEY = '/*自分のAPIキー*/' const CALENDAR_ID = 'ja.japanese#holiday@group.v.calendar.google.com'; function start() { gapi.client.init({ 'apiKey': API_KEY, }).then(function() { return gapi.client.request({ 'path': 'https://www.googleapis.com/calendar/v3/calendars/' + encodeURIComponent(CALENDAR_ID) + '/events' }) }).then(function(response) { let resultArea = document.getElementById('resultArea'); let items = response.result.items; for(let i = 0; i < items.length; i++){ resultArea.insertAdjacentHTML('beforeend', items[i].summary + items[i].start.date + '<br>'); } }, function(reason) { console.log('Error: ' + reason.result.error.message); }); }; gapi.load('client', start); return ( <div className="App"> {<button onClick={() => gapi.load('client', start)}>Events</button> } </div> ); } export default App;
困っていること
https://apis.google.com/js/api.js を読み込む必要があるのですが、うまく読み込めていないせいか
'gapi' is not defined
というエラーが出ます。
試したこと
React 外部ライブラリ読み込み方法 - Qiita
上のコードの通り、require('https://apis.google.com/js/api.js') を追加してみましたが、変わりませんでした。
Reactで、<script>でインポートするタイプのスクリプトをJSX内部で使う方法
こちらにある通り、public/index.html内に<script src="https://apis.google.com/js/api.js"></script>を記述しましたが、変わりませんでした。
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="theme-color" content="#000000" /> <meta name="description" content="Web site created using create-react-app" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <title>React App</title> </head> <body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"></div> </body> <script src="https://apis.google.com/js/api.js"></script> </html>
プログラミング初心者です。至らないところが多々あると思いますが、お答えいただけると幸いです。よろしくお願いします。
0 コメント