Go to Qiita Advent Calendar 2024 Top
LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@Shun_PinJISOU | 経験者専門プログラミングコーチング

【JavaScript】オンラインIDEで動くコードがローカルのIDEだと動かない

Last updated at Posted at 2024-05-17

はじめに

Udemyの【最新ver対応済】モダンJavaScriptの基礎から始める挫折しないためのReact入門 を受講しながら、JacaScriptの基本を学んでいます。セクション5、「素のJavaScriptだけでToDoアプリを作成してみよう」で詰まってしまったことがあるのでそのエラーについて投稿します。

作ろうとしているもの

入力欄にテキストを入力すると未完了のTODOとして表示され、完了を押すと完了したTODOとなる画面

スクリーンショット 2024-05-17 17.17.58.png

コード

Udemyの講座の課題のコード
index.html
<!DOCTYPE html>
<html>
  <head>
    <title>TODO(JS)</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div class="input-area">
      <input id="add-text" placeholder="TODOを入力" />
      <button id="add-button">追加</button>
    </div>
    <div class="incomplete-area">
      <p class="title">未完了のTODO</p>
      <ul id="incomplete-list">
        <!-- <li>
          <div class="list-row">
            <p class="todo-item">TODOです</p>
            <button>完了</button>
            <button>削除</button>
          </div>
        </li>
        <li>
          <div class="list-row">
            <p class="todo-item">TODOです</p>
            <button>完了</button>
            <button>削除</button>
          </div>
        </li> -->
      </ul>
    </div>
    <div class="complete-area">
      <p class="title">完了したTODO</p>
      <ul id="complete-list">
        <!-- <li>
          <div class="list-row">
            <p class="todo-item">TODOでした</p>
            <button>戻す</button>
          </div>
        </li> -->
      </ul>
    </div>
    <script src="src/index.js"></script>
  </body>
</html>
index.js
import "./styles.css";

const onClickAdd = () => {
  // テキストボックスの値を取得し、初期化する
  const inputText = document.getElementById("add-text").value;
  document.getElementById("add-text").value = "";

  // 未完了リストに追加
  createIncompleteTodo(inputText);
};

// 渡された引数を基に未完了のTODOを作成する関数
const createIncompleteTodo = (todo) => {
  // li生成
  const li = document.createElement("li");

  // div生成
  const div = document.createElement("div");
  div.className = "list-row";

  // p生成
  const p = document.createElement("p");
  p.className = "todo-item";
  p.innerText = todo;

  // button(完了)タグ生成
  const completeButton = document.createElement("button");
  completeButton.innerText = "完了";
  completeButton.addEventListener("click", () => {
    // 押された削除ボタンの親にあるliタグ配下の完了ボタンと削除ボタンを削除
    const moveTarget = completeButton.closest("li");
    completeButton.nextElementSibling.remove();
    completeButton.remove();
    // 戻すボタンを生成してdivタグ配下に設定
    const backButton = document.createElement("button");
    backButton.innerText = "戻す";
    backButton.addEventListener("click", () => {
      // TODOの内容を取得し、未完了リストに追加
      const todoText = backButton.previousElementSibling.innerText;
      createIncompleteTodo(todoText);
      // 押された戻すボタンの親にあるliタグを削除
      backButton.closest("li").remove();
    });
    moveTarget.firstElementChild.appendChild(backButton);
    // 完了リストに移動
    document.getElementById("complete-list").appendChild(moveTarget);
  });

  // button(削除)タグ生成
  const deleteButton = document.createElement("button");
  deleteButton.innerText = "削除";
  deleteButton.addEventListener("click", () => {
    // 押された削除ボタンの親にあるliタグを未完了リストから削除
    const deleteTarget = deleteButton.closest("li");
    document.getElementById("incomplete-list").removeChild(deleteTarget);
  });

  // liタグの子要素に各要素を設定
  div.appendChild(p);
  div.appendChild(completeButton);
  div.appendChild(deleteButton);
  li.appendChild(div);

  // 未完了リストに追加
  document.getElementById("incomplete-list").appendChild(li);
};

document.getElementById("add-button").addEventListener("click", onClickAdd);
styles.css
body {
  font-family: sans-serif;
  color: #666;
}

input {
  border-radius: 8px;
  border: none;
  padding: 6px 16px;
}

button {
  border-radius: 8px;
  border: none;
  padding: 4px 16px;
  margin: 0px 2px;
}

button:hover {
  background-color: #79a8a9;
  color: #fff;
  cursor: pointer;
}

.input-area {
  background-color: #c6e5d9;
  width: 400px;
  height: 30px;
  padding: 8px;
  margin: 8px;
  border-radius: 8px;
}

.incomplete-area {
  border: 2px solid #aacfd0;
  width: 400px;
  min-height: 200px;
  padding: 8px;
  margin: 8px;
  border-radius: 8px;
}

.complete-area {
  border: 2px solid #aacfd0;
  width: 400px;
  min-height: 200px;
  padding: 8px;
  margin: 8px;
  border-radius: 8px;
  background-color: #c9dede;
}

.title {
  text-align: center;
  margin-top: 0;
  font-weight: bold;
}

.list-row {
  display: flex;
  align-items: center;
}

.todo-item {
  margin: 6px;
}
package.json
{
  "name": "react-beginner-section5",
  "version": "1.0.0",
  "description": "",
  "main": "index.html",
  "scripts": {
    "start": "parcel index.html",
    "build": "parcel build index.html"
  },
  "dependencies": {
    "parcel-bundler": "^1.6.1"
  },
  "devDependencies": {
    "@babel/core": "7.2.0",
    "typescript": "4.4.4"
  },
  "resolutions": {
    "@babel/preset-env": "7.13.8"
  },
  "keywords": []
}

発生した問題

Udemyの講座を参考に、オンラインIDEのstackblitzで全く同じコードを再現したところ同様の挙動のプログラムを再現することができた。ローカルでも同じことをやってみようとしたところ、エラーで詰まってしまい、前に進まなくなってしまった。

ローカルで発生したエラー

CSSもJSも読み込まれず、HTMLしか表示されない。

スクリーンショット 2024-05-17 17.27.35.png

解決方法

claudeに相談

・単純ミスを疑い、stackblitzからダウンロードしたコードの一部を自分で間違って操作した可能性が指摘される　→きちんと動いているコードを再度DLしてローカルで開く　→解決せず
・index.htmlから、CSSやJSファイルの参照を間違っている可能性が指摘される→チェック　→問題なし
・node.jsが必要とか、npm installがうまくいっていないかもしれないと指摘→チェック、実行　→解決せず

Copilotに相談相手を変更

なかなか解決しないので、IDEをPycharmからVS codeにしてCopilot Chatに相談(Copilot Chatはpycharmでも使えるが、/workspace　は今のところVS codeでしか使えず、これを使いたかったので)

Q.@workspace index.html,styles.css,index.jpを調べて問題ないか教えてください。特に相対パスが間違っていないか

スクリーンショット 2024-05-17 17.32.31.png

Q.index.htmlを実行してもjsとcssが読み込まれていない様で、色や挙動がchromeで見ることができません

スクリーンショット 2024-05-17 17.33.05.png

→cssをHTMLから読み込む様に指示（変更前はJSを読んで、JSからCSSをインポートしていたが、変えたほうがいいらしい）

Q.CSSは反映されましたがJSが実行されませんスクリーンショット 2024-05-17 17.34.20.png

→1は問題ないことは確認できていたので、chromeの開発者ツールでコンソールを確認しにいいく

Q.Uncaught SyntaxError: Cannot use import statement outside a module　というエラーがでています。

スクリーンショット 2024-05-17 17.35.48.png

→StackBlitzとJSの読み込み方の記述が違うのか？よくわからないけど言われた通りにコードを変更。
→まだエラーがコンソールにでる

Q.Access to script at 'file:///<自分のファイルパス>/udemy/index.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted. index.html:44

スクリーンショット 2024-05-17 17.37.47.png

スクリーンショット 2024-05-17 17.37.58.png

→まだ、コンソールでエラー発生
→引き続きエラーがでる＜中略＞

スクリーンショット 2024-05-17 17.39.58.png

→解決!!

おわりに

まだ学習の始めなのでいまいちよくわかっていないのですが
・index.htmlから直接CSSを読み込む
・jsファイルを読み込むscriptタグを修正
・ブラウザで普通に表示するだけだとコンソールでエラーになるのでローカルサーバーを立ち上げて表示して解決。

なんか遠回りしているだけな気がするのでJSの理解を深めてこの手のエラーを早く解決できるようにしたいと思います。

フロントエンド初挑戦の身からすると、何が原因でどこでエラーがおきているのかPythonでスクリプト書いているときよりも、原因が分かりづらい（コードの問題なのか、依存関係なのか）ので、さっそく？？？になりました。

複数のファイルを見てエラーの原因がないか探るのに、/workspaceはめちゃ便利なので、JSの開発はVS codeでやっていこうと思います。

0
0
4

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
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?