はじめに Nuxt3の安定版がリリースされ、しばらく経った。現在筆者もNuxt3を活用しているプロジェクトがある Nuxt3は以前の2系にも増して更に強力な機能を公開しており、快適な開発体験を提供してくれる 代表的な機能としては Auto-imports Data-fetching utilities Zero-config TypeScript support Universal rendering (Server-side rendering and hydration) といったものがある。またNitroという新しいサーバーエンジンが導入され、より高いパフォーマンスでのレンダリングが可能になった そしてNuxt3では2つの新しいAPIであるuseFetchとuseAsyncDataが導入されている(useLazyFetchとuseLazyAsyncDataも含めれば4つ)。useFe

はじめに VueはコンポーネントをSFC(シングルファイルコンポーネント)で書くことが推奨されているUIフレームワークである。VueにおけるSFCではHTML、CSS、JSを一つのファイルにまとめることで一つのコンポーネントを作ることができる また最近ではVue3が盛り上がってきている。2020年10月8日現在、Vue2のサポートは来年2023年で終了するという発表もあり長期的にメンテが必要なプロジェクトに関してはVue3への移行が慌ただしく行われていることだろう そんな中ある一つの疑問が浮かんだ。「人やプロジェクトによってSFCの書き方が異なる。templateタグ、scriptタグを書く順番が違う」と。 どういうことか具体的に見てみよう。以下はVue3公式から引用したコードだ <script setup> import { ref, onMounted } from 'vue' //

はじめに 私は普段VueでTailwindを導入し利用しているフロントエンドエンジニアである。最近TwitterにてTailwind CSSの話題をよく目にするようになり、uhyo氏によって以下の記事が投稿された 本記事ではこのuhyo氏による記事に対する考察と私のtailwindに対する考えをまとめた Tailwind CSSのメリット Tailwind CSSはユーティリティファーストのCSSフレームワークである This approach allows us to implement a completely custom component design without writing a single line of custom CSS TailwindはシングルラインでCSSを書くことなく、コンポーネントのデザインを実装できるようにしたものだ。ドキュメントによると以下のように

T3 Stackとは 昨今のWeb開発ではTypescriptによる型安全なWebアプリケーションの開発を求められている。またバックエンドとフロントエンド、さらにBFFによる構成においていかに型安全で効率よく開発するかはWebアプリ開発において非常に重要な課題となっている。 そこでTheo氏によって「T3 Stack」という技術スタックが提唱された。 これは最近注目のWeb開発の技術スタックとなっている T3 Stackにおいては以下3つの思想に焦点が当てられている。 simplicity(簡潔さ) modularity(モジュール性) full-stack typesafety(フルスタックの型安全) そしてこれらの思想を実現するためにT3 Stackでは以下6つの技術を採用する Next.js tRPC Tailwind CSS Typescript Prisma NextAuth.j