dely株式会社 「クラシル比較」の開発期間は3カ月！Next.jsとVercelを用いたモダンな技術スタックで挑んだフロントエンド開発支援事例

はじめに メーカー系企業のコーポレート部門で業務システムを作っているモンゴルと申します。 趣味やPJでNext.jsを使っているのですが、チュートリアルを読んだ後に、とりあえずやってみようの精神で、4つほど動くものを作ってきました。 ただ、この中でディレクトリ構成についてもやもやを感じるようにもなりました。 Next.jsに触れ始めてから半年ほど経過したこともあるので、このタイミングでよりよいディレクトリ構成について整理していきたいと思います。 今までずっとサーバーサイドのエンジニアだったので、間違った認識等あるかと思います。優しくご指摘いただけると幸いです。 実装を初めて何が問題になったか？ 使用するデータベースやSaaSが変更になる可能性もあったので、外部へアクセスするコードはlibフォルダにまとめるようにしようと考えて実装をはじめました。 （Next.jsのチュートリアルのコードにお

使用するライブラリ このアプリで、Next.js以外に使用するライブラリは以下の4つです。インストール方法等は必要な箇所で説明します。 Prisma TypeScriptのORマッパーです。アプリでのノートの保存等に使用します。 ▶ Prisma | Next-generation ORM for Node.js & TypeScript Tailwind CSS CSSフレームワークです。アプリのUIデザインに使用します。 ▶ Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. Zod バリデーションライブラリです。APIレスポンスの型定義とバリデーションに使用します。 ▶ Zod | Documentation SWR データフェッチ用のライブラリです。ノート一覧のクライアントサイドで

GraphQL における Fragment とは GraphQL におけるFragmentとは、複数のqueryやmutationの間で共有することができるロジックのことです。 Fragmentを単体で定義すると下記のように書けます。 Fragmentには関連付けされたタイプに属するフィールドが含まれます。 上記の例だと Person 型は NameParts フラグメントが有効であるため、 firstName フィールドと lastName フィールドを宣言する必要があります。 そして、Person型のオブジェクトを取得するqueryを定義するときは下記のように書くことができます。Fragmentはスプレッド構文で記載できます。 実際にはfirstName,lastNameが展開されてフィールドにアクセス可能になっています。

Webフロントエンド界隈の文献などにあたっていると、「コロケーション (co-location)」という考え方が時々登場します。 コロケーションを簡単に説明すると、関連するリソース同士を近くに置いておく、という考え方です。 FooComponent.tsx と同じディレクトリに FooComponent.test.tsx を置く GraphQL fragment は、クエリを発行するコンポーネントファイル (pages/user.tsx) ではなく、fragment を利用するコンポーネントファイル (components/UserInfo.tsx) の中で定義する pages/user.tsx からはサブコンポーネントのファイルで定義されている fragment を import してきて、クエリを組み立てて発行する API ドキュメントは API.md に書くのではなく、コードの中にド

datasource​ Defines a data source in the Prisma schema. Fields​ A datasource block accepts the following fields: NameRequiredTypeDescription

【TypeScript】Zod でスキーマ宣言とバリデーションを実施する 2022.07.02 [Zod](https://github.com/colinhacks/zod) は TypeScript first でスキーマ宣言とバリデーションを実施するためのライブラリです。 一度バリデータを宣言すれば、Zod が自動的に TypeScript の型を推論してくれるという特徴があります。このおかげで重複した型宣言を排除できます。 また、Zod はエコシステムも多く存在しており、OpenApi、Nest.js、Prisma、react-hook-form などと組み合わせて使うことができます。 Zod は TypeScript first でスキーマ宣言とバリデーションを実施するためのライブラリです。 一度バリデータを宣言すれば、Zod が自動的に TypeScript の型を推論してくれ

おはようございます！こんにちは！こんばんは！はじめまして！ スターフェスティバルの DPontaro です！ この記事は スターフェスティバル Advent Calendar 2022 の5日目の記事です！！！！！ 昨日はあひるさん の terraform のお話でした。 私もterraformはまだまだ慣れておらずで、こうした実例はめっちゃ参考になりますね！ さてさて本日はインフラからは離れてPrismaというORMについて紹介します！！！！！ Prismaとは Node.js、TypeScript用のORMです。 仲良くなるまで多少の苦労は伴いますが、それに見合うメリットがあります！ migration と Prisma Client まずは Prisma schemaを定義します。 このschemaファイルは、DBテーブルの定義とPrisma Clientが生成するmodelの定義を

at #ワインと鍋js なぜフロントエンドに Edge Worker が必要なのか、Cloudflare Workers をどう使っていくかみたいな話をしました

Next.jsとRemixって何が違うのかを把握していなかったので、ちょっと今更感ありますが調査した内容を軽くまとめます。 この記事を読んでもらいたい人 普段Next.jsを使っていて、Remixについて無知な人 フロントエンドフレームワークの技術選定で迷っている人 この記事のゴール Next.jsとRemixの違いをざっくり把握できた状態になる 結論 状況やどこまでチューニングできるか次第だが、RemixはNext.jsよりもレンダリング速度を早くできそう?なので、とにかくパフォーマンス重視ならRemixという印象を受けました。 ただ、SSGやISRが利用できないことやユーザーコミュニティの大きさを鑑みると、参考サイトも多いためNext.jsの方が扱いやすそう。 Next.jsとは？ 同じくReactをベースにしたフルスタックフレームワーク 提供元はVercel 2020年3月の時点で、

まだ検証足りないけど、マジで想像通りのブツなら魂震えるかもしれん…。 Announcing D1: our first SQL database Cloudflare D1 = Edge SQLite Cloudflare D1 は Cloudflare Worker で、つまり CDN Network 上で sqlite が動きます。これだけなら普通の sqlite ホスティングなんですが、もちろん Cloudflare が出すからにはそれだけではなく、CDN Edge 上に Read Replica がバラ撒かれた sqlite になります。ヤバくないですか？ 僕はヤバいと思いました。 このヤバさを知るために、Cloudflare が開発した基盤についていくつか抑えておく必要があります。 Durable Objects は CDN 上の Actor モデルを構築できます。この Acto

TOP > PageSpeed InsightsとLighthouse。よく似てるツールの違いを比較表でチェック！ PageSpeed InsightsとLighthouse。よく似てるツールの違いを比較表でチェック！ Lighthouse PageSpeed Insights さくらインターネットさんのさくらのナレッジで、GoogleによるWebサイトパフォーマンス測定ツール「Lighthouse」入門という記事が公開されています。すでにご覧の方も多いと思います。 入門といいつつものすごい情報量で、Lighthouse(とPageSpeed Insights)が生成するレポートの読み方が丸わかりです！ ところで、このLighthouseとPageSpeed Insightsはよく似たツールなので、混乱されている方もいるかと思います。 違いや共通点を比較表にまとめてみました。 Lighth

Jamstack構成で趣味ブログを作った 趣味のロードバイクに関する話題を扱うブログをCloudflare Pagesで公開しました。作ったばっかりで記事が少ないですし、改善したい点もたくさんありますが、ひとまず公開まではこぎつけたため共有です。 このサイトは以下で作られていますが、今回はCloudflare Pagesの内容に絞って書いていきます。 Next.js(AppRouter) tailwind css(Chakra UIから移行) microCMS Cloudflare Pages を選択した理由 SSGと相性のいいホスティングサービスといえばVercelとNetlifyがまず挙がると思います。この2つも実際に試しましたが、以下の理由で最終的にCloudflare Pagesを選択しました。 Vercelの無料プランでは広告掲載ができない まず最初に検討したのはVercelでし

Faust.js + Headless WordPress + Vercel での Jamstack アーキテクチャでプレビューを実現する手順(カスタムポスト作成あり) Faust.jsとは？ Faust.jsとはについては公式サイトのトップに書いてありましたので引用します。 Faust.js is the Headless WordPress Framework. Faust.js provides a set of tools to make building front-end applications with WordPress as the headless CMS a pleasant experience for both developers and publishers. This framework consists of a WordPress plugin, a

netlify は雑に作り捨ての作例を置いておくのに便利でよく使っている。このブログも netlify にドメインを設定して動かしている。 そして、あんまり知られていないが、netlify には aws lambda が使えて、これは月当たり 12.5 万回ほどの無料枠がある。で、これをローカルで動かすための netilfy-lambda がある。 これがカジュアルに使えたら便利だと思って、一度素振りしておくことにした。 netlify-lambda の問題 netlify-lambda を使ってみたところ、本当に出来が悪い。ランナーとして、というより、開発用の環境設定の読み取りに謎の処理が多く、勝手にルート要素の webpack.config.js を読み取って自分用の webpack.config.js を生成して勝手に失敗したり、本番では /.netlify/functions/<h

はじめに Jamstackという言葉をきくようになって久しいですが、最近改めてJamstackを学ぶ機会がありました 以前こんな記事も書きましたがライブラリやサービスを並べただけで何も分かってませんでした ようやくちょっとだけ理解してきたので、Jamstackの特徴やそれを支える仕組みをまとめます とりあえず流行りの構成を試してみただけの昔の自分へ届けてあげたい記事です Jamstackとは https://jamstack.org/ JamstackのJamはJavaScript/APIs/Markupの頭文字です JavaScriptでAPIをたたいてMarkupを配信することを意味しています これだけ見るとSPAなど単なるWebアプリのようですね Jamstackの特徴としてパフォーマンスの高さとセキュリティの高さがうたわれています これらをどのようにして実現するのか見ていきます J

2022年12月24日 JavaScript, React, Wordpress 最近はReactをベースにしたフレームワーク、Next.jsをいじっております。今回はWordPressに登録した投稿をNext.jsで表示させてみようと思います！ ↑私が10年以上利用している会計ソフト！ ヘッドレスCMSとは？ ヘッドレスCMSはコンテンツの管理のみをするCMS（＝Content Management System）のこと。例えばWordPressではコンテンツの作成から表示までを行えますが、ヘッドレスCMSではコンテンツの表示は別の方法で行います。ここではNext.jsを使ってみます。 ヘッドレスCMSを使うメリット 表示部分を別途用意することになんのメリットがあるのでしょうか？ざっくりと以下の3点が挙げられるかなと思います： 表示速度の改善 セキュリティの向上 管理しやすい 通常のWo

イラストレーターの妻が「ポートフォリオサイト欲しい」と言い始めたので、面白そうだと思い開発を開始しました。 静的サイトなら Jamstack ってのがイイらしいと最近よく聞くものの、何かはわからないので勉強してみて、巷の Jamstack 構築環境をできる限り自分の家の中に作ってみます。 結論から言うと適材適所なのですが、皆さんもコーポレートサイトやブログなど「これって Jamstack がハマるんじゃないかな」と思える箇所があると思います。 是非、検討する材料としてこの記事をご覧ください。 Netlify 社が定義した JavaScript + API + Markup (JAM)  の構成を Jamstack と呼ぶようです。 まずは Jamstack の何が嬉しいか、見ていきましょう。 従来の Web サイト 従来の構成でサーバサイドがレンダリングした Web サイトを表示するまでの

この記事は、技術書典 11 で頒布中の「Vivliostyle で本を作ろう vol. 5」から抜粋した記事です。ご興味ありましたら、Vivliostyle を使って組版された本誌もぜひお買い求めください！ また、この記事以外の内容もすべて Vivliostyle 公式サイトで無料公開中です。 技術書やドキュメントを執筆する際、あなたはどのような形式で文章を書きますか？ 最近ではもっぱら Markdown で書かれることが多いですが、この Markdown を拡張するポテンシャルを持つお気に入りの OSS プロジェクト「MDX」を紹介します。 MDX = Markdown + JSX MDX の名前の由来は Markdown + JSX なので、MDX を理解するためにはまず JSX について知る必要があります。 JSX とは JavaScript の拡張構文の一つで、元々 React の

Frontend Study #1 訂正: 最後のzennの記事のリンク先は、正しくは https://zenn.dev/mizchi/articles/c638f1b3b0cd239d3eea です

Web Vitals Stay organized with collections Save and categorize content based on your preferences. Optimizing for quality of user experience is key to the long-term success of any site on the web. Whether you're a business owner, marketer, or developer, Web Vitals can help you quantify the experience of your site and identify opportunities to improve. Overview Web Vitals is an initiative by Google

blitz-js prisma rails 倒し方 を書いた時、こういう疑問がありました。 この db はクライアントでもサーバーでも呼べるようにみえる。ここが blitz のキモで、サーバーではそのまま prisma として実行されるが、内部実装を読んでいないので想像だが、 この db はクライアントでは同じ API の RPC に変換されている？ (ここにセキュリティ上の不安はある。すべてをクライアントから呼べてしまう恐れはないのか？ あとで blitz のコードを呼んで、どうやって実現しているか確認する) この件についての調査をしました。 Isomorphism: クライアント・サーバー同型 blitz では、次のようなコードをクライアントでもサーバーでも呼ぶことができます。 // app/auth/mutations/login.ts import { Ctx } from "bl