HTML/CSS/JavaScriptの練習 実践 雑多な記録3.2

HTML/CSS/JavaScriptの練習 実践 雑多な記録3 (JSフレームワーク編)
https://seesaawiki.jp/lifewithslackzaurus_15_0/d/HTML/CSS/JavaScript%a4%ce%ce%fd%bd%ac%20%bc%c2%c1%a9%20%bb%a8%c2%bf%a4%ca%b5%ad%cf%bf%a3%b3
が増えてきたので分ける。

/*************************************************************************************/
Express: (2023.05)
【Node.js入門】3大フレームワーク「Express」「Meteor」「Sails」の特徴とは?
https://www.sejuku.net/blog/85534
https://www.tohoho-web.com/ex/nodejs.html
express.jsってFWだったのか。以前、socket.ioとexpressを使ってリアルタイムチャットアプリやって
みたけどJSライブラリだと思っていた。その内こっちに移動しよう。
\
【入門】Node.jsフレームワークの選び方とおすすめ10選 (2024.01)
https://www.kagoya.jp/howto/it-glossary/develop/node-js/
(React/Angular/VueもNode.jsの解析エンジン使っているから、Node.jsのFWという事になるのか)

(2024.01)
ローカルサーバ apache+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
で、node.jsのサーバ機能を入れようとググったら、httpかexpressを使うサンプルがヒットした。
https://rensaba-programer.jp/2023/08/12/node-js%E3%82%92apache%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%81%A7%E5%85%AC%E9%96%8B%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95/
https://qiita.com/someone-said-so/items/ed0aafee065efcbc3b57
ChatGPTに聞いた:
node.jsで、require(‘http’) と require(‘express’) では何が違うのか?
require(‘http’) と require(‘express’) は、Node.jsで使用される2つの異なるモジュールです。
http モジュールは、Node.jsの標準モジュールの一部であり、HTTPサーバーとクライアントの機能を提供します。
これを使用すると、基本的なHTTPサーバーを作成し、リクエストを処理することができます。しかし、ルーティングやミドルウェアなど、高度な機能は提供されません。
\const http = require(‘http’);
\const server = http.createServer((req, res) => {
\ res.writeHead(200, {‘Content-Type’: ‘text/plain’});
\ res.end(‘Hello, World!\n’);
\});
\server.listen(3000, ‘127.0.0.1’, () => {
\ console.log(‘Server running at http://127.0.0.1:3000/’);
\});
express モジュールは、Node.jsのWebアプリケーションフレームワークであり、http モジュールよりも高度な機能を提供します。
ルーティング、ミドルウェア、ビューエンジンなどが組み込まれており、開発者がより簡単かつ効果的にWebアプリケーションを構築できます。
簡潔に言えば、http モジュールは基本的なHTTPサーバーを作成するためのものであり、express モジュールはより高度な機能を備えたWebアプリケーションを構築するためのフレームワークです。選択はプロジェクトの要件によります。
\const express = require(‘express’);
\const app = express();
\app.get(‘/’, (req, res) => {
\ res.send(‘Hello, World!’);
\});
\app.listen(3000, () => {
\ console.log(‘Server running at http://localhost:3000/’);
\});

httpやexpressはNode.jsのサーバ機能で練習した。
https://seesaawiki.jp/lifewithslackzaurus_15_0/d/HTML/CSS/Node%2ejs%a4%ce%ce%fd%bd%ac%20%bc%c2%c1%a9%20%bb%a8%c2%bf%a4%ca%b5%ad%cf%bf

なるほど、Next.jsだと以下の様に書いて、httpもexpressも要らないのか。
import { NextResponse } from ‘next/server’;
export async function GET(req) {
\ return NextResponse.json({ name: ‘Hello, World!’ })
}

/*************************************************************************************/
Electron、Tauri: (2022.12)
そうか、これは Desktopフレームワークか。
draw.ioというフローチャート作成ツールのデスクトップ版 https://github.com/jgraph/drawio-desktop/releases/tag/v20.3.0 をDLして見たらこれ(Electron)を使っていた。
Electron Framework とは、でググった:
Electron (ソフトウェア) – Wikipedia https://ja.wikipedia.org/wiki/Electron_(%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2)
ようこそ!Electron入門 – Qiita https://qiita.com/umamichi/items/6ce4f46c1458e89c4cfc
最新版で学ぶElectron入門 ウェブ技術でPCアプリを開発しよう https://ics.media/entry/7298/
公式ホーム? https://www.electronjs.org/ja/docs/latest

Electron代替を目指すRust製フレームワーク「Tauri」がバージョン1.0に到達、Windows/Mac/Linuxに対応 https://www.publickey1.jp/blog/22/electronrusttauri10windowsmaclinux.html
OSが備えるWebView機能としては、WindowsではWebView2、macOSではWebKit、Linuxではgtk-rsがそれに該当します。
(これはlib?、描画系だからgtk?。JSフレームワーク、Rustフレームワーク。速度が必要なとこ
\だけC++でバイナリ化できるフレームワークもあったりする)
[Tauri]アーキテクチャまとめ
https://qiita.com/marlex/items/4ff5c82bd0ebd211e9c4
軽量RustフレームワークTauriでデスクトップアプリ開発をはじめよう
https://gihyo.jp/article/2022/10/rust-monthly-topics-02
フレームワーク Tauri とは、でググった:
Tauriで使えるWebフレームワークたち(VSCodeのプラグインも添えて)
https://zenn.dev/sakai_nako/articles/tauri-and-web-framework#tauri%E3%81%A7%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%83%95%E3%82%A9%E3%83%AB%E3%83%80%E3%82%92%E3%82%BB%E3%83%83%E3%83%88%E3%82%A2%E3%83%83%E3%83%97

「Linux」でウェブサイトをアプリとして実行するには–「Webapp Manager」を使用
https://japan.zdnet.com/article/35196688/
https://www.saashub.com/webapp-manager-alternatives

/*************************************************************************************/

 

参考書籍:

参考情報:
draw.io VS drawio-desktop (2023.03)
https://www.libhunt.com/compare-drawio-vs-drawio-desktop
$ ls -l draw.io.app/Contents/Resources/
\-rw-r–r– 1 root root 185695726 9月 9 2022 app.asar
https://blog.katsubemakito.net/nodejs/electron/hac…
https://zenn.dev/takamichie/articles/261d5bc54ce0a5

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です