You Don't Need Next.js | ドクセル
[beta] Next.jsクイズ2 • <p>にはなにが表示されるでしょうか？ /app/page.tsx "use client"; import { useCallback, useEffect, useState } from "react"; export default function Home() { const [date, setDate] = useState(); const fetchDate = useCallback(async () => { const response = await fetch("/api"); const data = await response.json(); setDate(data.date); }, []); useEffect(() => { fetchDate(); }, [fetchDate]); return ( <
Next.jsはどうやってスクロール位置を復元するのか
Next.jsにはexperimental(実験的機能)でscrollRestorationというフラグが存在します。 // next.config.js const nextConfig = { // ... experimental: { scrollRestoration: true, }, } module.exports = nextConfig デフォルトでもブラウザ側でスクロール位置を復元してくれることもありますが、Safariでは復元されなかったり、ChromeでもgetServerSideProps利用時にはこのフラグを有効にしないとスクロール位置が復元されないなど不安定な状態です。最近この辺りについて識者の方々から色々ご教示いただき、自分では気付けないような部分の知見も多く得られたので、備忘録兼ねてscrollRestorationが何を解決しようとして、どう実装されて
Next.js の API Routes から SWR の型推論を導く
ファイルシステム API Routes の課題 Next.js のファイルシステムを利用した routing は、直感的に定義を追加することができます。一方、モジュールシステム観点からは透過的参照がないため、TypeScript の型推論と相性が悪いです。Next.js における型安全な routing ソリューションとして pathpida がありますが、API Routes には対応していません。 useSWR から API Routes の API を呼ぶシーンで期待に沿うものが見当たらなかったので、今回自作してみました（リポジトリはこちら）本サンプルでは、npm script のpostinstallを hook に、src/types/pages/apiに生成ファイルが出力されるので、あらかじめnpm installを実行してお試しください。 サンプルで実現している型推論概要 は
HTML Centricで行きたい私たち - LIFULL Creators Blog
LIFULLの中島です。 近頃、LIFULL HOME'Sのフロントエンド(ここではJavaScriptのみを焦点とします)もようやく進む道を見出し、そろそろ設計方針を一新しようと試みています。 今回はそれについて話したいと思います。 現在の私たちの課題感 私たちの管理する多くのレガシーコードはDOM操作ライブラリとしてjQueryを、UI設計の格子としてBackbone.Viewのような設計方式を導入しています。 (もちろんそうでないマイクロサービスも多くありますが) 具体的なコード例を示すことこんな感じになります let Slider = Backbone.View({ events: { '.next click': 'next', '.prev click': 'prev' }, next() { this.$(...).css({left: '111px'}); }, ... }
そうです。わたしがReactをシンプルにするSWRです。
この記事について SWR について色々と学んだので、その知見をここで共有したいと思います 💪 ※ 基本的に以下の公式サイトの情報を参考にしています 📖 そのため、この記事で出すサンプルコードなどは主に上記の公式サイトから引用させてもらっています。予めご了承ください 🙏 SWR とは何か？ SWR は、Next.js を作っているVercel 社が開発しているデータフェッチのための React Hooks ライブラリです。"SWR"と言う名前は、 stale-while-revalidate の頭文字をとって名付けられています。そのため、SWR はstale-while-revalidateに基づいた処理と設計になっています。 stale-while-revalidateについて解説したい所ですが、解説するとすごく長くなってしまうため、ここでは「 キャッシュをなるべく最新に保つ機能 」
npm pack時にsrc下の__tests__を無視したい（2021/02/08更新） - cangoxina
npm packをする際に、src下に配置したテストファイルを除外する方法です。ググってもあんまりいい回答がヒットしなかったので記事にします。 2021/02/08 更新：npm v7 に対応しました。 目次 2021/02/08 追記 TL;DR（要約） npm packで圧縮されるファイル 指定したファイルやフォルダのみをnpmパッケージに含まれるfilesフィールド npm packから特定のフォルダを除外する .npmignoreを使うとめんどくさい filesで!を使おう おわりに 2021/02/08 追記 元々は!__tests__で除外ができていたのですが、どうやら npm v7 では!__tests__が使えないことが判明しました。（npm v6 で検証していました...） 回避方法としては!**/__tests__という風にアスタリスクをつけることで npm v6/v7
Vue に stale-while-revalidate がやってくる - STORES Product Blog
STORES でフロントエンド開発をしているushironokoです。今回は Vue でも SWR のようなしくみが使え、遠くない未来で標準的に使われることになりそうだ、という話を書きます。stale-while-revalidate とはどのようなものなのかについても簡単に解説していきます。 SWR(stale-while-revalidate) とは何か Vue や Nuxt 界隈の技術者はあまり縁がないため、そもそも SWR と称されるものが何者なのかご存知でない方も多いはずです。SWR は stale-while-revalidate と呼ばれるキャッシュ戦略に基づいたデータフェッチライブラリで、React のカスタムフックとして提供されています。つまり、元々 React 向けのライブラリとして作られたものです。 github.com stale-while-revalidate
Nuxt v3はどうなるのか - Qiita
2020/09/19にめでたくVue.js v3がリリースされました🎉 さて、私の関心は業務でも利用しているNuxt.jsがVue.js v3に対応するとどうなるのか、Nuxt.js v3はどうなっていくのか気になっています。 Vue.js Amsterdamで紹介されたNuxt.js v3のスライドから個人的に気になったところを抜粋して紹介します。 The State of Nuxt by Sébastien Chopin Nuxt 3 Architecture Updates by pooya parsa 詳しくはスライドを参照ください。 TypeScriptのサポート core や vue-appが型付になる @nuxt/typesやnuxt-tsが不要になる VueComponentのTypescriptサポート（SFC？） ランタイムとnuxt.configのサポート 現状はN
WebGazer.js: Democratizing Webcam Eye Tracking on the Browser
WebGazer.js Democratizing Webcam Eye Tracking on the Browser WebGazer.js is an eye tracking library that uses common webcams to infer the eye-gaze locations of web visitors on a page in real time. The eye tracking model it contains self-calibrates by watching web visitors interact with the web page and trains a mapping between the features of the eye and positions on the screen. WebGazer.js is wri
Integrating Google Sign-In into your web app | Authentication | Google for Developers
Send feedback Integrating Google Sign-In into your web app Stay organized with collections Save and categorize content based on your preferences. Google Sign-In manages the OAuth 2.0 flow and token lifecycle, simplifying your integration with Google APIs. A user always has the option to revoke access to an application at any time. This document describes how to complete a basic Google Sign-In inte
「zeit/swr」のpagination exampleでScroll Position Restoreを試す - Qiita
こちらはNext.js Advent Calendar 2019の22日目の記事です。 はじめに 例えばYoutubeをスマホで見ていたときに、↓のように一度ページ遷移をしてからブラウザバックしたときにスクロール位置が一番上まで戻ってしまった経験はないでしょうか。 これはSPAが抱える課題の1つで、解決するためには「Scroll Position Restore」と呼ばれる「スクロール位置の保持」とその「リストア（復元）」が必要です。 また、それ以外にも「もっと読む」などで画面内に非同期で要素が追加された場合はその要素も合わせて復元しないと正しいスクロール位置には戻れません。これには複雑なStateの管理も必要になってきます。 このように「Scroll Position Restore」を実現するにはいくつか超えなくてはいけない壁があります。 zeit/swr の登場 2019年10月、
Universal Data Fetch ライブラリ、 Specter の紹介 - from scratch
この記事は Recruit Engineers Advent Calendar 2019 の 16日目の記事です。 adventar.org 最近僕が作っている OSS である Specter の話をします。 github.com Specter とは Client から Backend と BFF から Backend への Universal なデータフェッチを提供してくれるためのツールです。以下の特徴を持ちます。 軽量 TypeScript Freindly な型付け機能 投機的先読み 2年ほど前に報告されたCPUの投機的実行に基づく脆弱性である、 Spectre から来ています。と言っても、脆弱性の名前ではありません。投機的先読みを機能として持っているため、この名前をつけています（不吉な名前ではありますが・・・）。 まずは、 GraphQL でも grpc-web でもなく、なぜこ
NodeJSのIntlサポートを調べた - Islands in the byte stream
IntlというのはECMAScript Internationalization APIのこと ECMA-402 として標準化 Intl - JavaScript | MDN NodeJSでも利用可能だが、ビルドオプションによって様子が変わる NodeJSのICUサポートは none, system-icu, small-icu, full-icu というオプションが用意されている https://nodejs.org/api/intl.html 公式バイナリのオプションは small-icu で、これは英語だけをサポートしている 起動時にICU dataを与える事も可能 この情報は node -e 'console.log(process.config.variables)' で調べられる Intl によってI18N処理をするときに日本語サポートをしたい場合、3つの選択肢がある full
Evaluating JavaScript code via `import()`
The import() operator lets us dynamically load ECMAScript modules. But they can also be used to evaluate JavaScript code (as Andrea Giammarchi recently pointed out to me), as an alternative to eval(). This blog post explains how that works. eval() does not support export and import # A significant limitation of eval() is that it doesn’t support module syntax such as export and import. If we use i
aタグの中にaタグを書きたい時のtips - Qiita
html5ではインライン要素とブロックレベル要素の分類はなくなり、html4以前でインライン要素だったものの中にブロック要素を入れることができたりするようになりました。 また、そうすることでコンテンツ全体をaタグで囲い、その中にまたaタグを入れるようなレイアウトが出来るように成りました。 よくあるリンクの中にリンクを入れたいレイアウト よくありますよね！ 全体をリンクにしてるけど、中の一部は違う場所にリンクを貼りたい！ これの実装を考えてみます。 実装方法 見た目通り普通に書いてみる aタグの中にaタグを書いて実装しようとすると以下のように書くと思います。 <a href="/articles/1"> <!-- 全体をクリックすると記事ページヘ遷移 --> <img src="/assets/articles/1.jpg"> <p>タイトルタイトル</p> <div> <span>著者名：
ブラウザから使える O/R マッパ、 js-data を使ってみる - クックパッド開発者ブログ
ヘルスケア事業部の濱田です。花粉がつらい時期ですが、みなさん楽しく開発してますか？ おいしい健康では、JavaScript（以下 JS）で非同期にサーバ側のリソース操作を行う際に、js-data というライブラリを使っています。Rails ユーザにとってはとっつきやすい便利なライブラリですが、日本語での情報がほとんど見当たらなかったため、簡単にご紹介したいと思います。 js-data とは JS 製のデータ管理用ライブラリです。RESTful API などを通じて取得できるデータ（リソース）を抽象化して、CRUD 操作を統一したインターフェースで行えるようにしてくれます。 リソースごとにオブジェクト（モデル）を定義したり、find でデータを取ってくるなど、ActiveRecord などの O/R マッパのような使い勝手が特徴。設計等には Ember data の影響を受けています。 以下
JavaScript を PNG に圧縮する | Yomotsu net
JavaScript を PNG に圧縮するツールを作りました。JS_Packer demoscene は最近 WebGL を使ったものも多くなってきています。 demoecene は基本的に ローカルにファイルとして存在しているものを使う そのファイル容量は 1 バイトでも少ないほうがいい (容量制限がある分野がある) という文化です。そして JS ファイルを圧縮する手法の一つに、JS を PNG 画像にして、それをデコードする、という手法が存在します。 JS の性質JS のコードは基本的にアスキー文字の集まりです。アスキーコードは、小文字/大文字のアルファベット、数字、スペースといった 128 種類しか存在しません。 PNG8 の性質8 ビット PNG は 256 種類の色をパレットに持っています。 PNG は可逆圧縮（ロスレス）形式の画像です。圧縮しても失われるデータはありません。
markdownを直接ReactElementに変換するコンパイラを書いた - Qiita
mizchi/md2react デモページはここ md2react playground 作った目的 巨大なmarkdownをリアルタイムプレビューする際、ただの文字列をinnerHTMLとかで更新したりしていると、更新の度にパース処理が走ってどんどん重くなってくる。 React には dangerouslySetInnerHTML というプロパティがあって、一応それっぽい感じで差分管理してくれるが、名前の通り色々怪しい挙動をする。 なのでmarkdownのASTから直接ReactElementを吐けるようにするとReactの差分計算で描画高速化されて良いのでは、というわけで作った。これはMarkdownPreview界にとって救いとなるであろう。 どこで使う目的かはお察しください 使い方 global.React = require('react'); var md2react = re
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - tomi/fromfrom: A JS library written in TS to transform sequences of data from format to another
Radium - A React Component Styling Library