質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.53%
Google カレンダー

Google カレンダーは、Google社が提供する無料のスケジュール管理ツールです。パソコンやスマートフォン、タブレットなどからアクセスし、スケジュールの追加・変更が可能。Googleアカウントがあれば誰でも使用できます。

Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

1回答

3588閲覧

Reactで外部のjsファイルを読み込めない

Tajika

総合スコア0

Google カレンダー

Google カレンダーは、Google社が提供する無料のスケジュール管理ツールです。パソコンやスマートフォン、タブレットなどからアクセスし、スケジュールの追加・変更が可能。Googleアカウントがあれば誰でも使用できます。

Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2022/07/11 09:09

やりたいこと

ReactでGoogle Calender APIを実装しようとしています。
こちらのサイトを参考にしました。
JavaScriptでGoogle Calendar APIを実装する方法を現役エンジニアが解説【初心者向け】 | TechAcademyマガジン
このサイトと同じように、画面に日本の祝日一覧をテキストで表示させたいです。

App.js

1import { Component } from 'react'; 2import * as React from 'react'; 3 4import './App.css'; 5 6require('https://apis.google.com/js/api.js') 7 8function App() { 9 10 const API_KEY = '/*自分のAPIキー*/' 11 const CALENDAR_ID = 'ja.japanese#holiday@group.v.calendar.google.com'; 12 13 function start() { 14 gapi.client.init({ 15 'apiKey': API_KEY, 16 }).then(function() { 17 return gapi.client.request({ 18 'path': 'https://www.googleapis.com/calendar/v3/calendars/' + encodeURIComponent(CALENDAR_ID) + '/events' 19 }) 20 }).then(function(response) { 21 let resultArea = document.getElementById('resultArea'); 22 let items = response.result.items; 23 for(let i = 0; i < items.length; i++){ 24 resultArea.insertAdjacentHTML('beforeend', items[i].summary + items[i].start.date + '<br>'); 25 } 26 }, function(reason) { 27 console.log('Error: ' + reason.result.error.message); 28 }); 29 }; 30 31 gapi.load('client', start); 32 33 34 35 return ( 36 <div className="App"> 37 {<button onClick={() => gapi.load('client', start)}>Events</button> } 38 </div> 39 ); 40} 41 42export 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

1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5 <meta charset="utf-8" /> 6 <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> 7 <meta name="viewport" content="width=device-width, initial-scale=1" /> 8 <meta name="theme-color" content="#000000" /> 9 <meta name="description" content="Web site created using create-react-app" /> 10 <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> 11 12 <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> 13 14 <title>React App</title> 15 16</head> 17 18<body> 19 <noscript>You need to enable JavaScript to run this app.</noscript> 20 <div id="root"></div> 21 22</body> 23 24<script src="https://apis.google.com/js/api.js"></script> 25</html>

プログラミング初心者です。至らないところが多々あると思いますが、お答えいただけると幸いです。よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

下記のような記事

を参考にしながら、以下のモジュールを使うとよいのではないかと思います。

投稿2022/07/11 11:59

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Tajika

2022/07/12 02:38

追記です。 上記の、GETの後に書かれてあるのURLでは、このようなテキストが表示されました。 { "error": { "errors": [ { "domain": "global", "reason": "notFound", "message": "Not Found" } ], "code": 404, "message": "Not Found" } }
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.53%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問