Next.jsのApp Routerを学ぶ際、shadcn/uiが参考になったという話 - Qiita
Next.jsのApp Routerを学ぶ際に、UIライブラリを探していたところ、shadcn/uiが参考になったので紹介します。 shadcn/uiは、フレームワークやライブラリではなく、コピペで利用できるReactコンポーネントのサンプル集という立ち位置になっています。Tailwind CSSでデザインされており、React Server Components(RSC)にも対応しています。 サンプルの実装方法が参考になる点も魅力の一つです。 簡単ですがつらつらと紹介していきたいと思います。 shadcn/uiとは デモを見てるとフレームワークやライブラリなのかなと思いきやそうではなく、コピペで利用できるサンプル集という立ち位置になっています。基本的にはTailwind CSSでデザインされてるようです。 サンプルとはいえ、実装方法で参考になった箇所が結構あったのでそこも気に入ってるポイ
俺の管理画面 2023年冬 - KAYAC engineers' blog
面白法人カヤック技術部の谷脇です。私は元気です。 この記事は面白法人グループ Advent Calendar 2023の5日目のエントリーです。 というわけでこの記事では、現環境(私が取り組んでいる業務のこと)ベストの管理画面の技術選択について考えたことを書き連ねていきます。 前提知識 管理画面の定義 ここで読者と私の目線を合わせるため、この記事上での管理画面の定義をしておきます。 管理画面はサービスの運営上必要な操作やデータの閲覧をまとめたWebアプリケーションです。また、このWebアプリケーションは一般ユーザーには開放されておらず、サービス運営者側のみ閲覧と操作が可能となっている、とします。 管理画面を作る動機 ここではTonamelの管理画面について、考えて導入したことを書きます。 tonamel.com Tonamelはゲーム大会やイベントを開催するためのプラットフォームです。We
Vue2系からVue3系に移行しました〜！ - Link and Motivation Developers' Blog
こんにちは！リンクアンドモチベーションでフロントエンドの開発をしています。岡田（@okadaike）です。 本日は弊社プロダクトのストレッチクラウドのVueのversionを2系から3系にmigrationしたので、そのご報告になります！！ 今回はプロダクトチームの中で色々と試行錯誤して進めました！ストレッチクラウドはSPAが3つあるような構成になっており、今回はそのうちの一つを移行しました！。 最後に残りの２つの移行計画もまとめようと思います！ Vue2は2023年末にEOLを迎えるのでこれからどんどん移行していくことになると思いますが誰かの役にたてればなと思います！ ※余談ですが先日Vue.js v-tokyo meetup#16に参加してきました。その中で世界のアクティブVueユーザーの内6~7割はVue2を利用していると伺いました。 今年のこれからはVueのmigration祭りに
ゼロランタイムのミニマルな静的サイトジェネレーター『dodai』の開発と JSX First な世界観について
ゼロランタイムのミニマルな静的サイトジェネレーター『dodai』の開発と JSX First な世界観について2023/01/27 本記事では来たる2/3のKyoto.js #18に備え、年末年始に npm パッケージとして公開した『@potato4d/dodai』という静的サイトジェネレーター(以下SSG)について紹介します。なお、開発にあたって本ブログも @nuxt/content からこの dodai へと移行しています。移行作業の所要時間は 30 分程度でした。 @potato4d/dodai について dodai は 1~5 つ程度の固定ページと、Nつの動的なページを持つ Web サイトの構築を想定した静的サイトジェネレーターです。 元々は私が複数の Web サイトの管理で使っていた Node.js 用の Script 群をパッケージとしてまとめたものになります。 技術的には複数
Next.js製アプリケーションのコンパイルを約100倍高速化した話
Next.jsアプリケーションの開発時においてコンパイルが長時間に及ぶ問題が起きていたので、その原因を特定した手法と採用した解決策について記載します。 今回は結果的にコンパイル時間を100倍以上高速化することができました。 前提 今回の対応は以下のバージョンで行いました。 React@18.2.0 next@12.2.4 tailwindcss@3.2.4 postcss@8.4.14 Next.js の開発中に、コンパイル時間が長くなっていることに気づく 最近、Next.jsアプリケーションのローカル開発時に待ち時間が長くて生産性が低いのでなんとかしたい、という相談を受け、調査を開始しました。 まず、おもむろにyarn devでプロセスを立ち上げてみたところ、以下のようなコンパイル時間を示すログが表示されました。 yarn dev yarn run v1.22.19 $ next dev
axios は v1.0.0 でどう変わるのか
概要 本記事は、HTTP クライアントライブラリである axios の v1.0.0 が満を持してリリースされたため、何がどう変わったのか、マイグレーションしても良いのかについて個人的に調べてまとめた結果になります。 TL;DR axios の v1.0.0 は、パッケージのモダン化に向けた節目としてのバージョンともいえる v1.0.0 では多数のバグ修正と、いくつかの小規模の機能追加がまとめて取り込まれた 破壊的変更や非推奨化は少なからずあるが、基本的な使い方や挙動を大きく変える規模の変更はない 一方で劇的に良くなる変化もないので、急いであげる理由もない 公式マイグレーションガイドは記事執筆時点では提供されていない axios について axios は、JavaScript 向けの HTTP クライアントライブラリの一種で、この種のパッケージとしては比較的古くから普及している老舗ライブラ
2022年Reactを使ってる人には必ず知っていてほしい最強のdata fetchingライブラリであるRTK Queryの優位性とメンテナンスの際に役立つTips - Qiita
import type { ConfigFile } from "@rtk-query/codegen-openapi"; // https://redux-toolkit.js.org/rtk-query/usage/code-generation#simple-usage const config: ConfigFile = { schemaFile: "https://petstore3.swagger.io/api/v3/openapi.json", apiFile: "./store/emptyApi.ts", apiImport: "emptySplitApi", outputFile: "./store/petApi.ts", exportName: "petApi", hooks: true, }; export default config; import { empty
JSのウェブフレームワークで高速なルーターを実装する方法
https://nseg.connpass.com/event/251366/ での発表資料です。
💡 Node.jsのバージョン管理ツールを改めて選定する【2021年】 - Qiita
開発者「すみません、なんかnpm iとかnpxコマンドがうまくいかなくて…」 ワイ「でたー、cb.apply is not a functionって書いてません？」 開発者「書いてます」 ワイ「ちょっと見てみますね」 ワイ「……これはnpm入れなおしたほうが早そうですね…」 ｶﾀｶﾀ… ワイ（うーん…なぜ未だにnodistで消耗しているのか…😨） TL;DR nodistはもうやめよう 選定するときは、まず選定基準を決めよう 関連技術の特徴を洗い出そう それらが自分たちの環境にどれくらいマッチするかで比較しよう Windowsならfnmがオススメ1！ ※ バージョン管理ツールがなんだかわからない方は「Node.jsのバージョン管理ツールとは」からお読みください。 うわっ…私の現場、nodist使いすぎ…？ Node.jsの利用が本格化してきたころ、私の周りでは圧倒的にnodistが流行し
creative codingに入門してみている - すぎゃーんメモ
子ゃーんに喜んでもらいたくて、creative coding入門してp5.jsで色々作る練習してる。今はフワフワでキラキラな可愛いシャボン玉を表現しようと試行錯誤しています pic.twitter.com/qGeRYCelqh— すぎゃーん💯 (@sugyan) October 6, 2021 動機・目的 上記の通り、「子に喜んでもらえるものを作る」ことを目指す。 特にshort codingなどにチャレンジしたりはせず、またgenerative artのようなものよりはどちらかというと"触って遊べる"インタラクティヴなものを優先的に。 1歳半の我が子は最近はiPadの操作も慣れてきていて、幼児向けアプリなどで画面を指で触って楽しむことは出来るようになっている。複雑な操作はまだ難しいが 直感的に動かせるようなものなら楽しんでくれるのでは(という勝手な期待)。 …とはいえ 単純に自分が面白
Laravel + Vue.jsでGoogleカレンダーのクローンを作ろう！！【Laravel8対応】フロントエンド準備編｜Yuu's Memo
皆さんこんにちは！！ 前回までで、最低限のスケジュール管理をできるAPIサーバーの作成が終わりました。 今回からは、フロントエンド編ということで、ようやくWEBアプリの開発らしくブラウザー上で動きを確認できるようになります。 フロントエンドは、Vue.jsで作成するのですが、いくつか開発に便利なライブラリーを利用して開発を行なっていくので、今回は「準備編」ということで、一気にそれらのライブラリーをプロジェクトへ組み込んでいきたいと思います。 では、張り切っていきましょう！！ 前回までの記事はこちらからどうぞ Laravel + Vue.jsでGoogleカレンダーのクローンを作ろう！！【Laravel8対応】準備編Laravel + Vue.jsでGoogleカレンダーのクローンを作ろう！！【Laravel8対応】API作成編①Laravel + Vue.jsでGoogleカレンダーのクロ
WHATWG Stream の話
Node学園37時限目で発表した WHATWG Stream の話です。
真面目にOSSを公開する際にやってみたこと・意識したこと
先日初めて真面目に自分のコードを OSS として公開する機会があり、色々試行錯誤したのでまとめます。 何を公開した？ Vue Word Highlighter という Vue.js のコンポーネントライブラリを公開しました。 機能はとても単純で、文字列と検索クエリを渡すと検索クエリに合致した文字をハイライトする（<mark>タグ又は任意のタグ囲む）というものです。 自分なりに良い感じに使えるコンポーネントが出来たので、せっかくならば多くの人に使ってもらいたいと思い以下で記載する諸々をやってみました。 公開までにやってみたこと 🗒 READMEをちゃんと書く OSS の顔と言ったら README なので、ひと目でちゃんとしてそうな OSS 感を出すために README は整備しました。 ロゴを作る Google Font で良さそうな書体を探し一部をハイライトしただけの単純なものですが、ラ
Reactアプリケーション内でGoogle Analytics計測をする際、react-gaを使わず、gtag.jsを利用した方法とその選択理由｜Dentsu Digital Tech Blog
Reactアプリケーション内でGoogle Analytics計測をする際、react-gaを使わず、gtag.jsを利用した方法とその選択理由 電通デジタルのエンジニア、西山です。 この記事は、電通デジタルアドベントカレンダー2020の3日目の記事です。前回の記事は「2020年に作ったDevOps内製ツール」でした。 この記事ではReactでGoogle Analyticsの計測コードを埋め込む方法についてお話しします。他のブログなどですでに何度も紹介されているテーマですが、ブログによって用いられる手法は様々で、どれを採用すればいいか迷う人も多くいるのではないかと思いますし、中には情報が古くなっているものもあります。 そこで最新の状況を調査した上で、私たちが採用した手法を紹介しますので、ReactでGoogle Analytics計測コードを埋め込む際の参考にしていただければと思います。
Next.jsをサーバーレスでやっていくためのServerless Next.js Component - Sweet Escape
今回は最近その存在感がますます上がっているNext.jsとサーバーレスの話です。 はじめに サンプルアプリ Serverless Next.js Component デプロイ 作成されるリソース CloudFrontのディストリビューション Lambdaファンクション S3バケット 大まかな挙動 できないこと まとめ はじめに この投稿は2020年11月27の21時から開催予定のイベント（ライブストリーミング）で話す内容です。 serverless-newworld.connpass.com もし間に合えば、かつ時間があればぜひライブ配信のほうにも参加ください。 さて、今回は11/9に登壇させていただいたFront-End Studyでの話でも少し紹介したServerless Next.js Componentについて取り上げます。 僕は昨今のフロントエンドWeb周りの技術では最近は一番N
Relayで見るNext.jsとSSGの未来
現在自分が取り組んでいるプロジェクトでは、Next.jsとRelay Modernを採用して開発を進めています。 RelayはFacebookが開発しているGraphQLクライアントライブラリです。 Next.jsの9.3で導入されたgetStaticProps, および9.4で導入されたIncremental Static Regenerationは、Relayと非常に相性がいい、ということを説明します。 Example公式のexampleがすでにあるので見てください。 https://github.com/vercel/next.js/tree/canary/examples/with-relay-modern 以下が典型的なpagesの構成です。 pages/index.js
【Vue.js】Composition API時代の便利ライブラリ「VueUse」を使ってみた - Qiita
Vue Composition API によって Vue.js にも React Hooks のようなロジックの再利用性の高い開発体験がもたらされようとしています。 しかし、まだ「Composition API の良さをわかっていない」という方や「Composition API をうまく利用した書き方がわからない」という方も多いかと思います。 本記事では Composition API 時代の便利ライブラリ VueUse を用いた実装例や、 VueUse 自体の実装がどのようなものか紹介します。 Composition API の良さや雰囲気もキャッチアップしていただければ幸いです。 VueUse とは？ VueUse は Anthony Fu さん1が中心に開発しているライブラリで、Composition API を用いた便利系関数を数多く集めたライブラリです。 例えば、ブラウザ上のマウ
Chromeの拡張機能を自作する - 虎の穴開発室ブログ
こんにちは。虎の穴ラボのH.Hです。 突然ですが、皆さんは普段使っているブラウザは何でしょうか？ 私は普段からChromeを使っており、このブログもChromeを使って書いています。 先日ある拡張機能をChromeに入れるにため機能の説明を読んでいました。 説明の中にGithubのURLが記載され拡張機能のソースコードが公開されており、JavaScriptなどの知識があれば作成可能とわかりました。 またGoogleから簡単な拡張機能を作成するチュートリアルも公開されていました。 そこで、チュートリアルで公開されている拡張機能の実際に作ってみることにしました。 今回は拡張機能の作成した時の手順とデバッグの方法を説明していきます。 Chromeの拡張機能とは Chrome機能はChromeウェブストアなどからChromeに追加することで、標準には無い機能の追加を行うものです。 chrome.g
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Next.js App Router での MPA フロントエンド刷新
Vercel Analytics: Real-time Insights, Peak Performance | Vercel
