こんにちは、CX事業本部Delivery部サーバーサイドチームのmorimorkochanです。 突然ですが「あぁ〜管理画面作るのめんどくせ〜」って思うことはないですか？ 例えばRDBと接続されたRESTfulなAPIサーバーを作っていて、一部の管理者向けに管理画面を作りたいが管理画面にこだわりがない場合などなど。 そんな時に便利なのが、Admin.jsです。Admin.jsは管理画面を簡単に作成できるフレームワークです。オープンソースとして公開されており、クラウドにデプロイされているサービスを利用する場合は月額料金がかかりますが手動でサーバーに組み込んでデプロイする場合は無料です。 Admin.jsを使うと、RDBで管理される各テーブルごとにCRUD画面を簡単に作成することができます。これによってRDBと同じプロパティを何度も定義したり同じようなCRUDコードを何度も記述する必要はありま
はじめに プレースホルダというスタートアップのWebエンジニア兼マネージャーのAkahoriです。 弊社はエンジニアは10人以上いるものの、Webエンジニアは私含め3人ほどです。 3人のWebチームで、どのような理由で、どのような技術を使っているか、苦労している点などを共有します。 サービス概要 先月、リトルスパークというサービスをリリースしました。 子ども向けの、オンラインでの習い事プラットフォームで、先生と生徒をマッチングしています。 技術的にはいくつかの特徴を持ち、今回サンプルとして解説します。 授業はライブ授業のみで、お互いにZoomで行います。 ZoomのIDは弊社で管理し、先生側、生徒側、双方が参加ボタン１つで参加できるようになっています。 コース登録（審査有り）や日程登録、プロフィール更新などは全て先生が行うため、その仕組みがあります。 言語・フレームワーク・ライブラリ サー
Next.js, Prisma, GraphQL Code Generator で作るフルスタック Web アプリケーション
Next.js, Prisma, GraphQL Code Generator で作るフルスタック Web アプリケーション おもにNext.js、Prisma、GraphQL Code Generatorを用いたWebアプリケーションの構築手法について解説した書籍となります。 上記技術に加えて、以下の技術も採用しています。 ・Tailwind CSS ・NextAuth.js ・Apollo GraphQL ・Prettier ・ESLint ・Vitest ・React Testing Library ・GitHub Actions モダンなWebアプリケーションの開発手法について興味がある方にオススメです。 1章 Next.jsのセットアップ 2章 Prismaのセットアップ 3章 GraphQL Code Generatorのセットアップ 4章 テストコードの追加 5章 本番環境へ
Auth.js v5ではじめる本格認証入門
Next.js 14 / Auth.js v5 / Prisma / Planet Scale / shadcn/ui / Tailwind CSS を用いた認証・認可をハンズオン形式で学びます。
今年も GitHub のトレンドで 2021 年の JavaScript/TypeScript を振り返ります。去年の記事はこちらです。 — GitHub のトレンドで振り返る 2020 年の JavaScript | WEB EGG 集計方法 GitHub トレンドは過去の履歴を公式に提供していないため、非公式に集計されたデータを利用しています。 データソースはlarsbijl/trending_archiveを使用 去年はxiaobaiha/github-trending-historyを利用したが今年のデータは無かったので変更 日ごとにまとめた markdown になっており、remark で AST→ データ化しました 集計期間は 2021/01/01 から 2021/12/15 まで 対象言語はJavaScriptとTypeScriptのみ 集計後のデータはこちらのスプレッドシー
2019-nCoVについてのメモとリンク
リンク集目次 国内外の状況 政府機関・国際機関等 学術情報 疫学論文 分子生物学／ウイルス学論文 臨床論文 インフォデミック関係 ワクチン関係 変異株関係 時系列メモ目次 新型コロナウイルス（2020年1月6日，11日） インペリグループによる患者数推定（2020年1月18日） 患者数急増，西浦さんたちの論文（2020年1月20日，23日） WHOはPHEIC宣言せず（2020年1月23-24日） 絶対リスクと相対リスク（2020年1月26日） 研究ラッシュが起こるかも（2020年1月27日） なぜ新感染症でなく指定感染症なのか？ なぜ厚労省令でなく閣議決定なのか？（2020年1月27日） コロナウイルスに対する個人防御（2020年1月27日） 国内ヒト＝ヒト感染発生（2020年1月28日） フォローアップセンター設置，緊急避難等（2020年1月29日） PHEICの宣言（2020年1月3
【個人開発】最新のNext.js+NextAuth.js+prisma+microCMSでECサイト作ってみた【フルスタックアプリケーション】 - Qiita
【個人開発】最新のNext.js+NextAuth.js+prisma+microCMSでECサイト作ってみた【フルスタックアプリケーション】TypeScriptフロントエンド個人開発Next.jsprisma はじめに 皆さんこんにちは、mamiなのだ！ 今回はバックエンドは作らずにNextAuth.jsやprisma、microCMSなどを利用してNext.jsでECサイトを作成してみたので、その方法や手順などを公開しつつ、認証周りや大型開発案件でも採用されるstorybookなどについても解説していこうと思うのだ！ フロントを勉強し始めた初学者さんや、フロントがメインではないバックエンドエンジニアの方に向けて、丁寧に解説を挟みながら書いていくので「へ〜フロントってこんな感じのことやってるんだ〜」と思ってくれたら嬉しいのだ！ ちなみにこの記事は丁寧に解説しすぎて死ぬほど長くなってしまっ
NestJSをゼロから学ぶ - TypeORMの活用などをREST APIの実装から身に付けよう【Node.jsフレームワークの基本】｜ハイクラス転職・求人情報サイト AMBI（アンビ）
このようにさまざまなデコレータが用意されていますが、今回はサンプルで利用するデコレータに絞って説明します。他のデコレータについては、NestJSの公式ドキュメントなどを参照してください。 依存性注入（DI） 依存性注入（DI、Dependency Injection）とは、クラスの依存関係を解決する仕組みです。NestJSでは、依存性注入を使ってクラスの依存関係を解決します。 クラスの依存関係とは、クラスが他のクラスに依存している関係のことです。例えば、次のようなクラスAがあったとします。このクラスは他のクラスに依存していません。@Injectable()デコレータを使って、サービスを定義します。 @Injectable() class A { constructor() {} } そして、次のようなクラスBがあったとします。このクラスは、@Inject()デコレータを使って依存性を注入し
昨年から執筆を続けていた書籍が 4/24 に刊行します。「フロントエンド開発のためのテスト入門」という本です。 書籍ならではのテストコード解説を目指して 次の投票結果は、書籍企画時に持ち込んだ筆者のツイートです。フロントエンドテストに関していえば、8 割近くの方が何かしら不安や不足を感じている、という結果になりました。 不安や不足の原因は様々なものがあるかと思います。そのうち、筆者が着目したのは「テスト手法の豊富さ」です。「単体テスト・結合テスト・E2E テスト、何をどれほど書けばよいのか？」という疑問は、フロントエンドに限らず、はじめて自動テストに取り組まれる方が通る関門ではないでしょうか。 自動テストを書くには「テスト対象」を明確にしたうえで、テスト対象に適したテストコードを書く必要があります。本書は、現場で書かれるものに近い「テスト対象 = アプリケーションコード」をサンプルとして用
今年も GitHub トレンドから 2022 年の JavaScript/TypeScript を振り返ります。去年の記事はこちらです。 — GitHub のトレンドで振り返る 2021 年の JavaScript | WEB EGG 集計方法 本記事の集計期間は 2022/01/01〜2022/12/07、対象言語は JavaScript および TypeScript です。 なお GitHub がそのリポジトリをなんの言語と見なしてトレンドに掲載したかをもとに集計対象を決定していることにご留意ください。 別言語で書かれた Rust 製の JS 向けのツールや CSS フレームワークなどは基本的に対象外となります。 集計に利用したデータですが、GitHub は過去のトレンドを閲覧する方法を提供していないため、独自の仕組みで GitHub トレンドのアーカイブを生成しそのデータを利用しまし
はじめに Next.js を Cloudflare にホスティングしようとすると、必然的に Edge Runtime 環境になります。しかし、Edge Runtime 環境では、Node.js Runtime と異なり、Prisma がそのまま使えません。 最初に思い浮かぶ解決策は Prisma Accelerate です。Prisma Accelerate は公式のサービスで、接続プールイングやグローバルキャッシュ機能を備えており、Edge Runtime でも Prisma を使えるようにします。 しかし、無料プランだと月に 6 万クエリの制限があり、本番運用には不安が残ります。 そこで、今回は Prisma Accelerate を自前で Cloudflare Workers 上に構築し、本番運用に耐えうるサービスを無料で開発する方法を紹介します。この方法なら、無料プランでも 月に
最高のマスターデータ管理手法考察 & VSCode Extension を活用した話 / developing masterdata management tool by using vscode extension
GeekGig 『スタディサプリ x Showcase Gig』 〜フロントエンドを楽しむ〜 Links: p.6 [Deep Environment Parity CDNT 2019 - Speaker Deck](https://speakerdeck.com/spring_mt/deep-environment-parity-cdnt-2019) p.13 [GraphQL を利用したアーキテクチャの勘所 / Architecture practices with GraphQL - Speaker Deck](https://speakerdeck.com/qsona/architecture-practices-with-graphql) p.13 [GraphQL と Prisma から考える次のN年を見据えた技術選定 - 森 久太郎 / qsona | JSConf JP](
Hotwireの良かった点、辛かった点、向いているケース、向いていないケース - 猫Rails
（自分はRailsを書くことが多く、フロントエンドの経験は乏しいです。見方にだいぶ偏りがあると思いますので、そのあたり差し引いてお読みいただければと思います〜🙇♂️） こんにちは〜。Hotwireを仕事で使う機会があったので、実際に使ってみて感じた、良かった点、辛かった点、向いているケース、向いていないケースを共有します〜。 Hotwireとは？ Turbo Driveとは？ Turbo Framesとは？ Turbo Streamsとは？ Stimulusとは？ Hotwireのデモ 良かった点 サーバーサイドに集中できる Railsの資産をフルに活かせる 後付けで段階的にSPA風の挙動を追加できる 学習コストが低い 開発コストが低い WebSocketは必須ではない 辛かった点・辛くなりそうな点 DOM更新時にレスポンスを待たないといけない SPAのユーザー体験とはだいぶ違う He
[2023-01-31 12:00 JST 更新] JWTのシークレットポイズニングに関する問題
By Artur Oleyarsh January 10, 2023 at 12:33 AM Category: Cloud, Vulnerability Tags: CVE-2022-23529, exploit, open source, Prisma Cloud, remote code execution, Vulnerability Exploitation 2019年1月30日 PST 本脆弱性の悪用シナリオの前提条件に関するコミュニティからのフィードバックを受け、私たちはAuth0と協力してCVE-2022-23529を撤回することを決定しました。 本稿で解説したセキュリティの問題はJsonWebTokenライブラリが安全でない方法で使用された場合には依然として懸念されるものです。そのシナリオでは、すべての前提条件を満たせばこの問題を悪用できる可能性があります。私たちは、その
![[2023-01-31 12:00 JST 更新] JWTのシークレットポイズニングに関する問題](https://cdn-ak-scissors.b.st-hatena.com/image/square/d5fd8fbb78690994f0d69b816752b350c4fdb30b/height=288;version=1;width=512/https%3A%2F%2Funit42.paloaltonetworks.jp%2Fwp-content%2Fuploads%2F2023%2F01%2FCloud-providers.png)
TSKaigi 2024 ref: https://tskaigi.org/talks/tockn
この記事は一休.com Advent Calendar 2023 25日目の記事です。 一休レストランでは、よりスムーズな予約体験の提供を目的とするシステムのリニューアルを進めています。その一環として、2023年10月から、レストラン個別ページの表示から予約までのスマートフォンビューにおいて、バックエンドのサーバをRustで書かれたものに置き換えました。 一休レストランの Rust バックエンドが正式リリースされました。https://t.co/7N4VGv5ej9 このページのスマートフォンビューはバックエンドが Rust で書かれた GraphQL になってます— naoya (@naoya_ito) October 4, 2023 本番運用が始まって3か月近く経ちましたが、これまで安定して継続的な開発と運用ができています。これはRustだからと構えることなく、「ふつう」のバックエンド
blitz-js prisma rails 倒し方
この記事の内容 blitz-js が生まれた背景 prisma の紹介 blitz で簡単なブログを作ってみる blitz を vercel にデプロイしてみる tldr blitz-js は next.js + prisma で rails を再現しようとしているフレームワーク Prisma ORM それ自体が良い。blitz の理解のためにも、まず Prisma を学べ blitz-js 自体はまだ α 品質だけど、今から注目しておく価値はある。デファクトになるかは不明。思想は継承されそう。 はじめに next.js はとても良いフレームワークだが、永続層を持たない。なのでフロントエンドとフロントサーバーに閉じている。 永続層、つまり DB を持たないので、初学者や流行りのプログラミングスクールの教材に選ばれない。また、JavaScript の学習資料が散らばっている。 要は Rail
How to Build a Fullstack App with Next.js, Prisma, & PostgreSQL
How to Build a Fullstack App with Next.js, Prisma, and Vercel Postgres Prisma is a next-generation ORM that can be used to access a database in Node.js and TypeScript applications. In this guide, you'll learn how to implement a sample fullstack blogging application using the following technologies: Next.js as the React frameworkNext.js API Routes for server-side API routes as the backendPrisma as
一意な識別子の生成でUUID/ULID/CUID/Nano IDなど検討してみた - Sweet Escape
最近、一意な識別子について検討することがあったのでその検討メモ。 一意な識別子とは つまり、重複しない、ユニークな識別子（Identifier, 以下id）のこと。ここではRDBのテーブルにおける主キーとして使うことを想定かつ前提としている。したがって、主キーの要件であるユニーク性を持ったidをどうやって生成していくか。 そんなのDBの連番でいいじゃんて話もあるがここではその話はせず、あくまでも一意な識別子をどう生成するかの話に絞る。 選択肢 一番有名だと思われるUUIDを筆頭にいくつかの選択肢がある。 UUID ULID CUID Nano ID 他にもTwitter発のSnowflakeとか今はDeprecatedになってるshortidなどがあるが、キリがないのでここでは上記の4種類だけで簡単に比較した。また、実際にはUUIDはバージョンによってSpecが異なるがここではバージョン4
はじめに こんにちは、レバテック開発部の河村です。 私はレバテック各種メディアのリプレイスを担当しており、バックエンドを中心にフルスタック開発を行っています。 今回は管理画面のリリースで採用した、フルスタックフレームワークであるfrourioについて、frourioを採用した理由や使ってみて良かったこと、困ったことを紹介します。 この記事を通して、frourioのメリット、デメリットだけでなく、レバテック開発部ではどのような背景のもと、技術・アーキテクチャの選定を行っているのか、どれくらいのスピード感で開発を行っているのかをお伝えできればと思います。 なお、この記事ではfrourioにおける環境構築や使い方等の説明は割愛させていただきます。 開発背景・経緯 今回、開発する対象となった管理画面は、レバテックの各メディアで運用する記事やセミナー情報、エントリー情報を管理するものになります。 す
70年代と80年代の間には、まず制作者の大きな壁があった。70年代におおきなアニメブームが起こり、その影響でオタクがアニメ業界で作る側に加わった。庵野秀明や河森正治の世代ね。だから80年代になると「仕事」じゃなく「趣味」的に絵作りにこだわるクリエイターが出てきて、それまでと画面の密度が一変した（例えば79年のガンダムと85年のZガンダムはもう別物） そして90年代と00年代のアニメもまったく異なったルックを見せる。これは何といってもデジタル環境への移行がある。デジタルといっても作画は人力で行うのだが、その後の色塗り、撮影などをコンピューター上で行えるようになった。アナログセルが使われなくなったことでぱっと見ても画面がまるで違って見える 増田の言うこともわかるが、ただ現在と10年前のアニメ作品の絵作りは結構違うと思う。最近は新海誠やufotable作品の影響か、とにかくどの作品も「撮影」にえ
この本では、TypeScriptで型安全にGraphQLサーバーを構築する方法をハンズオン形式で学習することができます。 Todoアプリの開発を通して、GraphQLスキーマの扱いやCLIツールの設定方法、TypeScriptのORMであるPrismaの基本的な使用方法、CI/CDパイプラインの構築によるマイグレーションの自動化などを体験します。 GraphQLサーバー実装の素振りをしておきたい方や、フロントエンドからGraphQL APIを使用したことはあるけど自分でAPIを実装したことはないようなバックエンドの開発初心者の方に向けた内容となっております。
OSSとしてリリースされたばかりのReactベースのフルスタックWebフレームワークであるRemixをためしてみました。 はじめに こんにちは、CX事業本部MAD事業部の森茂です。 re:Inventを前にAWSの情報も気になるところですが、フロントエンド界隈もReact Conf 2021を前にReact v18 betaをはじめ、Next.js v12やReact Router v6、新しいRoutingライブラリReact Locationのリリースなどなど注目のリリースラッシュが続いているようです。そんな中Reactをベースにした新しいフレームワークであるRemixが本日（2021/11/23日本時間）リリースされました。 Remixとは RemixはReactRouterの作者でもあるMichael Jackson氏（@mjackson）とRyan Florence氏（@ryan
達人出版会
探検! Python Flask Robert Picard, 濱野 司(訳) BareMetalで遊ぶ Raspberry Pi 西永俊文 なるほどUnixプロセス ― Rubyで学ぶUnixの基礎 Jesse Storimer, 島田浩二(翻訳), 角谷信太郎(翻訳) 知る、読む、使う！ オープンソースライセンス 可知豊 きつねさんでもわかるLLVM 柏木餅子, 風薬 R／RStudioでやさしく学ぶプログラミングとデータ分析 掌田津耶乃 データサイエンティストのための特徴量エンジニアリング Soledad Galli(著), 松田晃一(訳) 実践力をアップする Pythonによるアルゴリズムの教科書 クジラ飛行机 スッキリわかるサーブレット＆JSP入門 第4版 国本 大悟(著), 株式会社フレアリンク(監修) 徹底攻略 基本情報技術者教科書 令和6年度 株式会社わくわくスタディワール
前置き この記事で紹介するアーキテクチャはあくまで机上論であり、筆者が実際にこれらのアーキテクチャでサービスを運用したことがあるわけではありません。 そのため、考慮漏れ等あるかもしれません。その際はご指摘いただけますと幸いです。 モチベーション 個人開発でアプリケーションを作って運用したい！ お金は極力かけたくない！ けどいい感じのツールを組み合わせてクールなアーキテクチャにしたい！ 対象とするアプリケーションの概要 ブラウザで動くウェブアプリケーション 認証機能を持つ DBはNoSQLではなくRDB アプリケーション本体とは別に管理画面アプリケーションが必要 以上を前提として考えました。 ぼくのかんがえたさいきょうあーきてくちゃ こちらです。 コンポーネントごとに解説させてください。 フロントサーバー Next.js on Vercelです。 こちらはもはや説明不要の王道構成かと思います
Cloudflare、CDNエッジからMySQLやPostgreSQLへ接続を可能にする「Relational Database Connectors」発表
Cloudflare、CDNエッジからMySQLやPostgreSQLへ接続を可能にする「Relational Database Connectors」発表 Cloudflareは、CDNエッジで実行しているWorkersなどのアプリケーションからMySQLやPostgreSQLなどのリレーショナルデータベースに接続する機能を提供する「Relational Database Connectors」を発表しました。 Today, we’re announcing support for relational databases, including Postgres and MySQL from Workers. https://t.co/usLsYczxhr #FullStackWeek — Cloudflare (@Cloudflare) November 15, 2021 Cloudf
Cloudflare Zero Trustを導入してみた - POC環境構築編 - メモのページ - チラシの裏メモ 3枚目
ゼロトラスト ネットワーク(ZTN)の学習用環境として、Cloudflare Zero Trustを自宅に導入してみた。 今回はCloudflare Zero Trust導入手順のメモ。 2023/7/8追記 ポリシーの設定やOktaとの連携等の記事は、当記事内下部の「Cloudflare Zero Trust関連の記事」のリンク先を参照。 Cloudflare Zero Trustとは CDN事業者として知られているClaudflare社が提供するゼロトラスト セキュリティソリューションである。 SWG(Secure Web Gateway)と呼ばれるクラウド型のプロキシサービス、IPアドレスの匿名化、アンチウイルス・アンチマルウェア、URLフィルタリング、アプリケーションフィルター等のサービスを提供する。 Cloudflare Zero Trustと競合する主なゼロトラストネットワーク
Rails+Next.jsでGraphQLを導入する時に考えたこと - Timee Product Team Blog
こんにちは、タイミー開発プラットフォームチームで業務委託として働いている宮城です。 タイミーはリリースから4年が経過したプロダクトで、2022年の前半から一部領域でGraphQLを利用し始め現在導入を進めています。 本記事では、GraphQLをプロダクトに導入する上で判断に迷った箇所や課題に対して、タイミーでの意思決定とその理由を紹介します。参考にしていただければ幸いです。 GraphQLの選定理由についてはこの記事では触れませんが、CTOの@kameike が以下のイベントで詳しく紹介する予定です。まだ参加申し込みは可能ですので、興味がある方はぜひ合わせてご覧ください。 timeedev.connpass.com なお、本記事のタイトルはソウゾウさんの以下の記事にインスパイアされています。 engineering.mercari.com GraphQLの「Getting Startedの
次世代フレームワークRemixで簡単なフルスタック開発を体験する - RAKUS Developers Blog | ラクス エンジニアブログ
はじめに こんにちは。フロントエンド開発課に所属している新卒1年目のm_you_sanと申します。 最近話題のRemixを使って、シンプルなTodoアプリを作成する方法をご紹介します。 Todoアプリの作成を通じて、簡単なフルスタック開発を体験していただければと思います。 はじめに プロジェクトの作成 モデルの定義 Root Routeについて ルーティングについて 一覧画面の作成 新規追加画面の作成 編集画面の作成 削除機能の追加 まとめ プロジェクトの作成 はじめに以下のコマンドを実行して、プロジェクトを作成します。 ※Node.js v18以上、npm v7以上がインストールされていることが前提です。 npx create-remix@latest --template remix-run/indie-stack 今回はindie-stackというテンプレートを使用しています。 この
はじめに 最近話題の frourio をご存知でしょうか？ TypeScriptフルスタック環境 を一発で作れるフレームワークです。実際に試してみると分かりますが、簡単に環境構築が出来ます。 こんな簡単に作れるなら、試しにアプリを作って外部に公開するとこまでやってみたいですよね。 この記事では、その環境を Vercel と Heroku を利用し、無料でサクッとデプロイする手順を紹介します。 全体構成 デプロイ先としては、フロントエンドは Vercel 、バックエンドは Heroku を選択しました。 選択理由 選択理由としては以下です。今回は "無料でサクッと" がコンセプトなのでポイントと考えています。 基本的に無料で利用可能なこと インフラレイヤを意識せずに簡単なセットアップで利用可能なこと Vercel と Heroku について Vercel Vercel は Next.js を
【新機能】Vercel Postgres + Next.js + PrismaでフルスタックWebアプリケーションを作ってみた
はじめに GWに入り、5日連続のVercelによる新機能の発表が始まりました。早速初日(2023 5/1)からすさまじい機能の発表がありました。 初日に発表されたのは、以下の三つのStorageサービスです。 Vercel Postgres Vercel KV Vercel Blob 今回はこの中のVercel Postgresを実際に使いながら、ClientからServerまで網羅しためっちゃ簡易的なフルスタックなアプリケーションを、実用性の側面も加味してPrisma + Next.jsで作っていこうと思います。
私が働いているAniqueという会社では、1年前に全てのソフトウェアでTypescriptを採用することにしました。私たちが開発している進撃の巨人のNFTサービス “Attack on Titan: Legacy” でも採用しています。 TypescriptではNestJSという素晴らしいAPIフレームワークを利用することができ、生産性高く開発を続けることができます。また、私たちはフロントエンドでNext.jsを利用しています。言語レベルでのコンテキストスイッチを抑えることで、一人のエンジニアがフロントエンドとバックエンドのどちらもの機能を開発する環境が作れました。 しかし、Nodeならではの作法や設計について、Web上にはたくさんの情報があるものの、あまりにも情報が多すぎて、まとまったプラクティスになかなか出会うことができませんでした。そのため、最初はチーム内での共通認識を作るのに苦労し
というタイトルで先日 Kaigi on Rails 2021 で話してきました。 プレゼンで話せなかった内容なども含めてブログ記事にも書いておきます。 Intro Railsのことはけっこう知ってるけどNext.jsについて何も知らないという人をターゲットにしてNext.jsとは一体何なのか、いつどこで使えばいいのか、具体的にNext.jsのどういうところがいいのか、どういう機能があるのかという話をします。 最終的には普段Railsを書いているエンジニアが、Next.jsよさそうなんで使ってみようかな？と思ってもらえるといいかなと思っています。 Next.jsとは何か Next.jsのトップページを見てみましょう。 The React Framework for Production と書いてあります。これは読んで字のごとくですが、Next.jsというのはReactをベースにしたフレームワ
JavaScriptランタイムのBun、インストール不要の実行ファイル生成が可能に。Webpackより200倍以上高速とするバンドラがβ版、Puppeteerにも対応
JavaScriptランタイムのBun、インストール不要の実行ファイル生成が可能に。Webpackより200倍以上高速とするバンドラがβ版、Puppeteerにも対応 サーバサイドで実行可能なJavaScriptランタイム「Bun」は、5月に登場したバージョン0.6で、Bunをインストールすることなく、配置することでアプリケーションを実行できる単独の実行ファイルを生成できる「bun build」機能が搭載されました。 同じくバージョン0.6で高速なバンドラ「Bun Bundler」もβ版となり、6月に登場したバージョン0.6.7ではDiscordのボットを操作するDiscord.jsやWebブラウザを操作するPuppeteerなどの動作も確認されています。 下記はBunの開発者であるJarred Summer氏のツイート。 Standalone executables are coming
Next.js に Prisma ORM を導入する方法について解説します。 Next.js プロジェクトの雛形を作成 $ mkdir hello-next-app && cd hello-next-app $ npm init -y $ npm install next react react-dom --save $ npm install typescript @types/node @types/react --save-dev $ code src/index.tsx
毎年なにかを殺さないと気が済まないエンジニアのみんなが書いたなんとかis deadの記事をまとめてみた。 PHP id deadPHPはもうすぐ死ぬPHP is deadその2CakePHP is deadRuby is deadRuby is dead? 2019Ruby on Rails is dead?2019Ruby on Rails is deadRuby on Rails is dead?その1Ruby on Rails is dead?その2Ruby on Rails is deadその3Python is deadReact is deadnodejs is deadJava is deadGCP is deadVim is dead 2013emacs is dead 2014emacs is dead （英訳） 所感 現在使われている技術を死んだとかもうだめとかいうのは
技術のトレンドと開発テクニックの知見を、無料で公開します！ いかに無駄な努力をせず、効果的にトレンドに沿ったアプリ開発ができるかを研究してきました。 この記事は、定期的にトレンドに沿って更新していこうと思います。 twitterもやってます！ 今後も情報発信しようと思うので、フォローお願いします！ https://twitter.com/joer_sbt 自分が一番知見のある、フロントエンドの分野中心に見解を述べたいと思います。 結論から言うと、 React, Next.js, Typescript, Tailwind, react-query, prettier, Stylelint, auth0, tRPC, Prisma, playwright, vscode, github actions, PostgreSQL, Terraform, Flutter これらの技術スタックが今後ま
ムーザルちゃんねるのムーです。今回は zaru さんと、Next.js のセキュリティについて話しました。 セキュリティについては様々あると思いますが、今回は以下の3点をピックアップして話しました。 Client Components の Props から露出する Server Actions の引数に注意 認証チェックをやってはいけない場所、やって良い場所 これらは、Next.js 入門者がうっかりとやってしまうリスクがあるものです。 このような罠は、アプリケーション自体は正常に動くので、知らないうちにはまってしまいますし、自力で気づくのも難しいものです。もしも知らないものがあれば、ぜひご確認ください。 楽しくて、安全な Next.js 生活をお送りください！ Client Components の Props から露出する これは、シンプルで当たり前といえば当たり前ですが、Client
The Registerは1月2日(現地時間)、「Google password resets not enough to stop this malware • The Register」において、情報窃取マルウェアにセッション情報を窃取された場合、Googleパスワードを変更するだけでは不十分だとして、注意を呼び掛けた。最新のセキュリティ研究によると、ユーザーが侵害に気づいてパスワードを変更しても、脅威アクターは侵害したアカウントにアクセスできるという。 Google password resets not enough to stop this malware • The Register Google認証が抱えるゼロデイ脆弱性悪用の概要 このGoogleのゼロデイの脆弱性は、2023年10月に「PRISMA」と呼ばれる脅威アクターにより悪用が予告されていた。The Register
Next.js の App Router を中心に解説した書籍を執筆しました。「実践 Next.js —— App Router で進化する Web アプリ開発」という本です（3/16 刊行）。本稿では書籍の概要と、App Router が何を解決するのかについて紹介します。 書籍の概要 書籍で解説しているサンプルコードは、public リポジトリで既に公開しています。前半、第 1 章〜第 4 章では App Router の基礎を抑えるための練習用リポジトリを使用します。後半、第 5 章〜第 10 章では、写真を投稿する SNS「Photo Share」という架空アプリの実践的リポジトリを使用します。 第 1 章：Next.js の基礎 第 2 章：Server Component とレンダリング 第 3 章：App Router の規約 第 4 章：Route Handler 第 5
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Admin.jsを使って面倒な管理画面をサクッと作ろう | DevelopersIO
スタートアップの小規模Webサービスのリアルな技術スタック - Qiita
GitHubのトレンドで振り返る2021年のJavaScript/TypeScript
フロントエンド開発のためのテスト入門 - サンプルの紹介 -
GitHubのトレンドで振り返る2022年のJavaScript/TypeScript
Next.jsとPrismaをCloudflareにデプロイして月300万のDBクエリに無料で耐える
Prisma ORMを2年運用して培ったノウハウを共有する
一休レストランのふつうのRustバックエンド開発 - 一休.com Developers Blog
frourioを使って1ヶ月で管理画面をリリースした話 - Leverages Tech Blog
70年代と80年代の間には、まず制作者の大きな壁があった。70年代におおきな..
Apollo ServerとPrismaではじめるGraphQL API開発入門
ReactベースのあたらしいフレームワークRemixをためしてみた | DevelopersIO
ぼくのかんがえたさいきょうの個人開発あーきてくちゃ
最近話題の「frourio」を無料でサクッとデプロイする方法（Vercel + Heroku）
“Tao of Node - Design, Architecture & Best Practices” 日本語翻訳
RailsエンジニアのためのNext.js入門 - hokaccha memo
Next.js から Prisma ORM を利用する
向上心を持つのは大事だけど技術を殺すのはやめようね | srockstyle
技術のトレンドと開発テクニックの知見を、無料で公開します！ - Qiita
知らないとあぶない、Next.js セキュリティばなし
Google認証に不正アクセスの脆弱性、パスワード変更では不十分
実践Next.js - App Router への理解を深めるために -