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

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

ただいまの
回答率

90.47%

  • Node.js

    2420questions

    Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

  • Babel

    75questions

    Babelは、JavaScriptの次世代仕様であるECMAScriptのコンパイラ。次世代の標準機能を用いて記述されたコードを、それらの機能に対応していないブラウザでも動作するコードに変換することができます。

package.json読み込みError

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 532

jointeratail

score 4

 問題に至るまでの経緯

Node.jsとBabelを利用してローカルでJSXを変換しよう!(Reactの練習)
初期ファイルの設定だ!(以下初期ファイル)
./
├── /src
│   └── app.jsx
├── /dest
└── index.html
Nodeモジュールのインストール
npm init -y ←package.jsonの生成
npm install --save-dev babel-cli babel-preset-react babel-preset-es2015

package.jsonのscriptsにbuildコマンドを追加して、最後にpackage.jsonと同階層にBableで変換するプリセット(今回はreactのみ)を指定した「.babelrc」という設定ファイルを作成して、

npm run build


Hello woldが出るぞ!!

結果↓

npm ERR! file E:\Practice\package.json
npm ERR! code EJSONPARSE
npm ERR! JSON.parse Failed to parse json
npm ERR! JSON.parse Unexpected string in JSON at position 166 while parsing '{
npm ERR! JSON.parse   "name": "Practice",
npm ERR! JSON.parse   "version": "1.'
npm ERR! JSON.parse Failed to parse package.json data.
npm ERR! JSON.parse package.json must be actual JSON, not just JavaScript.


もうだめみたい←いまここ

 詳しいファイルの階層と中身

./
├── /src
│   └── app.jsx
├── /dest
└── index.html
├──node_modules
├──package.json
├──package-lock.json

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>React Tutorial</title>
</head>
<body>
    <div id="app"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js"></script>
    <script src="dest/app.js"></script>
</body>
</html


app.jsx

ReactDOM.render(
  <h1>Hello, world!</h1>
  document.getElementById('app')
);


.babelrc

{
  "presets": ["es2015","react"]
}


package.json

{
  "name": "Practice",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
    "build": "babel src -d dest"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1"
  }
}

 雑談

Reactを始めようと思ったのは今日のこと。DiscordというアプリがReactとFluxというアーキテクチャーから開発されていることを知った自分。よしやるか!
Virtual DOM、JSXふむふむ。ブラウザ上でJSXの変換してHello worldはできたぞ!
次はNode.jsとBabelを利用してローカルでJSXを変換するか。そして、問題は突然起こった。
Hello worldごときに手間取るとは。。。←死亡
Node.jsがサーバーサイドとクライアントサイドで同じ言語を使用できるからハッピーという記事をみて頑張ろうと思いました。

 ご指摘やなにか役立つ知識などご教授いただければ

ご協力感謝します。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

package.jsonのscriptsを手動で書きましたね?????
ほら、testキーの行の最後にカンマ入れ忘れてますよ。

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
    "build": "babel src -d dest"
  },

JSONはJavaScriptの値として即使える柔軟なファイルフォーマットですが、
末尾カンマの仕様等、多少融通の効かない古い仕様です。
(JSONのバージョン6とかあったはずだけど何時普及するんだろう…)

慣れるまでは目を皿のようにしながら頑張ってください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/09/13 21:21

    タタタ。。。タイポはここだけの秘密でお願いします;;

    キャンセル

  • 2018/09/13 21:25

    大丈夫です、私も100回くらいやらかしてますし、他のNodeerも多分30回くらいはやらかしてます。
    それくらいJSONファイルを手作業で触るとすぐに壊れます。
    そのうちすぐ気付けるようになると思うので気にせず頑張ってください、そしてJSONファイルを触ったら確認する癖を付けるようにしてくださいね。

    キャンセル

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

  • ただいまの回答率 90.47%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • Node.js

    2420questions

    Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

  • Babel

    75questions

    Babelは、JavaScriptの次世代仕様であるECMAScriptのコンパイラ。次世代の標準機能を用いて記述されたコードを、それらの機能に対応していないブラウザでも動作するコードに変換することができます。