目的
復習システムを作成するために、忘却曲線に基づいて復習するものリストを表示するページを簡単に作りました。DBとかバックエンドを実装する時間(というか力)はなく、cookieでデータを保存しようと考えたので、ローカルサーバーを立ててる必要があったのですが、GPTに言われるがままに訳も分からず行ったので、後から調べている次第です。
必要な用語
1. HTTPサーバー(Webサーバー)とは?
HTTPサーバーは、ウェブサイトのファイル(HTML、CSS、画像など)をインターネットを通じて他の人に届けるコンピュータのことです。
例えば、作ったHTMLファイルをブラウザで見るためには、サーバーというコンピュータがそのファイルを「ここにありますよ!」と教えてくれなければなりません。
Webサーバーは、ファイルをインターネットを通じて提供するコンピュータです。
自分のPCでウェブサイトを試したいとき、「自分のPCでサーバーを立てる」ことで、インターネットを通じてウェブサイトを動かすことができます。
2. Node.jsのモジュールとは?
Node.jsは、JavaScriptを使ってサーバーサイドのプログラムを動かすための環境です。
モジュールは、Node.jsの中で使える「便利な機能の集まり」で、いろんなことを簡単にできるようにしてくれます。
http-serverは、Node.jsのモジュールの一つで、指定したフォルダ内のファイルを簡単にサーバーとして配信できるツールです。
やったこと
3. サーバーの立て方
npx http-server
コマンドの説明
このコマンドは、ローカルサーバーを立てるためのコマンドです。
npx
は、Node.jsのツールを一時的に使いたいときに便利なコマンドです。
http-server
は、簡易的にファイルを配信するサーバーを立てるツールです。これを使うと、ファイルを簡単に配信できるサーバーが立ちます。
ポート番号の指定(-pオプション)
http-server
は、デフォルトでポート番号8080を使いますが、-p 8081
と指定することで、8081番のポートを使うことができます。
ポート番号は、サーバーが動作する場所を示していて、8080や8081などの番号を使って、ネットワーク上でアクセスできる場所を指定します。
用語解説
静的ファイル
静的ファイルとは、内容が変わらない、ただのファイル(例えばHTMLファイルや画像ファイル)のことです。
サーバーはこれらのファイルをそのまま配信します。
クッキー
クッキーは、ウェブサイトでユーザーの情報を保存しておく仕組みです。
例えば、ログイン情報やサイト設定を保存するために使われます。
まとめ
- HTTPサーバーは、インターネットで他の人にファイルを渡す役割を果たすコンピュータのこと。
-
Node.jsは、JavaScriptを使ってサーバーを動かす環境で、その中の便利な「モジュール」として
http-server
があります。 -
npx http-server
コマンドで、ローカルのPCにサーバーを立てて、HTMLや画像ファイルを配信できるようにしました。 - ポート番号で、サーバーの通信場所を指定できます。
このように、ローカルサーバーを立てることで、サイトのデータをクッキーに保存し、ブラウザで簡単にテストすることができました。