巷の「ReactとNext.jsの比較」はここがおかしい、というか比較すること自体が微妙 - honey32
(WIP まとまったら Qiita とかに上げるかも) TLDR; 「React と Next.js を比較」という記事で、 Next.js と比較できるのは「フレームワークなしで React を使うという選択肢」であって、「React そのもの」ではない。 ✅️ React を使うのに 「フレームワークあり」 vs 「フレームワークなし」 ❌️「React」 vs 「Next.js」 それはそうと、「create-react-app の機能・特徴」のことを、「React の機能・特徴」であるかのように書いてしまっている記事が多い create-react-app 自体が擬似的なフレームワーク（といえそう） そもそも、create-react-app は今は更新されてないので create-vite-app を使うべき フレームワークあり or フレームワークなし 【フレームワークあり】
Next.jsを初心者向けツールとして捉えている自分が、実践 Next.js を読んでみて
Next.jsを初心者向けツールとして捉えている自分が、実践 Next.js を読んでみて2024-03-28 この記事は 実践 Next.js の書評です。 見本誌を頂いた上での記事です。（PR記事？） tl;dr App Router のメリットを理解しつつも、学習コストに割り合わないと思っている人にオススメ！ドキュメントを読めるようになるし、学習コストが下がる。 はじめに 自分はどちらかというと今の Next.js に対しては否定的な感情の割合の方が高く、仕事で困らない程度の最低限の知識しか持っていない。 しかし、なんだかんだ勉強の必要性に駆られていて、そのキャッチアップとして同書の発売を楽しみにしていた。 そんな折に @takepepe さんから見本誌をいただいたことで、この週末に読んだので書評を書きたい。 俺は今のNext.jsが好きではない 書評を書く前にポエム書かせてくれ！
PythonでDDDやってみた💪 - techtekt
はじめに 実行環境 ディレクトリ構造 app migrations/model pyproject.toml ソースコードと簡単な解説 app/core app/core/abstract app/core/decorator app/core/exception app/core/interface app/core/middleware app/core/mixin app/ddd app/ddd/application app/ddd/application/schema app/ddd/application/schema/studnet app/ddd/application/usecase app/ddd/application/usecase/student app/ddd/domain app/ddd/domain/student app/ddd/infra app/ddd
Next.js App Router と控えめにお付き合いして普通の Web アプリを配信する | Offers Tech Blog
まずは長いものに巻かれたいときもある Offers を運営している株式会社 overflow の あほむ でございます。 先日 コードベースのディレクトリ構成にフォーカスした記事 を公開した関連記事として、Next.js App Router をどのように取り扱っているかについてご紹介します。 【AD?】今回の記事の内容を含んだり含まなかったりすると思いますが、来週 2024/01/17(水) 19:20 〜 オンライン開催の PWA Night vol.59 で発表予定なので興味のある方はぜひ。（終了済み） 下記は本記事の内容を含むイベント発表資料です。ご参考までに。 今回の前提 前回記事 の引用ですが今回も同様です。 最終目標は単体事業でありつつ実質マルチプロダクトな画面群のリプレース クライアントサイドでヘビーなビジネスロジックを持つ必要がない アプリケーション特性としては SaaS
一休レストランで Next.js App Router から Remix に乗り換えた話 - 一休.com Developers Blog
このエントリーは一休.com Advent Calendar 2023の15日目の記事になります。 CTO 室の恩田です。 現在は一休レストランのフロントエンドのリアーキテクトを手がけています。 今日はその中で Next.js App Router から Remix に乗り換えた話をご紹介したいと思います*1。 背景 6日目の記事で香西から紹介させていただきましたが、2023年10月に一休レストランのスマートフォン用レストラン詳細ページをリニューアルしました。 一休レストランの Rust バックエンドが正式リリースされました。https://t.co/7N4VGv5ej9 このページのスマートフォンビューはバックエンドが Rust で書かれた GraphQL になってます— naoya (@naoya_ito) 2023年10月4日 ちなみにフロントエンドも、旧バージョンは Nuxt v2
「ChatGPT/LangChainによるチャットシステム構築 」という書籍が素晴らしかったのでNode.jsでも書いてみた - selmertsxの素振り日記
はじめに 「ChatGPT/LangChainによるチャットシステム構築」 という本が素晴らしかったので、ちゃんと身につけるために Python だけじゃなくて Node.js でも動かしてみました。同じことをやろうとした人のために、ここにそのときの記録を残します。特に callbacksやmemoryについて、詳細に記載しようと思います。 書籍の説明につながるようなことはできる限り書きません！めっちゃ良書なので、ご興味持っていただけた方は購入してもらえますと 🙏 5章まではPython固有のToolを利用しており、6章の中身は7章とかなり近いところがあるので、7章のプログラムだけここに記載します。LangChainの学習に注力したいので、Serverelss Frameworkに関連するコードは省略しました。また、Momentoや @slack/bolt に関する説明はしません。 プロ
いまNext.jsで新規サービスを立ち上げるときの観点（Router・CSS・認証・監視など/2023年末）
免責事項 社内向けに展開するように雑にまとめました Next.jsの知見が深くない人がリードしてPoCを立ち上げなきゃいけなくなったが、社内的にはNext.jsを推奨しているみたいな場面を想定しています なので自信ないところも多いですが割と断言するように心がけて書いています PoCの立ち上げ想定なので、jest/Storybookなど内部品質面についてあまり深く書くことを避けています ほぼ自分の知識だけで書いており私見も多いですし、そもそも自分自身がトップクラスの知識や視座を有しているわけでもないので、まずは以下の話を理解はした上で、踏襲するかどうかは別途他記事やGitHub、公式ドキュメントなどを漁って判断することを推奨 App RouterかPages Routerか 2023年末現在まだApp Routerは技術記事が足りてきている印象ではないため、社内でノウハウを積極的に貯めていく
個人開発で参考になるNext.jsリポジトリ10選
OpenStatus - ステータスページ App Router Turborepo Drizzle Clerk tRPC Tailwind shadcn/ui LLM Report - OpenAI モニタリング App Router Prisma NextAuth shadcn/ui Stripe Dub - URL 短縮 App Router Turborepo Prisma NextAuth Tailwind Stripe slug - URL 短縮 Prisma NextAuth tRPC Tailwind Cal.com - 日程調整 Turborepo Prisma NextAuth tRPC Tailwind Taxonomy - ブログ App Router Prisma NextAuth Tailwind Rowy - ローコード GUI Firebase Dorf -
｢ChatGPTのiPhone/Android用アプリ｣のダウンロード先と使い方【7月28日更新】
｢ChatGPTのiPhone/Android用アプリ｣のダウンロード先と使い方【7月28日更新】2023.07.28 11:5026,089 かみやまたくみ 2023年5月26日、ChatGPTのiPhone用アプリが日本でも利用可能になりました。Android用も7月28日に公開に。iPhone（iOS）用はこちらから、Android用はこちらからダウンロードできます。 ・アプリ名：ChatGPT ・ダウンロード先：App Store, Google Play Store ・料金：基本無料、アプリ内課金（月額3,000円）アリ なお、これ以外のアプリはそれっぽく見えてもサードパーティ製です。ご注意ください。 ChatGPT公式アプリはどう始めるの？以下、使い方はiPhone用アプリで紹介しますダウンロード後、アプリを開きます。 ① ログイン画面が現れるので、任意のメールアドレスを登録ま
Reactベストプラクティスの宝庫！「bulletproof-react」が勉強になりすぎる件
Reactアプリケーションのアーキテクチャの一例として公開されているGitHubリポジトリ「bulletproof-react」が大変勉強になるので、私自身の見解を交えつつシェアします。 ※2022年11月追記 記事リリースから1年ほど経過して、新しく出てきた情報や考え方を盛り込んだ続編記事を書いていただいているので、こちらも併せて読んでいただければと想います（@t_keshiさんありがとうございます！）。 ディレクトリ構造が勉強になる まずはプロジェクトごとにバラつきがちなディレクトリ構造について。 ソースコードはsrc以下に入れる bulletproof-reactでは、Reactに関するソースコードはsrcディレクトリ以下に格納されています。逆に言えば、ルートディレクトリにcomponentsやutilsといったディレクトリはありません。 たとえばCreate Next Appで作成
Reactでの認証時にJWTをCookieに設定する方法
SPAでの認証といえばJWTを使うことが多いと思いますが、 localStorageに保存するとセキュリティリスクが高いとかで、 CookieにHttpOnlyな値として保存するのが良いとしばしば言われることもあります。 今回はReact × ExpressでJWTをCookieに保存する具体的な方法を紹介します。 （そもそもJWTを使うべきかとか、localStorageを使うことのリスクなどについては要件次第なのであまり言及しません） 調査にあたっては以下の記事を参考にしました。 React Authentication: How to Store JWT in a Cookie 記事の方法そのままでは自分の環境では上手くいかなかったので、ハマりポイントも含めて手順を解説します。 最終的に出来上がったもの JWTをCookieに保存する https://github.com/Kanat
ReactコンポーネントをブルブルさせながらReduxのパフォーマンスチューニング - カミナシ エンジニアブログ
はじめに こんにちは、カミナシ社でソフトウェアエンジニアをやっている浦岡です。 我々は「ノーコードでユーザー独自の現場アプリを作成できる」サービスを開発しています。 そのサービスのフロントエンドの開発にはReact×Reduxを使っているのですが、 サービス特性のため「Reduxのstateがファットになりがち」であったり「コンポーネント間のデータの依存関係が多くなりがち」といった状態に陥ります。 その結果、アプリの反応速度が遅くなりがちです... この記事では、上のような状態に陥った「React×Redux」アプリの高速化の一例をサンプルアプリを用いて説明します。 サンプルアプリについて 今回、Reduxのチュートリアルにあるカウンターアプリを改良し、下のような「モンスターの捕獲記録」アプリを作ります。 サンプルアプリについて Version1(コンポーネントをブルブルさせてみる) まず
[Electron] 設定情報をローカルファイルに簡単保存 - electron-store - ねこの足跡R
設定情報やちょっとしたデータの管理にレンダラープロセスの場合はWebStorageやIndexedDBが利用できますが、メインプロセスでは自力でファイルに保存する処理が必要でちょっと面倒。そんな時に利用するのがelectron-storeです。手軽にデータの永続化ができます。 今回はこのelectron-storeを利用しウィンドウの位置とサイズを記録、次回起動する際に復元するサンプルを作成します。 ソースコード 準備 基本的な原理 利用方法 どこに記録されるの？ サンプル デモ メインプロセス レンダラープロセス おまけ 保存先やファイル名を変更する データファイルを暗号化する Validationを行う 参考ページ ソースコード 実際に稼働するソースはGitHubからも確認できます。 github.com 準備 npmで一発で入ります。 $ npm install electron-s
![[Electron] 設定情報をローカルファイルに簡単保存 - electron-store - ねこの足跡R](https://cdn-ak-scissors.b.st-hatena.com/image/square/5e9be8aef0118268156082aa635bee6a59c75d5f/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fk%2Fkatsube%2F20231125%2F20231125062853.png)
英語勉強は結局何をやったらいいのか - さめたコーヒー
タイトルのとおりですが、 英語日記 発音 この2つです。 まぁよくある「英語の成績最悪だった俺が海外と仕事できるくらいに英語上達した方法」みたいなタイトルでも良かったんですが、もっと結論重視の話をしようと思いました。 なぜならこんな記事は総じて個人の体験談であり、自分に当てはめることができるかどうかわからない話だからです。 実のところ受験英語で十分話せるようになったという人もそれなりにいるのだと思うし、そういう勉強方法が向いているならそれが一番良いでしょう。 というわけで、「俺の環境では動いたよ」話をやっていきます。 英語日記を毎日書く まず日記を毎日書くができない人にこの方法は向いてない気がします。その時点でほとんどの人類に当てはまりません。 が、まぁ、僕の場合は意外と筆まめなところがあって毎日ではないにせよ日記をなんとなく書き続けておりますので、英語日記という学習方法がそれなりに向いて
Learn to Code – Grasshopper
Welcome to Grasshopper, the coding app for beginners Learning to code opens new doorscreates new hobbieslaunches new careersdevelops new skillsexpands your networkopens new doorscreates new hobbieslaunches new careersdevelops new skillsexpands your networkopens new doorscreates new hobbieslaunches new careersdevelops new skillsexpands your networkopens new doorscreates new hobbieslaunches new care
Laravel SaaS: Free Trial Implementation
Laravel is a good framework to create "software-as-a-service" solutions - with monthly payments by users. Usually, it should incorporate some kind of Free Trial mechanism. In this article, will show you my version of how to do it in Laravel 5.8. What are we creating here We take default Laravel app, run artisan make:auth for default registration form;Will add a new timestamp field users.trial_unti
Zennのバックエンドを Google App Engine から Cloud Run へ移行しました（無停止！YES！）
Zennは、Next.js + Ruby on Rails（APIモード）を Google Cloud の App Engine へデプロイして稼働していました。最近、Rails の実行環境を App Engine Flexible から Cloud Run へ移行したので、その記録を残します。 ロードバランサーのバックエンドサービスを付け替えることで実現 最初に、どうやって移行したかです。Zennのバックエンドはもともとロードバランサーで構成されていました。以下の図のように、ロードバランサーの Backend Service より背後を切り替えることにより実現しています。Cloud Run とそこにアクセスするための Serverless NEG はあらかじめ稼働させておくことで、ダウンタイムなしで切り替えられました。 参考：負荷分散 | Google Cloud https://clo
Jest・Supertestを使用したnode.js(Express)のAPIテスト app.listen()はエラーになる - Qiita
Jest・Supertestを使用したnode.js(Express)のAPIテスト app.listen()はエラーになるJavaScriptNode.jsExpressテストJest はじめに Jest・SupertestでAPIテストを作成した際に躓いたので、その実装の備忘録を残しておく。 この記事ではnode.js(Express)のAPIテストを実行できるようになる部分までを記載した。より実践的にはAPIテストのエンドポイントのメソッドでWeb APIをcallしているような場合は、それをmock化してWeb APIがcallされないようにすべきであるが、それについてはmockを使ったNode.js(Express)のAPIテストを参照。 （実際にテストを作る中でトラブって困った事もトラブった事として残した。） どうやってExpressのAPI(End Point)テストをjes
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
hitobase - アプリ・配信・最新技術に強い開発チーム
NestJSで簡単なtudoリストを実装するチュートリアル