@rempei

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

JavaScript サーバーにデータを保存したり参照したりしたい

解決したいこと

 Reactでいろいろコード書いてみたのですが、入力したデータをサーバーに保存して、そのデータを引っ張ってきて表示するとかpropsに渡してみたりとかしたいなと思いはじめました。
 http.createServerというのでサーバーを立ち上げてHello Worldしてみたりはしたのですが、Reactで作ったものの表示の仕方も分からないし、基礎的なことももっと知りたいです。
 どこか導入にいいサイトがあれば教えてほしいです。

該当するソースコード

const http = require('http')
const fs = require('fs')
const { error } = require('console')

const server = http.createServer((req, res) => {
  fs.readFile('./index.html', 'UTF-8', (error, data) => {
    res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' })
    // res.write('<h1>Hello World</h1>')
    res.write(data)
    res.end()
  })
})

const port = 8080
server.listen(port)
console.log('Server listen on port' + port)

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My React App</title>
  </head>
  <body>
    <!-- <div id="root"></div>
    <script src="index2.js"></script> -->
    <h1>Nice</h1>
  </body>
</html>
0 likes

2Answer

開発環境が不明ですが、Windows 10 / 11 の PC が使えるなら Visual Studio 2022 Community を使ってみてはいかがですか? テンプレートを使えば、

React1.jpg

バックエンドに Web API が組み込まれた即実行可能なプロジェクトが作成でき、

React2.jpg

メニューバーの Fetch data をクリックすると JavaScript の fetch API を使って Web API に要求が出て、以下のように応答が返ってきます。

React3.jpg

React 側のコードは以下のものが自動生成されます。

React4.jpg

2Like

Comments

  1. @rempei

    Questioner

    ご回答ありがとうございます。Windows10です。
    このような便利なものがあることを知れてよかったです。
    参考にさせていただきます。

「基礎から学びたい」とはどういった意味合いでしょうか?

化学の勉強で例えると

  • 「初歩」から学ぶ
    • 例: 小学一年生の「せいかつか」から学ぶ
    • ごちゃごちゃしたことを無視して、手近なものや簡単なことから
  • 「基礎」から学ぶ
    • 例: 中学化学はやらず、いきなり高校化学基礎から
    • 難易度の高さに耐えながら、「これさえ分かれば、このあと学ぶことの理由もわかる」ことをする

がどちらも「基礎」とひっくるめて呼ばれがちです。

出過ぎた意見かもしれませんが、 rempei さまが学ぶべきなのは「初歩」であり「基礎」ではないと思います。

フレームワークに頼らず、イチからサーバーを記述してアプリケーションを作ろうとするのはキャパシティを超えているように思えます。

それよりも、フレームワークに頼り切って「ほんの少しのコードを書く」という意味で小さなところからスタートするのが良い進め方だと思います。 難しいことをしようとして何もできないよりも、手応えが少なくても小さな完成品を作るところから始めるほうが、楽しいし自信が身につくし学びになる、というのが僕の持論です。

フロント専門・サーバー素人として以下の構成をオススメします。

(Next.js について、App Router はシンプルで書きやすいですが情報が少ないし、新しい規約を覚えないといけないし、emotionやemotionを使っているMUIが現在使えないので、 Page Router (と API Routes) のほうが良いと思います。)

  • Next.js (Page Router)
    • ルーターの記述がめちゃくちゃ簡単に書けるフレームワーク
    • index.html を返すサーバー記述も、index.html も必要ありません。
    • Next.js 公式ドキュメントも、 page router / App router で分けられているので、気を付けましょう。
    • TypeScript の設定も非常に簡単です。
  • React Query (@tanstack/react-query)
    • データ取得をはじめ バックエンド API との通信を書くためのライブラリ
    • useEffect を自力で書くと複雑すぎます。
  • Next.js (Page Router) の API Routes
    • バックエンド API も Next.js 上で書くことができます
  • Prisma × SQLite
    • SQLite はたぶん最も簡単な DB です。
    • Prisma はセットアップが難しいですが、 SQL が分からなくてもそれなりに DB を扱えます。
1Like

Comments

  1. @rempei

    Questioner

    ご回答ありがとうございます。honey32様のおっしゃる通りでわたしも基礎という言葉を使いましたが、学びたいのは初歩の方です。お考えにも激しく同意します。タイトルの自分のやりたいことはNode.jsとExpress.jsを利用すればできるということを調べて知ったのですが、教えていただいた構成と比べるとどのような点が違うでしょうか?また、ReactRouterは少しかじったのですがNext.jsの記述の方が簡単でしょうか?

  2. Next.js の利点を軽くまとめてみました。

    • 全てを内包しているので、サーバーとフロントを同時に学ぶのにちょうどいい
      • リクエストに対して index.html を返すのも、勝手にやってくれます
        • 自力でやるとかなり面倒くさそう
      • API Routes を使ってバックエンドも書くことが出来ます
    • 個人的にルーティングを書くのは React Router より易しいです。
      • 非自明なルールを作らない思想なので、学びやすいと思います。
      • React Router は公式ドキュメントも一般の記事も新旧が適切に分けられておらず、調べにくいです。
        • Next.js は app と pages があるものの、マシ
        • たぶん企業が開発を主導しているおかげか、ドキュメントは良くまとまっていると思います。
    • TypeScript, CSS Module, ESLint, Tailwind のように、モダンで生産性の上がるツールを設定するのも極めて簡単
      • create-next-app コマンドで立ち上げるのですが、選択肢を選ぶだけで以上のツールが勝手に設定されます。
        • config ファイルでの記述も少ない
      • create-react-app で作った react-router のアプリだと、Webpack をごちゃごちゃ触る必要があります。
      • これが一番大きいです。

    Next.js の欠点として、 SSR があるせいで、 パラメータ(URLの動的な部分)やクエリパラメータの取得が React Router のように単純に行かない点がありますが、https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading#with-no-ssr の通りにして無理やり SSR 無効 (React Router と同じく、コンポーネントの描画をブラウザ側に限定) にすることで回避すれば何とかなると思います。

    ちなみに僕が技術記事を書くときにも、 create-next-app を使ってサクッと立ち上げています。

  3. @rempei

    Questioner

    新旧分かれてなくて苦戦したのは確かに面倒でした。
    とても分かりやすかったです!参考にさせていただきます。

Your answer might help someone💌