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

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

新規登録して質問してみよう
ただいま回答率
85.48%
JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

React.js

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

Q&A

解決済

1回答

821閲覧

CodeSandboxでJSON Serverを使うには?

ratezou

総合スコア62

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

React.js

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

0グッド

0クリップ

投稿2023/03/21 00:20

編集2023/03/21 04:38

Reactの勉強中です。
テキスト内にjsonを(URLを利用したエンドポイントとして)利用するサンプルソースが載っていますが、どのようにエンドポイントを作成するかが省かれています。
調べてみたところ、以下のサイトに立ち当たりました。
https://nakanishi-s.jp/react-x-db/
しかし、これを動かしても、jsonの中身が表示されませんでした。
CodeSandboxでは出来ないのでしょうか?

以下、私が行った手順です。
1.CodeSandboxでプロジェクトを作成。
作成時、「react type」で検索し、officialマークのあるreact Typescriptを選択。
2.terminalを選択
選択すると、cloudにするか?と聞かれる。断れない雰囲気なので、yes coveertをクリックします。
3.しばらく待ちます

ここから、上記URLの内容に沿った設定をして行きます。

4.右上の+マークからNewTerminalを選択
5.npm install json-server --dev を実行

CodeSandbox

1➜ workspace git:(master) ✗ npm install json-server --dev 2npm WARN config dev Please use --include=dev instead. 3 4added 57 packages, changed 1 package, and audited 1291 packages in 10s 5 6241 packages are looking for funding 7 run `npm fund` for details 8 96 high severity vulnerabilities 10 11To address all issues (including breaking changes), run: 12 npm audit fix --force 13 14Run `npm audit` for details. 15npm notice 16npm notice New major version of npm available! 8.15.0 -> 9.6.2 17npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.6.2 18npm notice Run npm install -g npm@9.6.2 to update! 19npm notice

6.db.jsonはデフォルトのままにしておきます。

db.json

1{ 2 "posts": [ 3 { 4 "id": 1, 5 "title": "json-server", 6 "author": "typicode" 7 } 8 ], 9 "comments": [ 10 { 11 "id": 1, 12 "body": "some comment", 13 "postId": 1 14 } 15 ], 16 "profile": { 17 "name": "typicode" 18 } 19}

7.npx json-server --watch db.json --port 3100 を実行

CodeSandbox

1➜ workspace git:(master) ✗ npx json-server --watch db.json --port 3100 2 3 \{^_^}/ hi! 4 5 Loading db.json 6 Oops, db.json doesn't seem to exist 7 Creating db.json with some default data 8 9 Done 10 11 Resources 12 http://localhost:3100/posts 13 http://localhost:3100/comments 14 http://localhost:3100/profile 15 16 Home 17 http://localhost:3100 18 19 Type s + enter at any time to create a snapshot of the database 20 Watching... 21 22

8.URLを開くけど、何も表示されません・・・。

URL

1http://localhost:3100/posts

CodeSanboxでは使えないのでしょうか?
また、仮に使えない場合、CodeSandboxからエンドポイントとしてjsonを扱えるサービスがあるのでしょうか?
取り止めもない質問ですいません。

追記1)
3100ポートなので、
https://***ouz-3100.csb.app:3100/
でアクセスしてみましたが、ローディングしたままです。

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

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

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

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

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

ratezou

2023/03/21 02:11

とりあえず、 https://my-json-server.typicode.com/ ここで、jsonのエンドポイントは作れるみたいです。 CodeSnadboxをご存知の方はお教えいただけますか?
hoshi-takanori

2023/03/21 05:59

ブラウザからアクセスする場合、localhost じゃなくて CodeSandbox のホスト名を指定する必要があるかと…。
ratezou

2023/03/21 06:24 編集

最後の追記1)に記載してます。 あと、 https://***yef-3000.csb.app:3100/posts という風に、json内の階層をURLに入れてもローディングが止まらないです。 ちなみに、「このサイトにアクセスできません」となります。 この時点でソースの表示をすると、これもローディングが止まりません。
ratezou

2023/03/21 06:30

json-serverを起動すると、 Resources http://localhost:3100/posts http://localhost:3100/comments http://localhost:3100/profile とdb.jsonの中身が表示されているので、起動はうまくいってそうです。 そのまま、どれかひとつにアクセスすると、 502 It looks like the dev server has not been started yet. Start from the editor ↗ と表示されます。 Start from the editor がリンクなのでクリックすると、 Whoops, page not found. となります。 なので、クラウド開発環境では使えないよ。ということかなぁ?と思いますが、いかがでしょうか?
hoshi-takanori

2023/03/21 08:37

localhost というのは「そのマシン自体」という意味で、自分の PC で JSON server を動かす場合はそれでいけますが、クラウド上で動かして PC のブラウザからアクセスする場合には使えません。JSON server が動いてるクラウドサーバーのホスト名を指定する必要があるはず。
ratezou

2023/03/21 22:54

クラウド上の開発環境自体にjson-serverを入れれば、同じ環境なのでlocalhostで間違っていないはずです。 それに、先にも申し上げましたが、クラウド上のURLでアクセスしてもうまくはいきませんでした。
guest

回答1

0

自己解決

https://my-json-server.typicode.com/
このサービスを使うことにします。

投稿2023/03/21 22:55

ratezou

総合スコア62

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問