はてなブックマーク

Nuxt 3 では Universal Rendering (SSR) によるアプリケーションの開発が難なく可能です。 Nitro というサーバーサイドのフレームワークにより、Nuxt 3 はサーバー側の処理も簡潔に記述できるようになっています。 Nuxt Auth Utils はそんな Nuxt の特徴を生かした、SSR のアプリケーションに OAuth 認証を実装できる Nuxt モジュールです。 執筆時点で GitHub, Google, Discord など 17 の OAuth プロバイダーに対応していますので、通常用途では充分だと思います。 さて当記事では、そんな Nuxt Auth Utils を使った実装と、後半では OAuth 以外の認証方法であるマジックリンク認証とワンタイムパスワード認証を追加実装する方法を解説します。 完成形のイメージ 完成したログインフォームはこの

こんにちは。田中弘治です。 僕は2013年よりコワーキングスペース茅場町 Co-Edoというのを運営してきているのですが、実はまことに残念なことに、ビル建て替えに伴い本年中に終了することとなりました。 これまでご活用いただいたみなさま、本当にありがとうございます。 その報告をする専用サイトを作ろうと思い、どうせならCo-Edoへのメッセージを送れるようなものをと考えてたところで Cloudflare を活用しようと思いました。 D1 や KV といったエッジで動く技術は今後広まっていくと思うので、今後 Cloudflare 中心の開発をしていくための準備でもあります。 作ったもの 1週間も2週間もかけてつくるものではないので、あっさりしたものを作りました。 作っていくうちに、いろいろやりたくなり、結果的につぎのような機能を持つサイトになりました。 メッセージを送る機能 今後の最新情報を受け

👋 はじめに ナイトウ(@engineer_naito)と申します。 今回は CSS フレームワーク Atomic CSS エンジンである UnoCSS について紹介したいと思います。 🧐 想定読者 Tailwind CSS などの CSS フレームワークを利用したことのある開発者であればスラスラ読めると思いますが、初学者の方であっても問題なく読めると思います。 (なぜならばぼく自身が CSS フレームワークを使ったモダンフロントエンド開発の経験がないからです 🙋‍♂️) 🗾 UnoCSS と日本 UnoCSS は軽量かつ柔軟な Atomic CSS エンジンであり、現在最も注目を集めている CSS ツールの一つです。 人気調査サイトの結果によると、ここ 2, 3 年で確かに人気や知名度が上昇しています。 しかし、日本ではどうでしょうか？ Zenn で「UnoCSS」と検索してみま

Vue 3.5 β版のリリースが始まっています！本記事では3.5で追加された新機能などを一足早く動作させてみましたので、個人的に楽しみにしている機能をまとめてみました。 composable useTemplateRef テンプレート参照をcomposableとして便利に利用できる関数です。 Vue 3.5より前は以下の様に変数を定義してテンプレート参照を行っていたため、下記のonMountedの処理をcomposableとしてまとめようとしてもテンプレート参照の変数（下記で言えばtemplateRef）自体を渡さなければならず、少し扱いづらいところがありました。 <script setup> import { ref, onMounted } from 'vue' const templateRef = ref() onMounted(() => { templateRef.value.

はじめに おはようございますhiroです。 Vueを学習するにあたり、初学者向けのロードマップがあればと思っていたため本記事を書きました ✏️ タイトルにもありますが、本記事は私の経験に基づくかなり主観的なものとなっていますので予めご了承ください。「これからVueをどのように学習しよう？」そう悩んでいる方の参考になれば幸いです！ 対象読者 本記事はVueをこれから学習しようとしている初学者の方を対象としています。具体的に以下のような悩みを持った方を想定しています。 JavaScriptをざっと学びこれからVueをどのように学習しようか悩んでいる方 どのような教材を使用すれば良いか悩んでいる方 公式ドキュメントを読めと言われて「読めれば苦労しないよ！」と悶々としている方 本記事では、教材の紹介からその教材をどう使用していくかなどを具体的に記載しております。 ゴール 本記事のゴールとして、Vu

Web アプリケーション開発において、ファイルベースルーティングはコードの可読性向上や開発効率化に大きく貢献します。本記事では、Vue.js アプリケーションでのファイルベースルーティングをシンプルかつ型安全に実現できる「Unplugin Vue Router」をご紹介します。Nuxt のような大規模なフレームワークは少し大げさだと感じる場合や、Vue Router をより効率的に活用したい方はぜひ参考にしてください。 Unplugin Vue Router 概要 ファイルベースルーティングによってファイルのパスと URL を直接対応させることで、コードの構造を直感的に理解できます。 TypeScript との連携によりコンパイル時にルーティングのミスを検出でき、より安全な開発が可能になります。 Nuxt のようなフルスタックフレームワークと比較して軽量であり、小規模なプロジェクトに最適で

はじめに TL;DR CLI 開発で UnJS の unbuild、citty、consola、giget、pkg-types、jiti を使ってみたらめっちゃ便利だった。 本記事の内容と対象読者 本記事は、Vue.js v-tokyo Meetup #21にて筆者が LT 登壇した内容を記事化したものです。 筆者が最近取り組んでいた CLI 開発において UnJS を導入したところ、非常に便利と感じたため発表することとなりました。発表資料はGitHub Pages に上げています。 本記事では CLI 開発に便利な UnJS のライブラリをいくつか紹介し、どのように使ったのかの解説もします。UnJS に興味があり、どんなライブラリをどのように使うのか気になっている人を対象にしています。 前提知識として Node.js/TypeScript の基礎的な理解があると読みやすいでしょう。 検証

はじめに こんにちは、がんがんです。 2024 年 6 月に Nuxt v3.12 がリリースされました。 Nuxt v3.12 の目玉としては Nuxt4 のリリース準備が進んでいること、現環境で Nuxt4 のマイグレーション実験を行えること が挙がられると思います。 Nuxt4 へのマイグレーション実験はこちらの記事で実験されています。合わせてご覧ください。 そんな v3.12 のリリースノートの中に今まで見たことなかったモジュール名が記載されていました (以下ブログ記事の引用) 📜 Nuxt Scripts auto-install We've been gradually working to release Nuxt Scripts. It's currently in public preview, but we're near a public release, so w

以前（まだ Nuxt 3 がベータリリースだった頃）に『Nuxt 3 の useFetch() と useAsyncData() の使い方』という記事を書きました。 その後、より多機能になり、またベストプラクティス的な使い方が分かってきたこともあり、改めて useFetch() についてまとめてみたいと思います。 はじめに ここ数年、一貫して Nuxt 3 を使用している僕ですが、主要なコンポーザブルである useFetch については当初の理解が違っていたものもありました。 少しずつ修正しながら、都度コードを書き換えてきたのですが、その過程で得られた知見を共有したいと思います。 なお、記事内で Nuxt と書いた場合は Nuxt 3 および Nuxt 4 を指します。 （現時点では Nuxt 4 はリリースされていませんが、発表されている内容から Nuxt 3 との違いを考慮しつつ記述し

はじめに こんにちは、がんがんです。 皆さんは Nuxt 環境でコンポーネントを実装する時、どんな UI ライブラリ/FW を利用していますか？ Nuxt 環境でコンポーネントを実装する場合、 Tailwind CSS、Panda CSS などを用いて自前で実装する Vuetifyを利用する shadcn-vueを利用する PrimeVueを利用する etc. などなどの選択肢が挙げられると思います。 本記事では Nuxt 公式が提供しているNuxt UIを実際に触ってみたいと思います。 Nuxt UI ってどんなもの？ Nuxt UI の環境構築はどうすれば良い？ などの疑問を解消出来たらと思います。 Nuxt UI とは Nuxt UI とは、Nuxt 公式が提供する UI Library です。 Headless UI と Tailwind CSS をベースに実装されており非常に利用

SPA におけるアクセシビリティ課題について シングルページアプリケーション（SPA）は、1 つの HTML ファイルに対して JavaScript と Web API を活用して、ユーザーに素早いページ切り替えの体験を提供するウェブアプリケーションの一形態です。 しかし、SPA にはアクセシビリティの課題があります。例えば、視覚障害のあるユーザーが使うスクリーンリーダーという支援技術ではページが遷移したことを認識できないことがあります。これは、JavaScript を使ってページを切り替える際に発生する問題です。 具体的には、ユーザーがあるページから別のページへ移動した際、スクリーンリーダーが新しいページに移動したことを認識しないことがあります。 この問題を解決するために、JavaScript と WAI-ARIA という技術を使って、Route Announcer という方法があります

こんにちは、keigoです。 先日リリースされたNuxt3.12では、Nuxt4 Opt-inの機能が提供されています。 今回は、Nuxt4 Opt-inに移行する際の手順や概要をご説明するとともに、Nuxt4 Migrationにかかるコスト感を掴んでいただければと思います。 Nuxt4変更点について Nuxt4の重大な変更として、デフォルトのディレクトリ構造変更があります。(後方互換性あり) これまでアプリケーションルートに存在していた components/, pages/, assets/, ...などといったディレクトリが、app/配下にまとめられるようになりました。 Nuxt3のディレクトリ構造 .output/ .nuxt/ assets/ components/ composables/ layouts/ middleware/ pages/ plugins/ utils/

初めに Vue.js の学習をしているとよく「Vite」という単語を目にすると思います。 一体全体あれはなんなのでしょうか？？ なんだかよく分からないコマンドを打つと、いつの間にかプロジェクトが作成されていたり、 ファイルを編集するだけでブラウザで動くようになっていたりします。 そもそも読み方も良くわかりません 😵‍💫 (ヴィテ...？ ヴァイト...？) この記事では、Vite についての基本的な情報をまとめてみます。 発音？ 発音の仕方は「ヴィート」です。こちらは公式ドキュメントにも書かれています。 Vite（フランス語で「素早い」という意味の単語で /vit/ ヴィートのように発音）は、 しかし、実はこれにはやや表記揺れがあって、「ヴィット」と表記されているところもあります。 例えば、話題になった Kawaii ロゴではそのように表記されています。 まぁこれらはカタカナ表記の限界

はじめに フロントエンドエンジニアのhiroです。 エンジニアになって半年が過ぎました。 表題にあるとおり、この記事では vuejs/core のソースコードを探検してみたいと思います。 ソースコードの探検が目的のため、実装の詳しい解説自体は行いません。あらかじめご了承ください。 目的 本記事はubugeeeiさんの素晴らしい本であるchibivueに出会い、ubugeeeiさんご本人にVueについて直接教えて頂き、Vueのソースコードに興味を持ったことがきっかけで執筆しています。chibivueはVueの基本的な機能を自分で実装することで、Vueについての理解を深め、vuejs/coreのソースコードが読めるようになることを目的とされている本です。 エンジニア経験の浅い私にとってVueのソースコードを理解することは難しいですが、全部が理解できなくてもなんとなく 「こういう実装になっている

はじめに こんにちは、がんがんです。 2024 年 4 月、Nuxt から Nuxt ESLint というモジュールが公開されました。Nuxt ユーザー待望の All-in-one ESLint モジュールです。 本モジュールの登場により Nuxt におけるリンターの設定方法が大きく変わりました。 本記事では Nuxt ESLint を用いたマイグレーションを中心に新しい Nuxt ESLint をセットアップしていきます。 Nuxt ESLint とは Nuxt ESLint はAll-in-one ESLint integration for Nuxtと公式ドキュメントに記載がある通り、Nuxt ユーザーのための All-in-one モジュールです。 今までの Nuxt ユーザーは Nuxt3 で ESLint を使う場合、どれが Nuxt 公式のルールだろう Nuxt で ESLi

はじめに お久しぶりです、からころです。 突然ですが、みなさん Vite は利用してますか？ Vitest や Jest をはじめ、Vueでコンポーネントのテストをする際に、 しばしばテスト用にカスタム属性を用意することがあります。 テスト属性がバンドルされてプロダクション環境に出てくると、 意図しない挙動を引き起こしたりするかもしれないから避けたい！ そもそもテストタグを追加するだけなのにビルド後のコードに変更が加わるのは気持ち悪い! といった方に向けた記事になります。 設定について nuxt.config.tsの場合 { ... // 下記を追加する vue: { compilerOptions: { nodeTransforms: [ (node) => { if (node.type === 1 /* NodeTypes.ELEMENT */) { for (let i = 0;

Vue/Vite 関連のライブラリー名の読み方は間違えられやすいものが多く、混乱を招くことがあります。この記事では、2024 年現在における Vue/Vite 関連ライブラリーの正式な読み方や由来をまとめ、正しい知識を共有することを目的としています。 Vue フロントエンド UI フレームワークのひとつ。 「ヴュー」と読む（口語だと「ビュー」と発音することが多い）。 Vue（発音は /vjuː/、view と同様） https://ja.vuejs.org/guide/introduction.html#what-is-vue Pinia Vue 公式の状態管理ライブラリー。 「ピーニャ」と読む。スペイン語で「パイナップル」を表す単語 piña に由来。 「ピニア」ではない。 Pinia (pronounced /piːnjʌ/, like "peenya" in English) htt

Emit が分からない！ Vue.js で ref や computed でのステート管理を学び、コンポーネント間でのやり取りで props を学び、次に emit を学ぼうとするとなんだか難しく感じることがあります。 確かに初学者の方からすると、慣れるまで少し時間がかかるかもしれません。 でも大丈夫です。 この記事では図でのイメージとあなたが既に知っているはずの知識を使って emit を理解するためのヒントを提供します。 基本のキ とりあえず emit の基本をおさらいします。 <!-- ChildComponent.vue --> <script setup lang="ts"> const emit = defineEmits<{ "my-event": [] }>(); function handleClick() { emit("my-event"); } </script> <

🏆 結論 「とりあえず ref を使えばいい！」 おしまいです。ref でできないことはありません。 注意点として補足しておくと、これは「Vue.js が ref を推奨している」「迷ってるならとりあえず ref を使っておけばいい」という話であって、reactive をはじめとする他の Reactivity API が非推奨だという話ではありません。 reactive がケースによって便利であることは Evan 氏なども認めており、そもそも Vue.js には厳密なルールがあるわけではないので、結局は自分の手に馴染むものを選択していくのが良いと思います。 なので、究極的な結論としては「とりあえず ref ファーストで考えておいて、なんらかしらの理由で reactive を使いたいなら別にそれも良い」という話になりますが、特別な理由がない場合は ref の方が推奨されます。 🚩 はじめ

<script setup> import { ref, computed } from "vue"; const props = defineProps({ count: Number }); const double = computed(() => props.count * 2); const message = ref("Hello, Vue.js"); </script> <template> <div> <p>{{ message }}</p> <p>{{ props.count }}</p> <p>{{ double }}</p> </div> </template> ・ ・ ・ ・ ・ ・ ・ なんで defineProps は import しなくても使えるの？？？？？ そんなことを思った方はいませんか？今日はその疑問を解決して差し上げます。 🚩 初めに 前回は Vu

🚩 初めに こんにちは。Vue Beginners です！ 😄 これまでに、Vue の勉強を始める方法や、環境構築の方法などを紹介してきました。 今回はもう少し範囲を絞って、具体的な疑問について解説していきます！！！！！ Vue.js について学んでいると、コンパイラ という言葉を見かけることがあると思います。 皆さんは「Vue.js のコンパイラとは何ですか？」と聞かれたら、どのように答えますか？ 🤔 意外と戸惑う方も多いのではないでしょうか。 今回はコンパイラとは何なのか、何のためにあるのか、Vue.js のコンパイラとはどういうものなのかについて説明してみます。 それではスタート！！！！！！！！！！！ 🤔 コンパイラとは これからの説明は、Vue.js に限った話ではありません。 プログラミング全般で使われる コンパイラ という意味について説明していきます。 コンパイラ (C

はじめに こんにちは、がんがんです。 2024.02.29 に関西で行われたReboot v-kansai Meetup #15で LT 登壇をしてきました。 登壇内容が GitHub の実装を掘っていくものだったため、本記事で改めて整理できたらと思います。 スライド資料はこちらです Auto-imports の使い方はこちらです Auto-imports 機能とは Auto-imports 機能とはcomponents、composablesを import 文不要で利用できる Nuxt の機能です。components の Auto-imports 機能はNuxt2時代からあったものです。 Nuxt3 の Auto-imports は以下の 2 機能を有しています。 機能 1. Built-in Auto-imports Vue, Nuxt composable が import 不要

💡 ヒント: コミュニティとはグラデーションである 🚩 序 こんにちは。Vue Beginners (の管理人) です。 すでに多くの方に記事を見ていただけていてとても嬉しく思います。感謝しています。 今回はソースコードは 1 行も出てきません。 ひょっとすると、Vue.js の勉強法や使い方などを求めている方にとっては多少つまらない内容かもしれません。 ですが少し早まらず、是非とも一緒に考えてほしいです。🙏 今日の話は、これからあなたが Vue.js について学び、使っていく際にとても重要な話だと筆者は信じています。 🤔 あなたがコミュニティの一員であるかどうか 回答: それはわかりません。 ・ ・ ・ 「自称だからでしょ？」と思う方もいるかもしれませんが、そういう話ではありません。 あなたがいくら自称したところでこの答えは決まりません。 というのも、いくらあなたが「私はコミュニ

eslint-plugin-vuejs-accessibilityとは何か eslint-plugin-vuejs-accessibilityは、Vue.jsのコンポーネントにおけるアクセシビリティの問題点を検出するためのESLintプラグインです。 類似するものとしてeslint-plugin-jsx-a11yがあります。これはReactのJSXにおけるアクセシビリティの問題を検出するためのESLintプラグインです。今あるルールはこのプラグインから参考になっている部分がいくつかあります。 eslint-plugin-vue-a11yとの違い 元々は個人で開発していたeslint-plugin-vue-a11yというものがあります。 こちらのeslint-plugin-vue-a11yは現在メンテナンスがされておりません。今回紹介するeslint-plugin-vuejs-accessi

【Vue.js】今、ゼロから Vue を学び始めるならこうやるといいんじゃないか (2024) 【初学者向け】 🤔 Vue.js って何から勉強すれば良いですか？ この疑問は Vue.js に限らず、多くの初学者の中でホットなトピックです。 すごく端的にこの問いに答えてみると、「好きにすればいい、正解はない！自分で考えなさい！」です。 これは確かにとても正しい意見[1]だと思いますが、そうは言っても初学者にとっては何から手をつけたらいいのかわからない状況が多いです。 と言うことで、上記のような前提は持ちつつ「まぁ、とりあえずこんな感じで良いんじゃないですかね(安牌)」と言う私(筆者)なりのアイデアを書いてみたいと思います。 ご参考までに 😙 それではスタート 💨 Vue.js の公式ドキュメント 「おいおい、急にハードルが高すぎるだろ...」 そう思った方も少なくないかもしれません。

// firebase.ts import { initializeApp } from 'firebase/app' const firebaseConfig = { // この中はfirebase consoleからコピペ }; export const firebaseApp = initializeApp(firebaseConfig); import { createApp } from 'vue' import { VueFire, VueFireAuth } from 'vuefire' import App from './App.vue' import { firebaseApp } from './firebase' const app = createApp(App) app.use(VueFire, { // imported above but could als

🔰 Vue Beginners について みなさん初めまして！ Vue Beginners です！ この記事では、私たち Vue Beginners について紹介します。 🔰 Vue Beginners とは Vue Beginners は、Vue.js 初学者向けの情報を発信する Zenn アカウントです。 Vue.js の学び方や、Vue.js を使いこなすためのヒントなどを発信します。 主に、以下のような人に向けて情報を発信しています: 🎯 ターゲット これから Vue.js を学びながらエンジニアを目指す人 (業務経験なし) Vue.js をすでに使っているが、まだまだ初心者の人 (業務経験あり) ❌ ターゲットではない人 すでに Vue.js を使いこなしている人 すでに Vue.js 以外のライブラリやフレームワークを使いこなしている人 💁‍♂️ なぜ明確にターゲットを

※本記事は Qiita / All I know about Vue 3's Vapor Mode Details (2023/12) のミラーです ⚡️ Vapor Mode ってご存知でしょうか? 🤔 少しでも聞いたことがあるようであれば、おそらくあなたは日常的に情報を収集している熱心な方でしょう。 というのも、現在(2023/12)、Vapor Mode について日本語での言及はほぼありません。 かといって英語圏に情報が出回っているかというと、そうでもありません。(後述) 今回は現時点で筆者が知っている Vapor Mode の詳細について、前提知識も整理しつつ理解していければと思います。 😋 初めに 🎯 お品書き (何を理解するか) 改めて Vue.js とは これから Vue.js を学び始める方や、Vue.js をのぞいてみるのは随分と久しぶりだという方もいるかと思うので