HTML/CSS/GoLangの練習 実践 雑多な記録
https://shirakawa.weblike.jp/blog-page/2022/06/14…
のコードをAIでNode.jsに変換し実行してみる。
https://chat.openai.com/auth/login
GoLangをNode.jsに変換し実行しているうちに自然とExpressの練習もやっていた。含んでいた。
HTML/CSS/JavaScriptの練習 実践 雑多な記録3.2
https://shirakawa.weblike.jp/blog-page/2024/01/07…
practice900/～practice999/：
最初の方はnpm_initする程でもなく、fmt.Printf();は、console.log();。関数も似たようなもの。
JSの復習にもなって良い。
/*************************************************************************************/
Goプログラミング実践入門：参考書籍５
JSの基本は、https://shirakawa.weblike.jp/blog-page/2022/06/19 でやってるはずだが。。
とほほのJS入門もそこそこ見た。忘れたらまた見る。
Goはbuildしたバイナリを実行すると、(init()の後に)main()から実行する。Node.jsはmain()を
定義した場合は、関数をコールする必要がある。
第１章 Go言語はWebアプリ開発に最適な言語 (2024.07)
(HTTP通信のおさらいはGoLangの練習メモ https://shirakawa.weblike.jp/blog-page/2022/06/14… を読むのみに留めた)
第２章
Amazon評価参考に学習の順番を変更。この章は後回し。
第３章 net/httpライブラリを使ったリクエストの受け付け
Node.jsでは、ポート番号が指定されていない場合、デフォルトでポート8080を使用します。
const http = require(‘http’);
function handler(req, res) { //Goと似たような感じにハンドラ関数化する
res.writeHead(200, {‘Content-Type’: ‘text/plain’});
res.end(); //これがres送信トリガーらしい
Node.js標準ライブラリでは、Go言語のx509.Certificateに相当する直接的なAPIがないため、
サードパーティのライブラリを使用する必要があります。
node-forgeライブラリを使うことで、自己署名SSL証明書とサーバの秘密鍵を生成できます。
$ npm install node-forge
const forge = require(‘node-forge’);
Go言語でのHttpRouterを使った実装は、Node.jsでは、expressモジュールとexpress.Routerを
使用してルーティングを行います。
$ npm install express
const express = require(‘express’);
Node.jsではHTTP/2サーバーを構築するために、標準のhttp2モジュールを使用します。
const http2 = require(‘http2’);
Goは構造体の定義時に関数を含める事はできないが、JSは(クラスで)できるしGo同様追加もできる。
Node.jsでは、append関数の代わりに配列のpushメソッドを使用します。また、配列の長さは
lengthプロパティで取得できますが、容量の概念はJavaScriptの配列には存在しないため、
その部分は省略します。Goのスライスは普通に配列に変換された。append()はメンバ関数ではなく
スライス用の?組込み関数。
//Go
t := time.Now(); // 現在の時間を取得.
fmt.Println(t);
duration := time.Now().Sub(t); // 現在の時間と t の差分を計算.
fmt.Println(duration);
$ ./time_now_div
2024-07-21 xx:yy:10.797096849 +0900 JST m=+0.000063092
282.342µs
//JS
let t = new Date()
console.log(t)
let duration = (new Date()) – t
console.log(duration + “ms”)
$ node time_now_div.js
2024-07-21Txx:yy:16.999Z
5ms
awaitはJavaScript（およびTypeScript）の非同期処理を扱うための構文で、特にasync関数内で
使用されます。awaitを使うと、Promiseの解決を待つことができ、非同期関数の結果を簡単に
扱うことができます。awaitを使用せずにPromiseチェーンを使う場合と比較してみましょう。
https://shirakawa.weblike.jp/blog-page/2026/02/05…
第４章 リクエストのデータ構造とその処理
const h = req.headers;
res.writeHead(200, { ‘Content-Type’: ‘application/json’ });
if (req.url === ‘/headers’ && req.method === ‘GET’) {
app.get(‘/headers’, (req, res) => { //express
const parsedUrl = url.parse(req.url, true); // /headers?hello=world&thread=123 とかの場合
if (parsedUrl.pathname === ‘/headers’) {
req.on(‘data’, chunk => { body += chunk; });はNode.jsのhttpモジュールにおけるイベント
駆動プログラミングの一例です。このコードは、HTTPリクエストのボディデータを非同期に受信
するためのものです。
具体的には、req.on(‘data’, callback)は、リクエストオブジェクト（req）がdataイベントを
発火するたびに指定されたコールバック関数を実行します。リクエストボディのデータはチャンク
（小片）として渡されます。複数のチャンクを受信する場合があるため、これらを一つの変数に
連結して完全なリクエストボディを構成します。
req.on(‘end’, …)は、すべてのデータチャンクが受信された後に呼び出されます。
if (req.url === ‘/body’ && req.method === ‘POST’) {
app.post(‘/body’, (req, res) => { //express
const body = req.body;
Go言語のコードでは、r.ParseForm() と r.ParseMultipartForm() がフォームデータの解析を
行いますが、Node.jsでは querystring (と formidable) モジュールを使用して同様の機能を実現します。
\
例えば、Express.jsの、const app = express();の、app.post()の、res.end()の引数がテキストかバッファオブシェクトを入れる事になっているのはどのオンラインDocを見れば分かる? (->ChatGPT)
Express.jsのresオブジェクトは、Node.jsのhttp.ServerResponseオブジェクトの拡張です。したがって、res.end()メソッドの詳細については、Node.jsのHTTPモジュールのドキュメントを参照する必要があります。
Express 4.x API Reference – app.post()、Node.js HTTP module – res.end()、でググった：
https://expressjs.com/ja/api.html#res.end
https://nodejs.org/api/http.html#http_response_end_data_encoding_callback
https://www.tohoho-web.com/ex/express.html
https://qiita.com/kotaro-caffeinism/items/54e10de2164fa35c7141
\
ChatGPTに変換させたら、formidable,fs,path,urlをrequireしてるが、実際にこれらを使った実装
がされてるものなのか、node.js const form = new formidable.IncomingForm();、
でググったら、まあ使われてるんだろう。(2024.08)
https://curucuru.co.jp/blog/20230502_nextjs_api_file_upload
https://www.koki.muhen.jp/archives/1716
https://qiita.com/sengok/items/70144a4733e9306a9960
https://zenn.dev/masumomo/articles/971424e0515c71
\
知らないオブジェクトやメソッドを使うことになり、やっぱ VSCodeに戻るか～、と思ったが、
結局、ChatGPTが妥当なオブジェクトやメソッドを教えてくれるなら、VSCodeの補完は要らないか?。
エディタはEmacsのままでいいか。
というか正にこれ、ChatGPTでプログラミングが非常に楽になった、でググった：
ChatGPTでプログラミングのフラット化がはじまっている
https://ascii.jp/elem/000/004/140/4140826/
(今後もChatGPTへの依存が続きそうだ。ChatGPTが完全有料化になった場合を考えて、全部の問答を
メモっておくか)
第５章 テンプレートエンジンを使ったコンテンツの表示
Go言語には、テンプレートエンジンを使ったコンテンツの表示、という機能があるが、Node.jsではどうか？
Node.jsにもテンプレートエンジンを使用してコンテンツを表示する機能があります。Go言語でのテンプレートエンジンはhtml/templateやtext/templateが代表的ですが、Node.jsには複数のテンプレートエンジンがあり、代表的なものとして以下があります。
1. EJS (Embedded JavaScript)
EJSは、JavaScriptコードをHTML内に埋め込むことができるテンプレートエンジンです。
シンプルで使いやすく、学習コストが低いのが特徴です。
2. Pug (旧Jade)
Pugはインデントベースで書かれるテンプレートエンジンで、簡潔に記述できるのが特徴です。
HTMLのタグを省略して書くことができるため、コードが読みやすくなります。
3. Handlebars
HandlebarsはMustacheの上位互換で、再利用可能なテンプレート構造をサポートします。
特徴的な二重の中括弧{{ }}を使ってデータを埋め込むことができます。
\
Node.jsのテンプレートエンジンを使うよりも、React.jsやNext.jsを使う事の方が多くないか？
はい、現在のウェブ開発においては、React.jsやNext.jsのようなフレームワークを使うことの方が一般的です。これらのツールは、クライアントサイドでの動的なUIの構築や、サーバサイドレンダリング（SSR）を容易にするため、より複雑でインタラクティブなアプリケーションに適しています。
一方、Node.jsのテンプレートエンジン（例: EJS, Pug, Handlebars）は、比較的シンプルなアプリケーションや、サーバーサイドでレンダリングされたHTMLを提供する用途に適しています。ただし、React.jsやNext.jsの普及により、これらのテンプレートエンジンの使用は減少しています。
その理由の一つは、React.jsやNext.jsがコンポーネントベースの設計を採用しており、再利用可能なUI部品を簡単に作成できることです。また、Next.jsはSSRや静的サイト生成（SSG）を標準でサポートしており、SEOの改善やパフォーマンスの向上にも役立ちます。これにより、多くの開発者がこれらのモダンなフレームワークに移行する傾向があります。
\
この章は必要になったら練習しよう、保留。
第２章 Goプログラム「ChitChat」—典型的なGo Webアプリのデザイン
Go言語で以下のような簡単なWebサーバを構築したが、
https://seesaawiki.jp/lifewithslackzaurus_15_0/d/HTML/CSS/GoLang%a4%ce%ce%fd%bd%ac%20%bc%c2%c1%a9%20%bb%a8%c2%bf%a4%ca%b5%ad%cf%bf
\package main
\import “net/http”
\func main() {
\ // 静的ファイルを提供するディレクトリを指定
\ fs := http.FileServer(http.Dir(“./static”));
\ // /static/パスへのリクエストをfsで処理するように設定
\ http.Handle(“/static/”, http.StripPrefix(“/static/”, fs));
\ // Webサーバを開始
\ http.ListenAndServe(“:8080”, nil);
\}
同様な事がNode.jsでもできるのか？
はい、Node.jsでも同様のWebサーバを構築することができます。以下のコードは、Node.jsで静的ファイルを提供するWebサーバの例です。この例では、expressというパッケージを使用しています。
まず、プロジェクトのディレクトリを作成し、必要なパッケージをインストールします。(省略)
次に、以下の内容でserver.jsファイルを作成します。
\const express = require(‘express’);
\const path = require(‘path’);
\const app = express();
\// 静的ファイルを提供するディレクトリを指定
\app.use(‘/static’, express.static(path.join(__dirname, ‘static’)));
\// Webサーバを開始
\app.listen(8080, () => {
\ console.log(‘Server is running on http://localhost:8080’);
\});
これで、server.jsを実行すると、staticディレクトリ内のファイルが/staticパスで提供されるようになります。
$ node server.js
これで、Go言語のサーバと同様に、Node.jsを使用して静的ファイルを提供するWebサーバが動作します。
\
PHPではPOSTで受け取った変数にサニタイズ処理を行うが、Node.jsでは行う必要があるか？
はい、Node.jsでもPOSTで受け取ったデータにサニタイズ処理を行う必要があります。サニタイズは、受け取ったデータが悪意のあるコードや不正な入力でないことを確認し、アプリケーションのセキュリティを保つために重要です。
PHPと同様に、Node.jsでもユーザーからの入力をそのまま使用すると、XSS（クロスサイトスクリプティング）やSQLインジェクションなどの攻撃に対して脆弱になります。そのため、サニタイズ処理やバリデーションを行うことが推奨されます。
Node.jsでのサニタイズ方法
・バリデーションライブラリ: express-validator などのライブラリを使って、リクエストのデータをバリデーションし、サニタイズを行います。
・XSS対策: xss-clean などのミドルウェアを使用して、入力データから悪意のあるスクリプトを削除します。
・データベース関連の対策: mongoose などを使う場合は、データベースクエリにプレースホルダーを使うことでSQLインジェクションのリスクを減らします。
以下に、express-validator を使用した例を示します。list-2.1.jsとして保存した。
このように、Node.jsでもサニタイズ処理を行うことで、アプリケーションの安全性を保つことができます。
\
これらのサニタイズ処理は、Next.jsでSSRを使う場合は、Next.js側で用意しているのか？
Next.js自体は、特定のサニタイズ処理やバリデーションを自動的に行う機能を提供していません。そのため、Next.jsでサーバーサイドレンダリング（SSR）を利用する場合でも、ユーザーからの入力に対するサニタイズやバリデーション処理を開発者自身で実装する必要があります。
Next.jsはReactをベースにしているため、ReactやNode.jsで使用される一般的なサニタイズやバリデーションのライブラリをそのまま使用できます。たとえば、express-validator や validator などのライブラリを使って、APIルートやサーバーサイドコードでサニタイズ処理を行います。
Next.jsでのサニタイズ方法の例
Next.jsでは、getServerSideProps や APIルートでのサニタイズ処理が一般的です。以下はAPIルートでサニタイズ処理を行う例です。list-2.2.jsとして保存した。
主なポイント
・APIルート: Next.jsのAPIルートでサニタイズ処理を行うことができます。上記の例では、express-validator を使って入力をサニタイズしています。
・getServerSidePropsやgetStaticProps: これらのサーバーサイドでデータを取得する関数でも、サニタイズ処理が必要な場合は同様にライブラリを使用して行います。
サニタイズに関する注意点
・XSS対策: Reactのデフォルトのエスケープ機能により、XSS攻撃のリスクはある程度軽減されますが、入力データをそのまま使用する場合は追加のサニタイズが必要です。
・SQLインジェクション対策: データベース操作を行う際には、ORM（Object-Relational Mapping）ツールやプリペアードステートメントを使用して、SQLインジェクションを防ぐことが重要です。
まとめると、Next.jsは自動的にサニタイズ処理を行わないため、開発者自身が適切なサニタイズとバリデーションを行う必要があります。
\
(当初の目的だった静的サイト(https://oldcygwin.web.fc2.com/ )のWeb表示をNode.jsを使ってlocalでできた(server.js)ので、ここで一旦保留してDBの章へ行く)
第６章 データの記憶 —構造体、ファイル、データベース
GoLangでは組み込み系を意識してSQLiteを使ったが、Node.jsではMySQL(MariaDB)を使う。
Node.jsは単独でサーバになる事は少ない https://seesaawiki.jp/lifewithslackzaurus_15_0/d/%a5%ed%a1%bc%a5%ab%a5%eb%a5%b5%a1%bc%a5%d0%20apache%a1%dcnode%2ejs
ようなので、https://oldcygwin.web.fc2.com/ のバックエンドをlocalでApache+PHP+MySQLからApache+Node.js+MySQLにしてみる事にした。
$ node main.js (予定、というかサーバ機能はApacheに任せるから、これは無し ->必要だった node app.js)
以前、https://seesaawiki.jp/lifewithslackzaurus_15_0/d/HTML/CSS/PHP%a4%ce%ce%fd%bd%ac%20%bc%c2%c1%a9%20%bb%a8%c2%bf%a4%ca%b5%ad%cf%bf で作ったPHPの注文Formを問い合わせFormに改造していたものを、ChatGPTにNode.jsへ変換させる。(app.js(main.js) shop_form_check.js shop_form_done_mysql.js)
Apacheとの連携はこっちにメモ。https://seesaawiki.jp/lifewithslackzaurus_15_0/d/%a5%ed%a1%bc%a5%ab%a5%eb%a5%b5%a1%bc%a5%d0%20apache%a1%dcnode%2ejs
以下は、典型的なファイル構成の例です：
・app.js または index.js（エントリーポイント）
・routes/shop.js（ルーティング設定）
・controllers/shop_form_check.js（shopFormCheck 関数などのロジック）
(今回は規模が小さいので同じdirに置いたため、dirは作らなかった。が後から見られるとマズいファイル
が出てきたので、次回作る時はdir分けしよう。リバースプロキシ設定した)
$ node app.js
Server running on port 3000
Error: connect ECONNREFUSED 127.0.0.1:3306
DBへのアクセスに失敗する。https://seesaawiki.jp/lifewithslackzaurus_15_0/d/MySQL%28MariaDB%29
(当初の目的だった静的サイト(https://oldcygwin.web.fc2.com/ )の動的部分?がNode.jsを使ってlocalでできたので、ここで一旦保留する)
/*************************************************************************************/
参考書籍：
HTTP通信についての基本知識はこっちにまとめる
https://shirakawa.weblike.jp/blog-page/2024/01/02…
Goプログラミング実践入門 標準ライブラリでゼロからWebアプリを作る
https://book.impress.co.jp/books/1115101145
https://www.marlin-arms.com/support/goweb/
その内、Node.jsの本も買って、取りこぼしチェックしよう。
参考情報：
Webサービス node.js vs golang、でググった：
https://jp.quora.com/Golang%E3%82%88%E3%82%8ANode-…
https://jp.quora.com/Go%E3%81%A8Node-js%E3%82%92%E…