概要 4年ほどProductionで使っていたリッチテキストエディタ（Quill on Nuxt.js v2）をTiptap on Next.jsに移行しました。 既存のQuillエディタの使い勝手をTiptapで再現しつつ、改善できるところは改善しつつ、既存の4年分のリッチテキストデータが正しく編集できるようにしなければいけませんでした。 本記事では移行の具体的なプロセスを解説しようと思っていたのですが、リッチテキストエディタは前提知識があまりに多いため、前提となる知識や考え方を解説しているだけでそこそこのボリュームになりました。そこで、一旦考え方や前提知識をまとめた、という体で公開します。 本記事を読んでから各ライブラリのDocsを読んだりカスタマイズを始めたら、少しハードルが下がっていることかと思います。 対象読者の例 リッチテキストエディタに興味がある リッチテキストエディタの開発
起業なのか請負開発か趣味のプロジェクト（ペットプロジェクト）かによって状況は異なりますが「私のチームの開発者は私１人だけです」という個人開発においても、ADRは有効なツールとなりえます。 ADRとは何か？ ADR（アーキテクチャデシジョンレコード）は、ソフトウェアアーキテクチャにおける重要な設計判断とその根拠、影響、関係する検討事項などを記録した文書です。 一見、現代的な響きですが、その実態はシステム設計ドキュメントの一部です。 "ADR"で検索すると真っ先にヒットするアーキテクチャの入門書『Design It! ―プログラマーのためのアーキテクティング入門』では、ADRは「アーキテクチャ手法に対する開発者寄りのアプローチ」と説明されており、アーキテクトと開発者自身がアーキテクチャに関する意思決定を記録し、共有するための手法として位置づけられています。 アーキテクチャデシジョンレコード（A
Vue.js でファイルベースルーティングを実現する「Unplugin Vue Router」の紹介
Web アプリケーション開発において、ファイルベースルーティングはコードの可読性向上や開発効率化に大きく貢献します。本記事では、Vue.js アプリケーションでのファイルベースルーティングをシンプルかつ型安全に実現できる「Unplugin Vue Router」をご紹介します。Nuxt のような大規模なフレームワークは少し大げさだと感じる場合や、Vue Router をより効率的に活用したい方はぜひ参考にしてください。 Unplugin Vue Router 概要 ファイルベースルーティングによってファイルのパスと URL を直接対応させることで、コードの構造を直感的に理解できます。 TypeScript との連携によりコンパイル時にルーティングのミスを検出でき、より安全な開発が可能になります。 Nuxt のようなフルスタックフレームワークと比較して軽量であり、小規模なプロジェクトに最適で
UnoCSS を知る、まずは経緯から
👋 はじめに ナイトウ(@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.
Nuxt Auth Utils でサーバーサイドの認証を（OAuth・マジックリンク・ワンタイムパスワード）
Nuxt 3 では Universal Rendering (SSR) によるアプリケーションの開発が難なく可能です。 Nitro というサーバーサイドのフレームワークにより、Nuxt 3 はサーバー側の処理も簡潔に記述できるようになっています。 Nuxt Auth Utils はそんな Nuxt の特徴を生かした、SSR のアプリケーションに OAuth 認証を実装できる Nuxt モジュールです。 執筆時点で GitHub, Google, Discord など 17 の OAuth プロバイダーに対応していますので、通常用途では充分だと思います。 さて当記事では、そんな Nuxt Auth Utils を使った実装と、後半では OAuth 以外の認証方法であるマジックリンク認証とワンタイムパスワード認証を追加実装する方法を解説します。 完成形のイメージ 完成したログインフォームはこの
thoughtbot had the pleasure of partnering with Clara on a recent project. thoughtbot’s deep expertise in Ruby on Rails and Hotwire made us a great match as Clara’s technology partner. We sat down with Ian Gillis, the CTO and Co-founder of Clara to learn more about the company and what led them to choose Hotwire. What is Clara and what stage is the company in? Clara is a marketplace for in-home sen
Co-Edo終了報告サイトをCloudflareで開発するとき使った NuxtHub がとっても便利！
こんにちは。田中弘治です。 僕は2013年よりコワーキングスペース茅場町 Co-Edoというのを運営してきているのですが、実はまことに残念なことに、ビル建て替えに伴い本年中に終了することとなりました。 これまでご活用いただいたみなさま、本当にありがとうございます。 その報告をする専用サイトを作ろうと思い、どうせならCo-Edoへのメッセージを送れるようなものをと考えてたところで Cloudflare を活用しようと思いました。 D1 や KV といったエッジで動く技術は今後広まっていくと思うので、今後 Cloudflare 中心の開発をしていくための準備でもあります。 作ったもの 1週間も2週間もかけてつくるものではないので、あっさりしたものを作りました。 作っていくうちに、いろいろやりたくなり、結果的につぎのような機能を持つサイトになりました。 メッセージを送る機能 今後の最新情報を受け
JSer.info #704 - WebdriverIO v9がリリースされました。 WebdriverIO v9 Released | WebdriverIO 新しい機能として、WebDriver BiDiのサポート、urlコマンドの追加、addInitScriptコマンドの追加、setViewportコマンドの追加、ShadowRootのサポートなどがあります。 また、emulateコマンドでClockのエミュレーションサポートや、要素がinteractiveになるまで自動的に待機する変更も含まれています。 Node.js v22.7.0がリリースされました。 Node.js — Node v22.7.0 (Current) 新しい機能として、--experimental-transform-typesフラグによるTypeScriptのenumとnamespaceの変換をサポートしまし
はじめに おはようございますhiroです。 Vueを学習するにあたり、初学者向けのロードマップがあればと思っていたため本記事を書きました ✏️ タイトルにもありますが、本記事は私の経験に基づくかなり主観的なものとなっていますので予めご了承ください。「これからVueをどのように学習しよう？」そう悩んでいる方の参考になれば幸いです！ 対象読者 本記事はVueをこれから学習しようとしている初学者の方を対象としています。具体的に以下のような悩みを持った方を想定しています。 JavaScriptをざっと学びこれからVueをどのように学習しようか悩んでいる方 どのような教材を使用すれば良いか悩んでいる方 公式ドキュメントを読めと言われて「読めれば苦労しないよ！」と悶々としている方 本記事では、教材の紹介からその教材をどう使用していくかなどを具体的に記載しております。 ゴール 本記事のゴールとして、Vu
Nuxt Bridge を活用して Nuxt 3 へ移行しました 業務委託で STORES の開発をしている @inouetakuya です。 以前 STORES が Nuxt Bridge を活用して Nuxt 3 への移行を進めている旨の記事を wattanx が書いてくれました。 Nuxt 3 への移行に向けて頑張ってます - STORES Product Blog そして先月（2024年7月）ようやく Nuxt 3 へ移行することができましたので、本記事は前回の記事の続編にあたります。 Nuxt Bridge とは おさらいになりますが、Nuxt Bridge とは Nuxt 3 の機能の一部を Nuxt 2 でも利用できるようにしたライブラリです。これを活用すると Nuxt 2 のプロジェクトのまま Nuxt 3 の機能を利用するようコードを変更でき、Nuxt 3 へのバージョン
みなさんこんにちは, ubugeeei です． 最近技術発信が全くできていないな〜お前それでも Vue Team Member かよ，と思いつつ，せっかく Vue 3.5 がリリースされたのでそれに関連した機能の記事でも書こうかと思います. Vue 3.5.0 がリリースされました 先日，Vue 3.5.0 (Tengen Toppa Gurren Lagann) がリリースされました. このリリースでは，Reactivity System の最適化や，新しいコンポーザブルである useTemplateRef，useId，Custom Elements の改善など様々な変更が入りました． 詳しくは上記の公式ブログや，同 publication のまとめ記事 などを参照してください． 今回のトピック Vue 3.5 で Reactive Props Destructure という機能が安定版
🏘️ Route GroupsWe now support naming directories with parentheses/brackets to organise your routes without affecting the path. For example:
今年の10月19日に開催されるVue Fes Japan 2024のタイムテーブルが公開されました。このタイムテーブルを眺めているときに、RubyKaigiの登壇者まとめサイトを作っている方を見かけて歴代のVue Fes Japanのスピーカー一覧を見られるページを作ってみようと思って作りました。 サイト内容自体はシンプルで、全スピーカーを一覧で見られるもの、開催年とスピーカーそれぞれの発表一覧を見られるものを用意しています。 https://vuefes-japan-speakers.nuxt.dev/ https://vuefes-japan-speakers.nuxt.dev/2024 https://vuefes-japan-speakers.nuxt.dev/speakers/Evan You 現時点で以下Vue Fes Japanサイトの情報が含まれています。2019年は開催さ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【React】リッチテキストエディタ（Quill、Tiptap、Slate...）の考え方や前提知識
個人開発でもADR （アーキテクチャデシジョンレコード）を書くことの利点 - laiso
ついにβ版となったVue 3.5の魅力的な新機能をまとめてみた
Why CTOs are choosing Hotwire and Ruby on Rails
2024-08-25のJS: WebdriverIO v9、Node v22.7.0(TS `enum`と`namespace`の対応)、Deno 1.46(Last 1.x)
経験談に基づく主観的Vue.js学習ロードマップ
Nuxt Bridge を活用して Nuxt 3 へ移行しました - STORES Product Blog
Reactive Props Destructure を支える技術
Nuxt 3.13 · Nuxt Blog
Vue Fes Japanの歴代スピーカー一覧を見られるページを作った