はてなキーワード: Vueとは
「フロントエンド不要論」は、最近の開発現場やサーバーレス、クラウド技術の進化に関わっている人たちの間でリアルに実感されている問題です。
• React, Vue, Angular などのフレームワークがどんどん複雑化
• フロントエンドとバックエンドの分離が、**「本当に効率的か?」**という疑問が生じている
• 「最終的にHTMLを描画するだけなら、サーバーでやればよくない?」
• フロントエンドから直接APIを叩く構成では、「APIを守る」ことが難しい
• XSS, CSRF, CORSといった脆弱性に対処し続けるコストが無駄
🚩 3. サーバーレス・クラウド技術が進化し、APIの負担を減らす方向に
• AWS Lambda, API Gateway, Cognitoなどのサーバーレス技術が進化
• フロントエンドがAPIを叩くより、サーバー側で直接処理する方が効率的
• 以前はReactを使用 → ReactをやめてHTMLベースに戻した
• React, Vue, Angularを全廃
• JavaScriptなしで動的なページを実現
3. Laravel(Livewire)
4. Shopify(GraphQLでデータを直接取得)
• フロントエンドを完全分離する構成から、「バックエンドがHTMLを返せばいい」 というシンプルな構成へ移行
• APIの負担を減らすことで、開発効率とセキュリティを向上
✅ サーバーレス時代の最適解:「フロントエンド不要アーキテクチャ」
「フロントエンドを捨てて、サーバーがすべての処理を担う」方向に移行するのが最適解になりつつある。
📌 最適なアーキテクチャ
ブラウザ → サーバー(PHP, Node.js, Go) → API Gateway(Cognito認証)
📌 具体的な実装例(PHP + Cognito + API Gateway)
require 'vendor/autoload.php';
use Aws\CognitoIdentityProvider\CognitoIdentityProviderClient;
use Aws\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 |
私デザイナーだけどVue.jsとか、Javascript書けるならできるよー!ってエンジニアさんに言われたけどむずかったわ!!!
でもすごい頑張ってちょっとだけ書いたらウケてた。
ワイはvueで満足しとるやで
フロントエンドにクリーンアーキテクチャとかDDDの考え方入れようとしてみたんよな。
具体的には、外部APIやローカルストレージとのやり取りをlinterで限定したり、業務知識はライブラリに依存しないEntityとしてモデリングしたり、
あと、Service層みたいなの導入して、テストしにくい処理とかは抽象化してDIできるようにしようとした。
テスト時にモックをDIせずにglobalスコープで上書きしたり、コンポーネントがAPIから取得したDTOみたいなデータに直接依存してたり、バックエンドと文化がだいぶ違うなって感じた。
そもそもクリーンアーキテクチャとかDDDってフロントに適用するもんじゃないのか?って疑問も湧いてきた。
バックエンドだとフレームワークに依存しすぎないようにして、例えばSpring+RESTからgRPCに移行なんてのもクリーンアーキテクチャの思想に則って作ってれば規模にはよるけどそこまで大きくならなかったりするけど、
ReactからVueに切り替えるって考えて、どんなに設計頑張っても、それってほぼ作り直しになるだろうし、バックエンドほどのメリットも感じられない気がする。
俺が目指してるのってなんか根本的に間違ってる気もするんだが、どうなんだろうか?
フロントエンドの人教えてー
去年から稼働している現場で、以前からあったReact Nativeの面倒を見ているんだがまあこれがひどい出来なんだ。
jQuery時代に見かけたようなコードをやたら見かけたので思わず懐かしくなってしまった。
リファクタリングしようとしたけど直す範囲が広すぎてアプリを壊しかねなかったので、早々に諦めてだましだまし保守をしていた。
そんな中今年に入ってアプリのリニューアルの話が出てきた。React Native捨ててSwift/KotlinやらFlutterに書き換えるとかそういうのではなく、デザインの刷新といくつかの機能改修。
このままだとアプリが更に魔窟化するので、マネージャーに色々相談したところいくつかの事実がわかった。
ということだった。
結局現状のまま進めるわけにはいかず、要件定義の傍らリファクタリング作業をしている。
そういう経緯もあったので、リファクタリングとテストの工数も積んだ上で見積もりだしてもらってる。
「レガシーアーキテクチャをモダンアーキテクチャに刷新」なんてよく聞く話しだけど、
実態は「長年の増改築とだましだましのリフォームが限界になってきたので新築で建て替えます」何だと思う。
最近は「Vue.jsからRemixにマイグレーション」なんて見かけるけど、悪いのはVue.jsじゃなくて禄に設計しないでコード書いてるエンジニアと、
リファクタリングには予算でないけどマイグレーションなら予算取れるという悪しき風習。
年がら年中フロントエンド刷新しているような会社は地雷なので行かないほうがいい。
キミたちがすでにReactやVueやTypeScriptを鮮やかにコーディングできることはよく知っている。
だが、弊社が運用更新保守業務を請け負っているサイトの中には、いにしえの「XHTML」で書かれたものがまだちらほら残っている。10年以上リニューアルしていないような古めかしいサイトに多い。
そのうちのどれかを、君たちの誰かが担当することがあるかもしれない。
その時はぜひ気をつけてほしい。
<img />、<br /> のように自分で自分を閉じるスラッシュを必ず書くのがXHTMLのルールだ。
もちろんこんなルールに丁寧に従わなくても表示は正しくされる。
だが、ソースをバリデータに通せば閉じスラッシュのない空要素はすべて文法エラーとされる。
納品先の意地悪な情シスがいちいちバリデーションして結果にケチをつけてくることだってある。
そういう隙のない納品物を目指してくれ。
なお、いくつかのXHTMLサイトは君たちの先輩が組んだものだ。CSSには君たちの知らない謎のテクニックがたくさん書かれているだろうが、それを参考にする必要はない。当時はそうするしかなかったが、もはや無用のものばかりだ。
だが、それを見てキモいとかダサいとか大きな声で嘲笑してはいけない。それを組んだ人は案外近くの席に座っていたりするからだ。傷つくんだ、けっこう。
例えばInstagramやFacebookに近しいものとか。
インフラはできればAWSで作る。Firebase(NoSQL)で作ってAWS(RDS)に移行するなどできればもはや完璧。
フロントはWebでもモバイルでもいいけど、WebであればReact, Vue、モバイルであればFlutter, Swiftを使う。
WebであればSSL化、モバイルであればApp Storeに掲載までは必須。実績として見れられるものがあることが大事。
ここまでが最短で半年くらい。
あとはこれを材料にフリーランスを探せば良い。やったことないけどココナラを挟むという人もいるらしい。
これだけの実績があれば月単価50万なら案件ゴロゴロ見つかる。
いきなり60(年720)は見つからなくとも、50スタートで経験積めば60はすぐにいく。
なんだかんだ人が足りないというところは山ほどある。
最近は最前線から離れててあんまり追えてないけど、現役のときの2008年くらいから10年くらいの間で、仕事のやり方や設計の考え方が大きく変わったIT技術要素で、いまぱっと思い浮かぶのはこんな感じかな。
分野にもよるし、調査して試作した結果自分の業務には採用しなかった技術とかもある。流行ると思って使えるようになったけど流行らなかった技術を入れるとたぶんもっとある。
あと、新機種が出てOSが新しくなったり、ミドルウェアの新バージョン対応、テスト手法の進化もけっこうカロリー高いけどここには書いてない。
「自分はフロントエンド専門でReactしかやらない」みたいに分野を絞れば大分減るけど、その技術が何年持つかわからないから普通はリスクヘッジのために他の技術も齧らざるを得ないし、バックエンドとかの人と議論するのに結局他分野の知識もそれなりに必要。
NoSQL(memcached, Redis, Cassandra)
クラウドアーキテクチャ、XaaS(AWS, Google Cloud, MicrosoftAzure)
CI/CD(Travis CI, CircleCI, Jenkins)
トランスパイラ(Browserify, webpack, CoffeeScript, TypeScript)
型システム(Rust, TypeScript, Haskell)
オーケストレーション(Ansible, Kubernetes, Terraform)
機械学習(Python, MATLAB, 線形代数等数学知識)
SPA(React, AngularJS, Ember.js, Vue.js)
3Dゲームエンジン(Unreal Engine無償化、Unity5)の他分野への普及
GraphQL
機械学習ライブラリ(Tensorflow, PyTorch, Chainer)
Jupyter Notebook
NFT