  |
はてなキーワード:Node.JSとは
「フロントエンド不要論」は、最近の開発現場やサーバーレス、クラウド技術の進化に関わっている人たちの間でリアルに実感されている問題です。
• React,Vue, Angular などのフレームワークがどんどん複雑化
•フロントエンドとバックエンドの分離が、**「本当に効率的か？」**という疑問が生じている
• 「最終的にHTMLを描画するだけなら、サーバーでやればよくない？」
•フロントエンドから直接APIを叩く構成では、「APIを守る」ことが難しい
•XSS,CSRF, CORSといった脆弱性に対処し続けるコストが無駄
🚩 3.サーバーレス・クラウド技術が進化し、APIの負担を減らす方向に
•AWSLambda,APIGateway, Cognitoなどのサーバーレス技術が進化
•フロントエンドがAPIを叩くより、サーバー側で直接処理する方が効率的
• 以前はReactを使用 → ReactをやめてHTMLベースに戻した
• React,Vue, Angularを全廃
•JavaScriptなしで動的なページを実現
3. Laravel（Livewire）
4. Shopify（GraphQLでデータを直接取得）
•フロントエンドを完全分離する構成から、「バックエンドがHTMLを返せばいい」 というシンプルな構成へ移行
✅サーバーレス時代の最適解：「フロントエンド不要アーキテクチャ」
「フロントエンドを捨てて、サーバーがすべての処理を担う」方向に移行するのが最適解になりつつある。
📌 最適なアーキテクチャ
ブラウザ →サーバー（PHP,Node.js,Go） →APIGateway（Cognito認証）
📌 具体的な実装例（PHP + Cognito +APIGateway）
require 'vendor/autoload.php';
useAws\CognitoIdentityProvider\CognitoIdentityProviderClient;
useAws\Exception\AwsException;
$client = new CognitoIdentityProviderClient([
'credentials' => [
'key' => getenv('AWS_ACCESS_KEY_ID'),
'secret' => getenv('AWS_SECRET_ACCESS_KEY'),
],
]);
$email = $_POST['email'];
$password = $_POST['password'];
try {
$result = $client->initiateAuth([
'AuthFlow' => 'USER_PASSWORD_AUTH',
'ClientId' => 'XXXXXXXXXX',
'USERNAME' => $email,
],
]);
setcookie("accessToken", $result['AuthenticationResult']['AccessToken'], [
'samesite' => 'Strict'
]);
header("Location:dashboard.php");
}
?>
🚀 **「フロントエンドはもう不要」**という流れは、最新のクラウド/サーバーレス開発に携わる人たちが実感していること。
☑セキュリティが大幅に向上する
👉結論：「フロントエンドは不要」クラウド×サーバーレスでバックエンドが主役になる！
https://xn--pckua2a7gp15o89zb.com/
| 技術 | 1月3日 | 3月12日 |
| rails | 22,891 | 27,570 |
| node.js | 12,829 | 16,178 |
| Django | 13,348 | 17,054 |
| Flask | 1,589 | 1,907 |
| FastAPI | 1,210 | 1,509 |
| Laravel | 26,879 | 32,624 |
| spring | 16,380 | 23,965 |
| spring boot | 5,110 | 7,002 |
| React | 49,465 | 65,273 |
| Next.js | 7,382 | 10,288 |
| Vue | 34,322 | 45,354 |
| 言語 | 1月3日 | 3月12日 |
| Ruby | 61,479 | 94,975 |
| Python | 98,527 | 179,183 |
| PHP | 92,129 | 142,628 |
| JAVA | 124,840 | 232,585 |
| Javascript | 99,212 | 237,094 |
| Typescript | 65,828 | 91,348 |
| Rust | 3,807 | 21,921 |
| Go | 48,000 | 183,352 |
Node.js、JavaScript、TypeScriptはオシャレ大好きな人たちが「最近のトレンドは何かな？」、「それはもう時代遅れだよ」、「そのファッション超イケてる」、「あの人がファッションリーダー！」みたいな話ばっかりしてる感がある
んんｗｗｗｗ増田氏、Node.js界隈が孤独に感じるとは、拙者には理解しがたいことですぞ。確かに、Ruby/Railsのコミュニティは非常に結束しているイメージがありますが、Node.jsの開発者たちもまた、独自の活力と熱量を持っていると拙者は認識していますぞ。
Node.jsはJavaScriptの流れを受けており、そのため、よりダイナミックで多様なコミュニティがあります。それは自由であり、むしろオープンな環境です。Rubyと比べてNode.jsは常に進化し続け、多くの新しいアイデアやプロジェクトが生まれていますぞ。
もちろん、増田氏が「仲間意識」を求めるのであればチャンスがあるかどうか参加してみるのも手です。しかし拙者は、その「個」としての自由がNode.jsの魅力だと感じているのですぞ。集団幻想に囚われず、Node.jsの可能性を追求するのも一興かと思いますな。是非とも、多くのNode.jsコミュニティに参加し、多様な人々と触れ合ってみることをお勧めしますぞ！
Ruby/Rails界隈ってさ、俺たち仲間だよな助け合っていこうぜ！みたいな感じがあるよね
新人が勉強するにしてもRailsチュートリアルみたいなところあるし
あと基本的に腐る部分が少なくて、Railsはずっとこれみたいな老舗の安心感みたいなものがある
開発者に当事者意識あるのか、盛り上げていかなきゃみたいな自負があってコントリビューターになる人もいる
でもNode.js界隈は仲間みたいな意識はなくて、殺伐としている
トレンド追いかけて周りを出し抜いて、相手に「まだそれ使ってんだ、いまはこれだけど？」みたいなこと言いがち
Node.jsに愛があるわけでもなく文句を言い続けてDenoやBunとか、もっといいのねーかなって探し回ってる
フロントエンドもバックエンドも出入り自由で流行り廃りが続いて結局なにが正解？みたいな感じが続いてる
フロント部分ならRails使ってても同じ問題があったんだけど、Hotwire登場で解決の兆しが出てきた
Node.js界隈はNode.jsをベースにはしてるけどみんなが別々のライブラリ使ってるから、「この解説は俺のケースには合わないなぁ」ってなりやすい
ひとりの開発者のためだっけ？なんかコンセプトがそうらしいじゃん
https://pr.forkwell.com/career_navi/dhh-rails-large-scale-development/
この人のすごいところは口だけじゃないんだよ
じっさいやるからすごいよな
omakubだっけそういうところもすごい
はてブでのブックマークの数から察するにオワコンになりつつあるのは確かなようだ
リリースのニュースなんかだとブックマーク数もおおかったけど、だんだん減ってる
Rails 7.0正式リリース、Node.js不要のフロントエンド開発環境がデフォルトに 195 users
https://www.publickey1.jp/blog/21/rails_70nodejs.html
↓
「Ruby on Rails 8」正式リリース。SQLiteを本番DBとして利用可能に。今後は6カ月ごとに新バージョンをリリース 33 users
https://www.publickey1.jp/blog/24/ruby_on_rails_8sqlitedb6.html
反論もへってきてる
ErosEnro - [GclFIuRIoGhmOe] (花火)
10yue - [ZpOZ9oa6QqJweD] (アンコ)
iwara source downloaderの作者が公開停止して使えなくなって久しいので代替を紹介
https://github.com/dawn-lc/IwaraDownloadTool/blob/master/.github/README/README_ja.md
Chrome系/Firefox両対応。Tampermonkey入れたあとスクリプトページからインストール
以後iwaraが改変されてUIが出る。ファイル名はiwara source downloaderと同じ書式にするなら
%#ALIAS#% - %#TITLE#%
とする。自分は末尾に動画IDを足すため[%#ID#%]もつけてる
ページにチェックボックスが出るようになるため複数ダウンロードにも対応
MEGAリンクのある動画はDLせずそっちに誘導する機能もあるがiwara画質でいいならSettingでオフればおk
宛先フォルダまでカスタイマイズしたい場合はAria2というコマンドラインの汎用DLマネージャを拾ってきてパスの通った場所に置き
Node.jsをインストールしてから、powershellで
node node-server.js &aria2c --enable-rpc --rpc-listen-all
を実行してからスクリプトのSettingでAria2方式を選択してSaveで閉じればできる
ただし標準ではブラウザの保存パスではなくpowershellのカレントディレクトリ基準になるのでスクリプトのSettingからフルパス指定しとくといい
もしダウンロードキューをGUIで確認したいなら、https://github.com/ziahamza/webui-aria2 をまるまるクローンしてどっかのフォルダに置き
powershellでそのフォルダへcdしてから上記コマンドを実行して、ブラウザでhttp://localhost:8888 を開いておけば見られる
常用するならWindowsのスケジューラーにログオン時このコマンドを書いたbatファイルを実行するようなタスクを追加しとくといい
WebUIからダウンロードアドレスを追加する場合、いにしえのflashgetがやってたような並列ダウンロードなんかが使える
AIで書けるとか言ってるけど仕様打合せしてプロンプト書いて出てきたコードの動作確認してんのプログラマじゃねえか
いやまだそっちは実用になりませんとか言ったって
ノーコードとかローコードとかまたわーわー言ってるけど書ける奴の間口がちょっと変わっただけで作業してるやつ結局はプログラマじゃねえか
いっつもそうだ
juliaもpythonもそんな触れ込みだった瞬間があったぞperlより直観的ですって
EJBもnode.jsもエンジニアが不要になる～とか言ってた奴を産んだ時があった
あのときの用語は何だっけかそうだエンドユーザーコンピューティングだ
VBもそうだ
言葉で書いた通り動くって話だったぞ
英語の国の人はそうなのかなーって思いながら書いてた
Σプロジェクトもプログラマが不足するから大変だ―プログラマが不要で仕事できるようにしようーみたいな話だったと聞いている
メインフレームのシステム開発に欠かせず数多のシステム開発に使われた言語であるCOBOLだって英語を話すように書くとあっという間にシステムが出来上がるという触れ込みだった
第3回でNode.jsのインストールには成功していた。と思う。３時間くらいかかったけど。
ところが、
npmrun dev
Error: Your current platform "freebsd"and architecture "x64" combinationisnot yet supportedby the native Rollup build. Please use the WASM build "@rollup/wasm-node" instead.
意味が分からない。Node.jsのインストールに失敗していたのか？何なんだよFreeBSD。お前は何なんだ。
第3回 さくらインターネットのスタンダードプランの環境にnpmをインストールする
第2回が頓挫したので、その原因を取り除くためにnpmとやらをインストールする。
参考文献を元に進める。
まず新しいバージョンのOpenSSLをコンパイルするらしい。あと新しいバージョンを使うにはPythonも必要らしい。
opensslversionOpenSSL 1.1.1k-freebsd24 Aug 2021python --versionPython 3.8.12
いきなりnpm(⇔Node.js?)のコンパイルが行けそうな気がしたので、とりあえずやってみる。
参考にしたサイトにはOpenSSL云々に関することが書いてあるが、その辺は全部問題ないことを祈って、関連するオプションを全部取っ払う。
curl -sSf https://nodejs.org/dist/v20.11.0/node-v20.11.0.tar.gz -Otar zxf node-v20.11.0.tar.gzcd node-v20.11.0./configure
とすると、
Node.js configure:FoundPython 3.8.12...WARNING:C++ compiler (CXX=g++,9.4.0) too old,needg++10.1.0 orclang++ 8.0.0WARNING:warnings were emitted in the configure phaseINFO: configure completed successfully
「successfully」なら問題ないよな？
続いてmakeだ。makeってなに？もちろんconfigureもよくわかってない。大規模なプログラムをコンパイルするときに必要なヤツというボンヤリとした認識だ。
当然コンパイルがなんなのかもよくわかってない。
nohupmake install DESTDIR=/home/*****/localPREFIX=
ここから30分経っても応答が無いので飽きる。
はい、もう無理。飽きた! 次回があるとしたら「npmをインストールする②」である。
もっと新しい情報があったようだ。こっち見てやればよかった。
第２回 Larabelチュートリアルを参考にログインするだけのWebアプリケーション(?)を作る
composer create-project laravel/laravel example-app_20240131
続いて、Composerを使用してLaravelBreezeをインストール
composerrequire laravel/breeze --dev
php artisanbreeze:install
いろいろ聞かれる。わからん。とりあえずBlade/Yes/PHPUnitを選択。
すると「・・・・installed successfully.」と表示されたので何かが成功したっぽい。
続いて
php artisan migrate
するとエラー。
Illuminate\Database\QueryExceptionSQLSTATE[HY000] [2002] Connection refused
そもそもデータベースの準備を何もしてなかったので、エラーが出るのは当たり前だった。
サンプル用にデータベースを作成し、それに合わせて.envファイルを修正する。
再度、
php artisan migrate
すると「DONE」と表示。成功したっぽい
チュートリアルに従い、「ウェブブラウザでアプリケーションの/loginか/registerURLへアクセス」。
すると、Laravelが出してるっぽいエラー
Illuminate \ Foundation \ ViteManifestNotFoundExceptionPHP 8.1.2710.43.0Vite manifestnot foundat: /******/example-app_20240131/public/build/manifest.jsonRun npmrun dev in your terminal and refreshthe page.
npmとやらが「not found」だったので手順を飛ばしたのがやはりダメだった。
さくらインターネットでnpmを使うにはnode.jsをインストールしてnpmをコンパイルする必要がある？
次回があれば「さくらインターネットのスタンダードプランの環境にnpmをインストールする」である。
早くHello Worldとか書きたい。
こういう仕事は割とあるんだがなかなかのヤバさだったので紹介したい
ちなみにサービスの内容は非常に良くてユーザーも万単位で付いているらしい
バックエンドはAWSEC2で動作しているがログインアカウントは共通化されていてパスワードを全員で共有している
ユーザーを追加しようとしたら「そのような勝手な行為はセキュリティ上許可されていません」とのこと
本番環境とStagingはインスタンスが分かれているが運用は同じ方法
Staging上で5人ぐらいが作業しているが、ホームの下にそれぞれのユーザーが自分の名前でディレクトリを作って作業している
バックエンド側のシステムは詳細は伏せるが、某システムで動いている
仮にNode.js系だとすると、package.jsonがあってnpmrun installでインストールするのだが、普通にインストールしようとするとエラーになる
内容は依存関係で失敗しているのだが、本番も同じソースで動作している
動作させるにはnode_modulesをまるっとコピーして、とのこと
さっきの自分の名前のディレクトリ配下にコピーしてきて、適当なポート番号でサーバを立ち上げれば一応は動く
このため、新しいモジュールを入れようとすると依存関係で失敗するため、便利なモジュールがあってもインストールできないし
セキュリティアップデートも当てることはできない（現にバージョンがすごく古い）
ソースコードはGitHub管理されているがセーブポイント感覚でcommitされているのでコミットログを見ても何が起きているのかさっぱり分からない
おまけにPRも使わずにmainにマージしまくっていてわけがわからない
加えてソースコードはコメントアウトの嵐でどこに何が書いてあるのかさっぱりわからない
データベースはPostgreSQLだが山ほどテーブルがあるのに外部キー依存は入っていないしVIEWも作られていない
まぁ、他にもテーブルを見ていくとアンチパターンのオンパレードで、EAV、ジェイウォークあたりは確認できたしHTMLやSQLが格納されているテーブルも見つけた
ソース上でクエリを作ってAPIを作っているが、ザッと見ただけでもインジェクションし放題の状態になっていた
フロントエンドも詳細は伏せるが、いわゆるReact的なものを利用している
こちらは npmrun installでインストールできるし npmrun devでちゃんと動く
ただ前述の通りバックエンドはローカルで構築できないのでEC2を利用するしかなく、CORS対応のためのプロキシを自前で用意する必要があった
バックエンド同様にGitHub管理されているが、管理しているだけ
バックエンドは5人ぐらいが利用しているが、ソースコードを編集するのは実質1人なのでコンフリクトはほとんど起こさないらしいが
フロントエンドは5人ぐらいが編集するのでコンフリクトしまくっている
解消するときにデグレすることが日常茶飯事でその都度Hotfixしている
コードもコメントアウトだらけなのに加えて、不必要なコードが大量にあるので可読性が著しく低い
（難しい処理を読み解いて追いかけていったら最終的に使われていない、などが大量にある）
2000行ぐらいあるコードとかChatGPTに突っ込んだら20行ぐらいになる予感がある
また、DBがご覧の状態なので取得されるデータも全然抽象化できておらず、コードが膨れ上がっている
例えばProductの一覧データをサーバから取得して、ユーザーがクリックしたProductをCartに投入するのだが、投入する情報はProductではなく、CartItemにする必要があるし
OrderするときはOrderItemにしてAPIを叩く必要がある
ほとんど同じ情報なのだが微妙に変わっていたりKey名が違っていたりするのでそれぞれ変換する
他にも数え上げればキリがないが、コピペして少しだけ改変している部分などが大量にあってバグがあるのかどうかすら判別できない
DBにHTMLやSQLが入っていると言ったが、調べて見るとDBから取得したHTMLをそのまま埋め込んで表示していたりした
SQLについてはフロントエンド側でSQL生成しており、そのテキストをAPIに送り込んでサーバ側で実行して貰った上で格納とかしていたので
「ここにDROPTABLEとか書けばTABLE消えるんですか？」
と聞くと
とか言われたのでことの重大さを伝えたが、まだ対処できていないようだった
認証等はOAuth2を使っていたので大丈夫そうだったが、本当に大丈夫かどうかは自信がもてない
システム内容はゴミのような状態だがサービス的には良いので、幹部やプロダクトオーナーからは追加要望が山盛り来ている
開発チームが「稼働が足りない」という理由で断ったので「じゃぁ支援して」ということで自分のところに来たのだが
「申し訳ないが、そもそもそういうレベルに無いし、全て作り直しが必要」
と伝えてもどうやら伝わっていない様子
ちなみに元々の開発チームは過去にもこんな感じでサービス作ってたらしいが売れないので問題になってなかった様子
ぱっと見は動いているように見えるのが厄介なところ
正直逃げたいところではある
わし「メールでよく使われるmbox形式のファイルを読みたいんや。dotnetならどうするといい？」
Bing先生「MimeKitとかMboxReaderという.NETライブラリがええで」
わし（ほーん、MimeKitええな。。。MboxReaderってどんなんやろ）
わし（あれれ、MboxReaderとかいう.NETライブラリは無いぞ・・）
わし「MboxReaderの詳しいところ教えてや」
どや」
わし「ほーん・・・？」
わし「MboxReaderとかいうライブラリって実在するん？」
Bing先生「するで。これやhttps://github.com/nodemailer/mbox-reader 」
今までだと嘘はすぐに破綻してたはずなのに、今度の嘘はなかなか破綻しないぞ・・・
今、「MboxSharp」とかいう架空の.NETライブラリの説明を受けてる・・・
しかしさすがのBing先生、MimeKit の中の Rfc2047クラスの使い方をちゃんと教えてくれた。
まあ StackOverflow にも書かれてある事をまとめただけではあるが。。
やっぱ先生はすげえんよ。
おあそびでPythonで作った自前のCLIアプリをWebで操作したくなり、Celeryと FastAPIでWebから実行できるようにした。
んでつぎは、オシャレな画面をオシャレにつくりたくてReactでフロントを作ろうと思ってるんだけど、そもそも自分はReactの書き方を知らないんだな。
とはいえ仕事柄、このさきReactから逃げ続けるわけにもいかない。
勉強のため、とりあえずなんかのツールが吐き出す、出来合いのReactのボイラープレートを動かしてみようと思ってるわけだけど
そのためには Vite が要って
そのためにはNode.js 18+ が要って
そのためには nvm-windows が要る（そういえば nvmって、、、Javaの mvnと 紛らわしいですね）
そのためには chocolatey が要る（あ、これは自分のPCに入っている、ラッキー！）
たかがフロントエンドと思ってるなら StreamLitで作ればいいじゃんとか言ってくる人もいるだろうけど、そういうわけにもいかねえのな。
あと今から勉強するならSvelteだとか言ってくるひともいるだろうけど、これも無視。
