CSSのclass名やJavaScriptの関数名を付けるときに悩んだり、ネタ切れになったことはありませんか？ BEM, OOCSS, SMACSSで命名する場合はそれを使用すればよいのですが、特定のテーマ別にグループ化された単語のリストが必要になるときもあります。そんなときに役立つ単語リストをまとめたClassnamesを紹介します。 Classnames Classnamesは、CSSのclass名やJavaScriptの関数名を付けるときに便利な単語をリスト化したものです。MITライセンスで、商用プロジェクトでも無料で利用できます。
HTML要素をグラフィカルにアニメーション化できるJavaScriptライブラリ「Theatre.js」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、HTML要素を簡単にアニメーション化できるJavaScriptライブラリをご紹介します。 初期設定はJavaScriptで書きますが、実際のアニメーション作りに関してはタイムラインエディタを利用した直感的な操作で実現しているのが大きな特徴です。ちょっとしたインタラクションから3Dアニメーションまでカバーできるライブラリなので、ご興味ある方はぜひ参考にしてください！ 【 Theatre.js 】 ■「Theatre.js」の導入について！ それでは、「Theatre.js」をどのように使えばいいのか詳しく見ていきましょう！ 既存のWebサイトへ「Theatre.js」を導入する方法はいくつかあるのですが、今回はもっとも基本的な手段としてCDN経由でライブラリを読み込んでみます。これはHTMLファイルが1つあれば完結するので、ちょっと試して
シェルスクリプトをJavaScript/TypeScriptで記述、どのOSでも実行できる「Bun Shell」、JavaScriptランタイムのBunが発表
JavaScriptランタイムのBunは、新機能としてシェルスクリプトをJavaScriptもしくはTypeScriptで記述し、特定のOSに依存せずに実行できる「Bun Shell」を発表しました。 シェルスクリプトは特定のシェルに依存するもの LinuxやmacOS、WindowsなどのOSは一般に、「シェル」（Shell）と呼ばれる機能を備えています。 シェルはコマンドラインインターフェイスなどのユーザーとの対話機能を備えており、例えばLinuxのコマンドラインで「ls」コマンドを打ち込むとファイルの一覧が返ってくるという動作はシェルが提供しています。 そしてシェルでは一般に、こうしたコマンドを複数つなげた一連の動作をスクリプトとして定義し実行できる「シェルスクリプト」が利用可能です。例えば、次のシェルスクリプトは、「ls」コマンドによるファイルの一覧をファイル「list.txt」に
ヘッドレスCMSの使い分け
Next.js vs Drupal - デジタル庁 Web サイトの戦い。モダン vs レガシーの熱いバトルがいまここに！SIer 系のみなさまの参戦もお待ちしております！ヘッドレスCMS ってなに？デジタル庁の事例とともに考える。
フロントエンド刷新のために DevTools を作って開発を捗らせる - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは、フロントエンドエキスパートチームの麦島(@mugi_uno)です！ 2021年5月に新しくメンバーとして加わり、富山からフルリモートで働いています。 最近はチームメンバーに誕生日を祝ってもらって嬉しかったです🎉 さて、以前に "kintoneのフロントエンド刷新に向けた取り組み"*1 というエントリでもご紹介しましたが、現在サイボウズ社内では kintone で利用するフロントエンドの技術スタックを刷新する取り組みを進めています。 その一環として、 "Closure Tools DevTools" という Google Chrome 向け拡張機能を作成しました。 作成した DevTools は kintone に限らず利用することができるため、Chrome ウェブストアで公開しています。 chrome.google.com ソースコードも次のリポジトリでご確認いただけます。
を目指してまた自作ゲームライブラリを作っている。 ゲーム制作体力が無いならゲーム作りをやめればいいのだが、ウン十年とゲームを作り続けているゲーム制作ジャンキーはそんなことでは立ち止まれないので、より短時間で体力が尽きる前にゲームを完成させるためのライブラリを再発明し、今日もゲーム制作RTAを走るのだ。1時間くらいで完走できるのが理想。 crisp-game-libは短時間で手軽にブラウザゲームを作るためのJavaScriptライブラリだ。2014年に50個のミニゲームを作ったが、そのときにはそれらゲームを作るためHaxeライブラリmglとCoffeeScriptライブラリmgl.coffeを合わせて作った。その後も懲りずにミニゲームとライブラリ作りを続けた経験を活かし、クラシックでアーケードライクなミニゲームを作るために必要最小限な機能を備えたライブラリを目指して、crisp-game-l
少し前に仕事場のローカルに立てている、今や主力でなくなったウェブサーバに久しぶりにアクセスしたら、Wiki が PukiWiki なのに懐かしくなってこれまた久しぶりに公式サイトを見てみた。すると、今年バージョン1.5.4がリリースされており、開発は継続しているのに少し感動した。 かつてはそれこそ雨後の筍のごとく開発されていた Wiki ソフトウェア（エンジン、クローン）だが、Wiki が広義の開発環境の一つに統合されているのもあり、単体のソフトウェアとして今も開発が続いているところはだいぶ少なくなった印象がある。 果たして今も開発が継続しているオープンソースの Wiki ソフトウェアに何があるか、ざっと調べてみた。 具体的には、Wikipedia の Comparison of wiki software に名前があるもので（それくらいの知名度があり）、オープンソース、なおかつ安定最新版
JSConf JP 2024 での発表資料です
User Agent文字列を使ったブラウザ判定の事例 2022年版 - yigarashiのブログ
やむを得ず、User Agent文字列を使って特定のブラウザ向けにJavaScriptの処理を分岐する必要が生まれてしまったので、調査・検討のログを記事にまとめます。 基本的にはバッドプラクティスである ユーザーエージェント文字列を用いたブラウザーの判定 - HTTP | MDN まずはMDNがドキュメントを公開しているので読みましょう。要点は以下です。 基本的にUser Agent文字列に基づいて処理を出し分けるのはバッドプラクティス 多くのケースではUser Agent文字列を使うよりも良い手段がある 例えば特定の機能の実装状況に基づく分岐を行いたければそれを直接検出する それでもやむを得ない場合、User Agent文字列からブラウザ名、レンダリングエンジン、バージョン、OS、端末といった情報を取得することができる ただし各ブラウザのUser Agent文字列は嘘をついていることもあ
Electron代替を目指すRust製フレームワーク「Tauri」がバージョン1.0に到達、Windows/Mac/Linuxに対応
Electron代替を目指すRust製フレームワーク「Tauri」がバージョン1.0に到達、Windows/Mac/Linuxに対応 JavaScriptとHTML/CSSを用いてアプリケーションを構築できるElectronの代替を目指し、より軽量なフレームワークとして開発されている「Tauri」がバージョン1.0に到達し、正式リリースとなりました。 After 4 months of release candidates we're proud to release version 1.0 of Tauri! Windows, Menus, System Trays, Auto Updater and much more are now at your fingertips! Check it out!https://t.co/NEt3knFTIs — Tauri (@TauriApps
初めに Vue.js の学習をしているとよく「Vite」という単語を目にすると思います。 一体全体あれはなんなのでしょうか？？ なんだかよく分からないコマンドを打つと、いつの間にかプロジェクトが作成されていたり、 ファイルを編集するだけでブラウザで動くようになっていたりします。 そもそも読み方も良くわかりません 😵💫 (ヴィテ...？ ヴァイト...？) この記事では、Vite についての基本的な情報をまとめてみます。 発音？ 発音の仕方は「ヴィート」です。こちらは公式ドキュメントにも書かれています。 Vite（フランス語で「素早い」という意味の単語で /vit/ ヴィートのように発音）は、 しかし、実はこれにはやや表記揺れがあって、「ヴィット」と表記されているところもあります。 例えば、話題になった Kawaii ロゴではそのように表記されています。 まぁこれらはカタカナ表記の限界
class: middle, center <img src="./assets/logo.svg" align="center" width="200" /> Deno の これまで と これから --- アジェンダ - Deno とは - Deno のこれまでのロードマップ - Deno のこれからのロードマップ --- # 話す人 <img src="./assets/hinosawa.jpg" align="right" width="300" /> 日野澤歓也 twitter @kt3k - GREE (2012 - 2013) - Recruit (2015 - 2019) - Deno Land (2021 -) <small>2018年から Deno にコントリビュートを開始。2020年作者に誘われ Deno Land に転職。現在はフルタイムで Deno と Deno D
JavaScript エンジンの高速化
これらの JavaScript エンジンのうち、以下では特に JavaScriptCore を扱います。 最適化の基本戦略 JavaScript をはじめとする動的言語は、主にインタープリタにおいて実行されます。しかし、インタープリタはコンパイルされたコードと比較して実行に時間を要するという欠点があります。そこで、インタープリタの最適化では、バイトコードの JIT コンパイルが最初に行われます。 しかし、コンパイルには当然時間がかかります。少しでも高速化されたコードを生成するには、より多くの時間をコンパイルにかけなければなりません。コンパイルによる速度向上とコンパイルのレイテンシはトレードオフの関係にあります。 そこで、多くの JavaScript エンジンは、インタープリタと多階層の JIT コンパイラの組み合わせで構成されています。次の図は、主要な JavaScript エンジンの設計
こちらのイベントのLT登壇資料です。 https://ochacafe.connpass.com/event/308830/ 登壇後、資料内の論理展開を登壇者の判断で改善しております。以下は登壇時からの主な修正点です。 ・レガシーMPAについて、FCPのみに着目して初回表示が遅いとしてい…
Webpackの後継となる新バンドルツール「Turbopack」が登場。Rust製のネイティブアプリケーションでWebpackの700倍高速に。Next.js Conf 2022
Webpackの後継となる新バンドルツール「Turbopack」が登場。Rust製のネイティブアプリケーションでWebpackの700倍高速に。Next.js Conf 2022 Reactベースのサーバサイドフレームワークとして知られるNext.jsの開発元のVercelは、日本時間10月25日深夜にイベント「Next.js Conf 2022」を開催。Next.jsの最新バージョンとなる「Next.js 13」と、Rust製の高速なバンドルツール「Turbopack」を発表しました。 Introducing Turbopack, the successor to Webpack. ~700x faster than Webpack 10x faster than Vite Native incremental architecture built with Rust Support f
Grit
Grit automatically fixes technical debt by combining static analysis and machine learning to generate pull requests that clean up code and migrate to the latest frameworks.
前回の記事では、JavaScript の実行エンジン V8 の JIT 出力コードを読んでみました。記事は M1 Mac 上で動かした結果でしたので、ARM アーキテクチャのアセンブラを読むことになりました。 さてそんな ARM アーキテクチャですが、最近の ARM には FJCVTZS という JavaScript 専用の機械語命令があるのをご存知でしょうか？CPU に、特定の言語（それもコンパイラを持たない JavaScript）専用の命令があると知ったとき、私は大いに驚きました（過去にも Jazelle みたいなものはありましたが） 今回は、この FJCVTZS 命令について、実際にどれだけ効果があるのか、V8 をビルドしながら調べてみましょう。 FJCVTZS 命令とは？ FJCVTZS 命令は、Arm v8.3 から導入された JSCVT 命令の一つで、JavaScript の言
Webブラウザ上でWebAssemblyベースのNode.js環境を実現する「WebContainer」がAPI提供開始。ブラウザ内ファイルシステム、HTTPサーバ、Node.js CLIなど
Webブラウザ上でWebAssemblyベースのNode.js環境を実現する「WebContainer」がAPI提供開始。ブラウザ内ファイルシステム、HTTPサーバ、Node.js CLIなど WebAssemblyを用いてWebブラウザ上でNode.js環境を実現する「WebContainer」などを提供するStackBlitzは、WebContainerにアクセスできるAPIの提供を開始したと発表しました。 Today, after years of battle testing by millions of developers, in collaboration with browser vendors: WebContainer API is now available to everyone. Start building the next generation of inte
最近 React コード生成機を作っていて「一番文句言われなさそうな React コンポーネントの書き方ってなんだ…？」と改めて疑問に思ったので考えてみました。 結論から言うと以下の形をデフォルトにするのが良さそうかなと思いました。 function vs. アロー関数 -> アロー関数 型は基本的に VFC でつけて、 children が欲しい場合は明示的に props に追加する return を省略可能な時省略するか -> しない props を destructure するか -> しない派だったけどした方がいい気がしてきた const Hoge: React.VFC<Props> = ({ title }) => { return ( <Fuga title={title} /> ) } ちなみにですが、大事な前提として TypeScript を使うことを前提としています。(型
Chat with v0. Generate UI with simple text prompts. Copy, paste, ship.
axios は v1.0.0 でどう変わるのか
概要 本記事は、HTTP クライアントライブラリである axios の v1.0.0 が満を持してリリースされたため、何がどう変わったのか、マイグレーションしても良いのかについて個人的に調べてまとめた結果になります。 TL;DR axios の v1.0.0 は、パッケージのモダン化に向けた節目としてのバージョンともいえる v1.0.0 では多数のバグ修正と、いくつかの小規模の機能追加がまとめて取り込まれた 破壊的変更や非推奨化は少なからずあるが、基本的な使い方や挙動を大きく変える規模の変更はない 一方で劇的に良くなる変化もないので、急いであげる理由もない 公式マイグレーションガイドは記事執筆時点では提供されていない axios について axios は、JavaScript 向けの HTTP クライアントライブラリの一種で、この種のパッケージとしては比較的古くから普及している老舗ライブラ
Webブラウザの拡張機能を標準化へ、Apple、Google、Mozilla、マイクロソフトらがW3C WebExtensions Community発足
W3Cは、Apple、Google、Mozilla、マイクロソフトらがWebブラウザの拡張機能の標準化や仕様改善のためのグループ「WebExtensions Community Group」を発足させたことを発表しました。 #w3ccommunity Forming the WebExtensions Community Group https://t.co/WrPPsRt23M — W3C (@w3c) June 4, 2021 WebExtensions Community Groupは、「ブラウザ拡張機能に関する共通のビジョンを持ち、将来の標準化に向けて活動する」ことを目的としています。 そのなかでも特に、開発者が拡張機能を簡単に作成できるように一貫性のあるモデルと共通化された機能やAPIなどの策定、および高性能かつ高セキュリティなアーキテクチャのアウトラインを示すことに注力するとし
先日、こんな記事を見かけました。 テックブログは続かない - note.com 採用目的でテックブログを始めたものの、時間の経過とともに古い記事ばかりになる or すでに退職している社員の記事ばかりになる…というのはよく見かける光景です。 目の前のタスクが積み上がっている状況で、業務時間内にブログを書く時間を取るのはなかなか難しいと思います。 そうは言っても業務時間外に無償で会社のブログに書くのもなかなか気乗りしません。「数年以内に転職するかもしれない」という気持ちがあればなおさらです。記事が転職しても自分のものとして残るのであれば、書くモチベーションは上がるのかもしれません。 その後、こんなツイートを見かけました。 企業のテックブログと言えば「会社がひとつブログを作って、みんなでそこに投稿する」という形が当たり前になっていますが、たしかに個々人の投稿を集約する場所を用意するだけでも良いの
TypeScriptのモノレポ構成を考える
はじめにlink あまりモノレポの構成について語られている記事が多くないなと感じたので、現時点で自分が考えている設計をまとめてみる。 以前にTwitterでディレクトリ構成と内容については言及したが、実際に利用する技術についてはあまり触れなかったので改めて検証してみた。 https://twitter.com/koh110/status/1617510034266808322 クライアントサイドとサーバーサイドのコード共有については下記の記事がよくまとまっていた。 https://capelski.medium.com/effective-code-sharing-in-typescript-monorepos-475f9600f6b4 上記の記事の構成も参考にしつつ、自分の考えも加えて検証していく。 相対パスを利用する方法 npmのローカルパス指定（file:xx）を利用する方法 シンボ
いずれもMITライセンスで公開されていますので、個人・商用問わず利用可能です。 Slick.js Slickスリック.jsは簡潔なコードで実装できるのが特徴のモバイルフレンドリーなカルーセルライブラリです。機能は少なめですが、ナビゲーションや表示するスライド数を変更するといった基本的な機能は備わっています。jQueryプラグインのため実装にはjQueryを読み込む必要があります。タッチ・スワイプ操作にも対応しています。ReactやVue向けのモジュール、TypeScriptのサポートは公式で提供されていませんがOSSで存在します。 このJSライブラリの基本的な実装と、アニメーションをフェードに変えた作例を用意しました。 基本の作例 サンプルを別ウインドウで開く コードを確認する <div class="slick carousel"> <div>1</div> <div>2</div> <
そこそこの規模があるプロジェクトで実行すべきタスクを定義するとき、初手として Makefile を使いがち。 Pros make は事実上どんな環境にもあることを期待してよい シェルで実行されるコマンドをそのまま書ける タスクの依存関係が明示できる Cons make では positional arguments が使えない 少し複雑なことをしようとすると Makefile 専用の文法を覚える必要がある 現代では、ファイルベースのタスクの依存関係は make が発明されたころほどは必要ではない Docker とか Go とか Webpack がよしなにしてくれることが多い 例: docker compose のラッパー ちょっとしたコマンドのラッパーを書きたいことがある。Makefile を書きはじめたらすべてのエントリポイントを make にしたい。ということで、以下のような Make
HonoというWebフレームワークがあります。Express.jsのような書き方でWebアプリケーションを作れるものです。 import { Hono } from "hono"; const app = new Hono(); app.get("/", (c) => c.json({ message: "Hello, Hono!" })); export default app; HonoはWeb標準準拠を謳っているフレームワークです。それを聞くとなんだか小難しく感じます。 Web標準とは Request と Response のインスタンスを扱うということです。これらは主にブラウザ上のJavaScriptのfetch関数が取り扱うオブジェクトですね。 RequestはfetchでHTTPリクエストを送信するときに、データをまとめておくオブジェクトです。例えば送信先のURLやHTTPメソ
この記事について Zenn では長らく通信処理に Axios を使っていました。 しかし、Fetch API が多くのモダンブラウザなどで普通に使えるようになった今、使う必要性があまり無くなったため、Axios を使っている処理を全て Fetch API に置き換えることになりました。 この記事では、その置き換え作業をどう進めていったのか、その結果どう良くなったのかを解説していこうと思います 🗽 解説より置き換えた結果を知りたいのよ私は！！！ って方が居るかと思いますので、最初に置き換えたことで良くなった部分を紹介しようと思います。 まず一番良くなったところといえば、ずばりサイト全体のビルドサイズが 10 KB も減りました。( ちなみに、10 KB は圧縮時のサイズで、圧縮しない場合 100 KB になります 😇 ﾜｰｵ ) グローバルのビルドサイズが 103.35KB gzip 時
Next.jsはどうやってスクロール位置を復元するのか
Next.jsにはexperimental(実験的機能)でscrollRestorationというフラグが存在します。 // next.config.js const nextConfig = { // ... experimental: { scrollRestoration: true, }, } module.exports = nextConfig デフォルトでもブラウザ側でスクロール位置を復元してくれることもありますが、Safariでは復元されなかったり、ChromeでもgetServerSideProps利用時にはこのフラグを有効にしないとスクロール位置が復元されないなど不安定な状態です。最近この辺りについて識者の方々から色々ご教示いただき、自分では気付けないような部分の知見も多く得られたので、備忘録兼ねてscrollRestorationが何を解決しようとして、どう実装されて
フロントエンド開発の準備
開発の前に決めておくこと 後から変更するのが難しいこと、大きな手戻りが発生する可能性のあることをできる限り開発のはじめに決めておきます。 多言語対応の有無 URLに依存する可能性が高い多言語対応は、後から対応すると制限がかかったり破壊的な変更が必要になる場合があるので、はじめに決めておきます。 多言語対応する予定はなかったけど、後から必要になってしまった場合は仕方ないと思います。 OGPの必要性 動的ルーティングに対するOGPの必要性によってレンダリング方法の選定やCDN周りの選定が変わってきます。 SEOのニーズ こちらもOGP同様レンダリング方法に影響します。 OGPに関しては後からなんとかなることもありますが、SEOが重要なサイトの場合、そもそもSPAを選択しない方が適している可能性もあるので重要です。 対応ブラウザ/バージョン これを明確にしないと、一部のブラウザで使用できないCS
JavaScript PrimerのNotebookLMが利用可能になりました。 NotebookLMは、Googleが提供するAIを活用したノートブック環境で、登録したソースに対して質問をしたり、情報を検索したりすることができます。 次のリンクから、JavaScript PrimerのNotebookLMにアクセスできます。 📖 JavaScript Primer - 迷わないための入門書 - NotebookLM JavaScript Primer on NotebookLM JavaScript PrimerのコンテンツがNotebookLMに入ってることで、読者は書籍の内容についてNotebookLMに直接質問したり、Podcastとして音声で聞いたりすることができるようになります。 NotebookLMを活用することで、JavaScript Primerを読み進める中で生じた疑
結局 useEffect はいつ使えばいいのか
useEffectはReactの中でも扱いの難しいフックとして知られています。Reactで開発を行う中でuseEffectを検討するタイミングや適切な使い方について悩んだ経験のある方も多いのではないでしょうか。 本記事では、useEffectの目的を把握し、どのような場合にuseEffectの使用を検討すべきかについて考えていきたいと思います。 コンポーネントの純粋性と副作用 まずuseEffectについて考える前に、コンポーネントの純粋性について理解する必要があります。Reactにおいて純粋性は重要な概念の1つです。 前提として、Reactではすべてのコンポーネントが純関数であることを仮定しています。 Reactは、あなたが書くすべてのコンポーネントが純関数であると仮定しています。 参照：https://ja.react.dev/learn/keeping-components-pure
はじめに 今回は、現代のWEB開発で最も使用されている言語/フレームワークであるTypeScript/React/Next.jsについて学ぶために、私がおすすめしたい学習資料についてご紹介したいと思います。 非常に有用で、初心者から中級者、上級者まで幅広い層に向けた内容が含まれていますので、時間を見つけて是非読んでみてください。 ※TypeScript/React/Next.jsって何？という方のために、簡単に以下にそれぞれご説明いたします。 TypeScript Microsoftが開発した、JavaScriptを拡張したプログラミング言語。JavaScriptに比べ、型安全性の向上によるエラーの早期発見や、型注釈でコードの意図を明確にすることによる可読性/メンテナンス性の向上が期待できる。現代のWEB開発においては、ほとんどの開発者がJavaScriptからTypeScriptへ移行し
Firebase Authentification は OAuth 2.0 フローにのっとったログイン方法以外にも Email/Password を使ったログイン方法も提供しています。 このログイン形式をちゃんと使おうとすると、これまでは Provider が担ってくれていたパスワードの編集、パスワードの再発行、メールリンクでのログイン、アドレスの本人確認など様々なことを考慮しなければいけません。 この記事ではそういった考慮をした Email / Password ログインに挑戦します。 基本的にはmanage-users, password-auth, email-link-authといった公式ドキュメントを読むと IPASS ログインに必要なことは書いてあるのですが、action URL を自前で用意するフローを採用するとそれらのドキュメントで賄えなくなり試行錯誤をたくさんしなければい
明日、2023/9/28に発売する「これからはじめるReact実践入門」を献本いただきましたので、簡単に目を通した感想を書こうと思います。 これからはじめるReact実践入門 目次 目次 かなり網羅性が高い 足りない情報があったら プロを目指す人のためのTypeScript入門 Next.jsについて、次に読む本はありますか？ 補足したいところ Create React Appを使わない選択肢もある Recoilさんは開発状況がちょっと心配 React Routerの知識が活きるアプリケーションフレームワークもある まとめ おまけ 2023.9.28 10:36追記 かなり網羅性が高い パラパラと読んでみて感じたのは、かなり手広く、それでいて一定の深みもある本だということです。出版社のサイトにある目次を見てみましょう。 Chapter 1 イントロダクション 1-1 ReactとJavaS
WebSockets vs Server-Sent-Events vs Long-Polling vs WebRTC vs WebTransport For modern real-time web applications, the ability to send events from the server to the client is indispensable. This necessity has led to the development of several methods over the years, each with its own set of advantages and drawbacks. Initially, long-polling was the only option available. It was then succeeded by Web
はじめに 弁護士ドットコム デザイナーの林（@taka_piya）です。 弁護士ドットコム 案件管理システムでは、アプリケーションとUIの状態管理にXStateを用いたステートマシンでの管理を導入しています。 この記事では、UIデザインの考え方にステートマシンを導入し、実装まで一気通貫で行う方法と、そのメリットについて説明します。 はじめに UIは2つの要素からなっている ステートマシンを理解する 定義 状態遷移図 ステートマシンを使ったUIデザイン〜実装プロセス ステートマシンを定義する Figmaで表現する JavaScriptで表現する ステートマシンをアプリケーションに適用する UIデザインにステートマシンを導入するメリット 振る舞いに集中できる チームの共通認識として使える 変更に強い おわりに 関連ドキュメント ALPS-ASD UIは2つの要素からなっている Android
Next.js の App Router が安定版となり、React Server Components (以下 RSC) を実際に試す環境が整ってきた。 実際、今年はやれどこそこのプロダクトが Next.js を採用しただのやっぱり捨てだのといった話題が尽きなかったように思う。 かくいう自分自身も、今年は App Router の案件に取り組んで RSC と格闘する日々を送っていた。 その過程で、こんなようなことを考えるようになったので、今回はこの辺りの話を書き残しておこうと思う（何回か X に同じ旨の POST は上げていたけど、一回もちゃんとまとめてなかったので）。 RSC がない頃の、別の言い方をすると getServerSideProps を使っていた頃の、Next.js におけるアプリケーションの設計は、トラディショナルな MVC にかなり近しい。 ここでいう MVC は、Sp
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSのclass名やJavaScriptの関数名を付けるときに役立つ単語リストのまとめ -Classnames
残りゲーム制作体力10%な人のためのずぼらゲームライブラリcrisp-game-lib - ABAの日誌
今も開発が継続しているオープンソースのWikiソフトウェアは何があるか - YAMDAS現更新履歴
React への依存を最小にするフロントエンド設計
Vite ってよく聞くけど何なんですか？ あれは
Deno のこれまでとこれから JSConf JP 2021
フロントエンドパフォーマンスの変遷とNext.jsに見る次の時代
ARM に存在する JavaScript 専用命令「FJCVTZS」を追う（ついでに V8 をビルドする）
一番文句言われなさそうな React コンポーネントの書き方
v0 by Vercel
チーム個々人のテックブログをRSSで集約するサイトを作った（Next.js）
カルーセルUIを実現するJSライブラリまとめ(2024年版) - 導入手間や機能の比較紹介 - ICS MEDIA
Makefileの代わりにnpm scripts+zxを使う - 詩と創作・思索のひろば
コインハイブ事件、最高裁で無罪に 男性「心底安堵しています」戦い振り返る - 弁護士ドットコムニュース
Honoの捉え方、またはNext.jsとの組み合わせ方 | stin's Blog
Axios 使うのやめたらビルドサイズが 10 KB 減って、なんか知らんがパフォーマンスも良くなった話
新規タブリンクの恐ろしい仕様、Chrome 88で変更へ ～Safari/Firefoxに合わせた安全な仕様に／“rel=noopener”を付け忘れても大丈夫【やじうまの杜】
JavaScript PrimerのNotebookLMが利用可能になりました！
TypeScript/React/Next.jsおすすめ学習資料のご紹介
firebaseでのパスワードログイン機能の実装をやりきるためのTips
書評：これからはじめるReact実践入門 - ナカザンドットネット
WebSockets vs Server-Sent-Events vs Long-Polling vs WebRTC vs WebTransport | RxDB - JavaScript Database
UIデザインにおけるステートマシン - 弁護士ドットコム株式会社 Creators’ blog
React Server Components と GraphQL のアナロジー
www.drreceipt.jp
bestcarweb.jp
monte-cristo.jp
w.atwiki.jp
poyotan.com
comic-days.com