cookie認証がconsole.logに反映されない

前提

JavaScriptの入門書でプライバシーポリシー認証パネルを勉強しています。

実現したいこと

「認証する」ボタンが押されるとクッキーを保存し、「テスト用　cookie削除」ボタンが押されるとクッキーを削除するようにしたいです。

発生している問題・エラーメッセージ

Refused to apply style from 'http://localhost:4245/_common/css/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Failed to load resource: the server responded with a status of 404 (Not Found)

Uncaught ReferenceError: Cookies is not defined
    at (index):44:15

Failed to load resource: the server responded with a status of 404 (Not Found)
localhost/:1 

Refused to apply style from 'http://localhost:4245/_common/css/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

画像バージョン

該当のソースコード

自分が書いたコード

HTML
1<!doctype html>
2<html>
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width,initial-scale=1">
6<title>テンプレート</title>
7<link href="../../_common/images/favicon.ico" rel="shortcut icon">
8<link href="https://fonts.googleapis.com/css?family=M+PLUS+1p:400,500" rel="stylesheet">
9<link href="../../_common/css/style.css" rel="stylesheet">
10<link rel="stylesheet" href="panel.css">
11</head>
12<body>
13<header>
14<div class="container">
15<h1>タイトル</h1>
16<h2>サブタイトル</h2>
17</div><!-- /.container -->
18</header>
19<main>
20<div class="container">
21<section>
22
23
24<p><button id="testbtn">テスト用　cookie削除</button></p>
25
26</section>
27</div><!-- /.container -->
28</main>
29<footer>
30<div class="container">
31<p>JavaScript Samples</p>
32</div><!-- /.container -->
33</footer>
34
35<div id="privacy-panel">
36<p>当サイトではユーザーエクスペリエンス向上のためクッキーを使用しています。</p>
37<button id="agreebtn">承認する</button>
38</div>
39
40<script src="../../_common/scripts/js.cookie.js"></script>
41
42<script>
43'use strict';
44const agree = Cookies.get('cookie-agree');
45// const panel = document.getElementById('privacy-panel');
46
47if(agree === 'yes') {
48    console.log('クッキーを確認しました');
49} else {
50    console.log('クッキーを確認できません');
51    document.getElementById('agreebtn').onclick = function() {
52        Cookies.set('cookie-agree', 'yes', {expires: 7});
53    };
54}
55
56//MEMO
57// Cookies.set('key', 'value');
58// 14日後に消える
59// Cookies.set('key', 'value', {expires: 14}); 
60// ユーザーの使用言語を日本語に指定
61// Cookies.set('locale', 'ja-JP'); 
62
63
64//クッキー削除
65document.getElementById('testbtn').onclick = function() {
66    Cookies.remove('cookie-agree');
67};
68
69</script>
70
71
72</body>
73</html>
74

お手本

HTML
1<!doctype html>
2<html>
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width,initial-scale=1">
6<title>5-03_cookie</title>
7<link href="../../_common/images/favicon.ico" rel="shortcut icon">
8<link href="https://fonts.googleapis.com/css?family=M+PLUS+1p:400,500" rel="stylesheet">
9<link href="../../_common/css/style.css" rel="stylesheet">
10<link href="panel.css" rel="stylesheet">
11</head>
12<body>
13<header>
14<div class="container">
15<h1>プライバシーポリシー承認パネルを作る</h1>
16<h2>クッキーの読み・書き・削除</h2>
17</div><!-- /.container -->
18</header>
19<main>
20<div class="container">
21<section>
22    <p><button id="testbtn">テスト用 cookie削除</button></p>
23</section>
24</div><!-- /.container -->
25</main>
26<footer>
27<div class="container">
28<p>JavaScript Samples</p>
29</div><!-- /.container -->
30</footer>
31
32<div id="privacy-panel">
33    <p>当サイトではユーザーエクスペリエンス向上のためクッキーを使用しています。また、匿名でアクセス状況のデータを収集しています。詳しい情報は当サイトのプライバシーポリシーをご覧ください。</p>
34    <button id="agreebtn">承認する</button>
35</div>
36
37<script src="../../_common/scripts/js.cookie.js"></script>
38<script>
39'use strict';
40
41const agree = Cookies.get('cookie-agree');
42if(agree === 'yes') {
43    console.log('クッキーを確認しました');
44} else {
45    console.log('クッキーを確認できません');
46    document.getElementById('agreebtn').onclick = function() {
47        Cookies.set('cookie-agree', 'yes', {expires: 7});
48    };
49}
50
51// クッキー削除（テスト用）
52document.getElementById('testbtn').onclick = function() {
53    Cookies.remove('cookie-agree');
54};
55</script>
56</body>
57</html>

試したこと

vscodeの比較機能でチェックしましたが、文字列・空白以外の違いはありませんでした。

補足情報（FW/ツールのバージョンなど）

本の案内通り、served.exeを使用しています。

行動規範の内容に同意します

回答1件

ベストアンサー

エラーの原因

js-cookieというAPIを使用しないといけないのに、必要なファイルを読み込んでいない。

一時的な解決案

コード全体の40行目付近にある記述を変更すると、必要なファイルが読み込まれ動作します。
これはCDNを利用していますのであまりおすすめの手法ではありませんが、練習程度ならいいと思います。

diff
1- <script src="../../_common/scripts/js.cookie.js"></script>
2+ <script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.1/dist/js.cookie.min.js"></script>

ちゃんとした解決方法

手元にjs.cookie.jsまたはjs.cookie.min.jsのデータをお持ちでしたら、そのデータを読み込むようにしてください。
js-cookieはnpmコマンド等でも導入できますが、npmつかったことなければ難しいと思うので説明を割愛します。

その本にはjs-cookieの説明はありませんでしたか？
Cookies.get()などはJavaScript標準の記法ではないため、使用するためにはjs-cookieを読み込む必要があります。
なので、事前に説明があるはず…！

投稿2022/09/26 23:39

編集2022/09/26 23:57

Cocode

総合スコア2316

Iori

2022/09/27 00:16 編集

ありがとうございます。Cocodeさんの貴重なアドバイスとこちらの記事（https://qiita.com/baby-0105/items/0356b0af4ab4585d86c4）を参考にscript.jsとpanel.cssの記述をそれぞれ<link href="./panel.css" rel="stylesheet">と<script src="./js.cookie.js"></script>に変更するとエラーがなくなりました！