Honoで見直すMPAの開発者体験
Next.js App Routerのリリース以降、 async function で書けるServer Componentsいいじゃんファイルベースルーティングも使いやすいなと触ってたのですが、まだ安定していないこともあり不可解なエラーメッセージや複雑なキャッシュの仕組み、デプロイ先を選ぶ感じなどこのままNext.jsにベットしてていいのかなと感じていました。 そんな折にHonoでシンプルなフォームを持つWebアプリを書く機会があり、非常に優れた開発者体験に驚きました。5年以上前にMPAを開発した経験もありますがそこから比べてもとても良くなっていて、Honoの良さを感じるとともにMPAというアプローチを見直すきっかけになりました。 そもそも現在Webフロントエンドを構築する際に当たり前のように選択肢に上がるSPAですが、必ずしもSPAが適していない場合でもSPAが選択されることが少なくな
「TypeScriptが当たり前」になった世界において、ESモジュール本来の運用に必要な考え方と設定とは - Findy Media
こんにちは、藤吾郎（gfx）と申します。Starleyという会社でおしゃべりAIアプリ「Cotomo」を開発しています。TypeScript歴は10年くらいです。 はじめに - TypeScriptが当たり前になった世界今年（2025年）はTypeScriptがリリースされて13年、ESモジュールが導入されたES2015のリリースから10年が経ちます。今やJavaScriptプロジェクトにおいては、TypeScriptが当たり前の世界になってきました。つまり「JavaScriptプロジェクトの実装言語のデフォルトはTypeScript」という状況にかなり近づいています。 TypeScriptが当たり前の世界とは、JavaScript処理系がデフォルトでTypeScriptをサポートしている世界のことです。Node.jsでTypeScriptサポートが始まり、BunやDenoのように最初から
モダンCSSの新機能のブラウザ対応がこれで簡単になる！ Modernizrに代わる新しいスクリプト -SupportsCSS
2023年もCSSの新しい機能が続々とリリースされ、進化が早いですね。魅力的な新機能を使用するときに気になるのが、ブラウザのサポートです。 ブラウザがその機能をサポートしているかチェックし、判別するクラスを付与してくれるといえば、Modernizrですが、その更新はストップしています。 そんなModernizrに代わる、モダンCSSに対応したスクリプト、SupportsCSSを紹介します。@containerも@layerも:has()もsubgridもcolor-mix()にも対応しています。 SupportsCSS SupportsCSS -GitHub SupportsCSSはModernizrにインスパイアされたスクリプトで、モダンCSSに使用されるセレクタ・機能・@ルールなどのサポートをライブ検出できます。 CSSの@supportsもサポートしている機能を検出できますが、Sup
engineering.mentemo.com この記事は↑の記事の後編です。 前編からだいぶ日が空いてしまいましたが、今回はメンテモのWebアプリケーションがVercelからCloud Runに移行するまでの実際の作業を紹介します。 はじめまして。 @itometeam です。メンテモで業務委託として開発全般のお手伝いをしています。 メンテモのWebアプリケーションはフロントエンドにNext.jsを使っています。 元々は例に漏れずVercelを使っていましたが、スケールするにつれてどうしてもボトルネックになる部分が増えてきたため別の環境に移すことを検討し始めました。 もちろんVercelはNext.jsのデプロイ先として今後も一番の選択肢としてあり続けると思います。 Webサーバをクラウド上に構築する上で意識するべきことをほとんどおまかせでやってくれますし、プレビューURLの自動生成など
React Bits
An open source collection of high quality, animated, interactive & fully customizable React components for building stunning, memorable user interfaces.
新たなサーバサイドJavaScriptランタイム「WinterJS 1.0」正式リリース、WebAssemblyへのコンパイルも可能。Wasmerが開発
新たなサーバサイドJavaScriptランタイム「WinterJS 1.0」正式リリース、WebAssemblyへのコンパイルも可能。Wasmerが開発 WebAssemblyランタイム「Wasmer」の開発元として知られているWasmer社は、新しいサーバサイドのJavaScriptランタイム「WinterJS」の正式版となる「WinterJS 1.0」のリリースを発表しました。 ❄️ Introducing WinterJS 1.0 - the fastest WinterCG Javascript runtime in the world powered by Rust and SpiderMonkey ...and #WebAssembly compatible! Now supporting: React Server Components Cloudflare mode 150
今日リリースされた TypeScript 4.5 Beta の新機能として、標準ライブラリの差し替えが従来よりも簡単になるというものがあります。 筆者は TypeScript の標準ライブラリからanyを排除してより安全にしたbetter-typescript-libを開発していましたが、このたび TypeScript 4.5 に対応した v2.0.0 のベータ版を用意しました（2.0.0-beta）。 この記事では better-typescript-lib の簡単な紹介に加えて、TypeScript 4.5 の機能の解説やそれによって better-typescript-lib に起こった変化を紹介します。 better-typescript-lib について better-typescript-lib は、TypeScript の標準ライブラリをより型安全にしたものです。better
Reactコンポーネントの基本原則と人気のUI/UXデザインライブラリの解説 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
Reactは単なるUIライブラリではなく、コンポーネントベースのアプリケーション開発フレームワークです。UI/UXデザインの基本原則に加え、再利用性や状態管理、データフローなどの概念も重要です。 Reactのコンポーネントベースのアーキテクチャを活用すると、UIと裏側のロジックを分離して管理しやすくなり、効率的なアプリケーションの開発が可能です。 今日は、Reactにおけるコンポーネントの基本原則の解説と、初心者に役立つReactコンポーネントライブラリの紹介を提供します。 コンポーネントの設計原則 UI（ユーザーインターフェース） UX（ユーザーエクスペリエンス） UIのデザインに役立つReact コンポーネントライブラリ React Material UI React-Bootstrap Fluent UI Chakra UI Semantic UI React Ant Design
Next.js12.xのLayouts機能
この記事はNext.js 12.xのLayouts機能です。 Next.js 13.xのLayoutsについては公式を参照してください https://beta.nextjs.org/docs/routing/pages-and-layouts Next.jsのLayoutについてTypeScriptの記事を探してもあまり見つからなかったので Layoutsとは🤔 ページ間で共通のコンポーネントを定義する機能 HeaderやFooterなどはほぼ全ページ同じレイアウトを使うけど、ページコンポーネントに直接書くとコンポーネントの状態（入力値など）が保持できないのでページコンポーネントの外に書くことでレイアウトの状態も保持できる🤝 検証に使ったリポジトリ Next.jsのLayoutsを使うと何が嬉しいのか 一部共通ではないページが有る場合もページ単位でLayoutを変えられるので対応可能
はじめに フロントエンドのテスト手法の 1 つに Visual Regression Testing（以下、VRT）があります。 これは、アプリケーションの画面を画像として保存し、画像の差分比較をすることで意図せぬ変更が生じていないかテストする方法です。 ここ数年で広く普及し、用語としても一般的になったように思います。 私も以前、とある OSS に reg-suit & Storycap を使った VRT を導入したことがあるのですが、その後もいくつか VRT のためのライブラリが登場したもののキャッチアップできていませんでした。 そこで今回は知識のアップデートを目的として、ここ最近登場した（と思われる）VRT のライブラリをいくつかご紹介します。 なお、今回紹介するツールはすべてこちらのリポジトリで試しています。 具体的な設定ファイルや動作結果を確認できるようになっていますので、ご興味が
はじめに 今回はwebpackやBabelについて学習したことを理解を深めるために文章としてアウトプットしていこうと思う。 そもそもなぜwebpackやBabelに関して学習しようと思ったかは、これまでTypeScript、React等を用いて様々なアプリケーションを開発してきたが、webpackやbabelに関する知識が曖昧なまま開発ばかりを行なっていた。なんとなく"とりあえず変換してくれているもの"程度の知識しかなかったので、しっかり理解していこうと思う。 そんな中でwebpackやbabelの必要性を学習していくうちにJavaScriptの歴史を理解した方がわかりやすいと思ったため、JavaScriptの歴史についても触れていこうと思う。 JavaScriptの歴史 JavaScriptの誕生 JavaScriptの1995年にNetscapeの技術者であるブレンダン・アイクが開発し
はじめに 仕事でWebサイトを作った際に、 デザイン案で非常に参考にさせて頂いたサイト様をまとめました。 Parts. SaaSのサービスサイトやLPを中心としたデザインの参考サイトです。 部分ごとにパーツやセクションごとのデザインが載っているので、 探しやすくとても参考になりました。 動くWebデザインアイディア帳 「動かしたいパーツ」ごとの逆引きリストを扱っているサイトです。 機能的 or 印象的で有効なデザインが多数載っており参考になりました。 ※注意として 動くWebデザインアイデア帳のサイトは、書籍に明記している通り「3年間の期限付き」です。 （※書籍の売れ行き次第で変わります。） ちなみに実践編の方ですが、私も書籍を購入させて頂きました。 Web Design Trends(ウェブデザイントレンド) Webに関わる全ての人のためのメディアです。ウェブサイトの制作やデザインに役立
Vercel、TypeScriptをC言語に変換してからネイティブな実行ファイルにコンパイルする「scriptc」、オープンソースで公開
Webアプリケーションのホスティングサービス「Vercel」で知られるVercel社は、Node.jsで実行可能なTypeScriptコードを、変更することなく同じ機能を備えたネイティブな実行ファイルにコンパイルするコンパイラ「scriptc」をオープンソースで公開しました。 TypeScriptをC言語へ変換しCコンパイラでコンパイル Node.jsで実行可能なTypeScriptコードを単体で実行可能なバイナリファイルに変換する機能は、すでにNode.jsやDeno、Bunなどが提供しています。 しかしこれらの機能は、実際にはTypeScriptコードとNode.jsやDeno、Bunなどのランタイムを単一のファイルにパッケージングすることで単一ファイルとして実行可能にしているだけであり、TypeScriptコードそのものを実行可能なネイティブバイナリにコンパイルしているわけではありま
はじめに Reproで開発を担当しているEdward Fox (edwardkenfox) です。2021年頃から Repro Booster というプロダクトの立ち上げに携わっており、開発を通して得た知見を共有できればと思い立ち筆を取るに至りました。4年ぶりのテックブログ執筆で少しばかり緊張していますが（？）、張り切ってやっていこうと思います。 Repro Boosterとは 2022年11月に正式リリースした、ウェブサイトの表示速度向上を実現するサービスです。「タグを入れたその日から、Webサイトが速くなる」というタグラインのもと、タグ（JavaScript）の設置だけでウェブサイトの表示速度が簡単に実現できるということで、リリース以来多くのお客様・サイトでご利用いただいています。 Repro BoosterではServiceWorkerと呼ばれる技術を最大限活用して多くの機能が実現さ
Storybook をフル活用してテストを実装したその後の話 - Cybozu Inside Out | サイボウズエンジニアのブログ
この記事は、CYBOZU SUMMER BLOG FES '24 (Frontend stage) DAY13 の記事です。 こんにちは、フロリアでエンジニアとして活動している hacchan です。 現在 kintone ではフロリアというプロジェクトの中で、Closure Tools から React への移行作業に取り組んでいます。 以前、そのフロリアのチームの 1 つである Reactone チーム が Storybook をフル活用してテストを実装した話 を紹介しましたが、今回はそのアフターストーリーを紹介します。 Storybook のフル活用はやめた 以前の Reactone チームでは、Storybook の Test Runner を使って、Integration Test を実行するなど、Storybook をフル活用してテストを実装していましたが、新たな領域の刷新を開
Prettier のサイズを減らすテクニック
実は先日リリースした Prettier 2.6 では前のバージョンである 2.5.1 と比べてバンドルサイズが 3MB ほど減っています。 Prettier 2.5.1 のサイズ(20.0MB) Prettier 2.6.0 のサイズ(16.9MB) リリースブログで言及したとおり Prettier 2.6 ではモジュールバンドラーを Rollup から esbuild に移行したので、その影響かと思われるかもしれませんが実はそれだけではありません。esbuild への移行によって減ったバンドルサイズはそれほど大きくはありませんでした。 バンドルサイズが 3 MB 減ったのは泥臭いチューニングをいくつか行った結果なのです。 この記事では Prettier 2.6 で実施したバンドルサイズを減らすテクニックを紹介します。 きっかけ ライブラリのサイズは大きいより小さい方が当然良いですが、その
相続税申告は自分でできる？税理士が相続税申告の進め方を解説
Secretlint v7でCommonJS からES Modulesへの移行を行いました。 Secretlint v7.0.0をリリースしました。Pure ESMへの書き直し この記事では、CommonJS(CJS)からES Modules(ESM)への移行を行った経緯と、移行する方法について紹介します。 CJSからESMへの移行は、率直に言えば単調な作業で、メリットが見えにくい作業です。 しかし、将来的にCJSよりもESMが主流になることは間違いないので、移行することは必要です。 移行の作業は、移行方法が決まれば大部分は機械的な書き換えが可能です。 では、実際にどうやって移行したのかを紹介します。 ESMへの移行の影響は依存元へと連鎖する Secretlintのリポジトリはmonorepoになっていて、だいたい40コぐらいのパッケージが含まれています。 そしてパッケージ間で依存関係があ
米セキュリティ企業のPhylumは7月3日（現地時間）、JavasScriptライブラリ「jQuery」の特定バージョンがトロイの木馬化され、GitHubなどで拡散していると警告した。 同社は5月26日、パッケージ管理システム「npm」でトロイの木馬化されたjQueryを確認。少なくとも1カ月にわたって、数十のパッケージで“汚染”されたバージョンが公開されているのを確かめた。さらに、GitHubやCDNサービス「jsDelivr」でも拡散していることが分かったとしている。 対象のパッケージには、悪意あるコードが追加されたjQueryのコピーが含まれていた。汚染されたバージョンはWebサイトのフォームデータを抽出し、外部に送信するという。 Phylumは「マルウェアを作動させるために必要な条件は限られているが、パッケージが広く配布されていることから、潜在的な影響は広く、多くの開発者に影響を与
徹底解剖 TLS 1.3 | 翔泳社
wolfSSLをもとに、SSL/TLSの正しい利用法と仕組みを理解する 暗号化された安全な通信は、ネットワークを使う全てのアプリケーションにとって、 考慮すべき重要な課題です。 セキュアな通信を実現するために用いられる技術SSL/TLSの最新版がTLS 1.3であり 各種SSLライブラリも対応してきています。 ただ、ライブラリだけが最新のものになっても、仕組みを知り、 正しく使わなければ、安全は担保されません。 そこで本書は、そんなTLS 1.3の基礎的なプロトコルの流れから、 暗号化・認証の仕組み、アプリケーション実装のベストプラクティスを 組み込みシステム向けの軽量＆高機能なライブラリwolfSSLを例に 解説していきます。 さらに、ライブラリコードの解説を含め、内部実装にまで踏み込んだ解説も行い、 SSLライブラリを徹底的に理解できる一冊です。 Part 1：TLSの技術 ・Chap
Next.js App Router と控えめにお付き合いして普通の Web アプリを配信する | Offers Tech Blog
まずは長いものに巻かれたいときもある Offers を運営している株式会社 overflow の あほむ でございます。 先日 コードベースのディレクトリ構成にフォーカスした記事 を公開した関連記事として、Next.js App Router をどのように取り扱っているかについてご紹介します。 【AD?】今回の記事の内容を含んだり含まなかったりすると思いますが、来週 2024/01/17(水) 19:20 〜 オンライン開催の PWA Night vol.59 で発表予定なので興味のある方はぜひ。（終了済み） 下記は本記事の内容を含むイベント発表資料です。ご参考までに。 今回の前提 前回記事 の引用ですが今回も同様です。 最終目標は単体事業でありつつ実質マルチプロダクトな画面群のリプレース クライアントサイドでヘビーなビジネスロジックを持つ必要がない アプリケーション特性としては SaaS
自作のPDFライブラリがきっかけで、オーストリアの会社と仕事ができた。 とてもいい経験だったので振り返りを行いたいと思う。 自分について ・サラリーマン+個人事業主のWebエンジニア ・個人事業ではPDFを作成できるWebサービスを作っています ・サービスのPDF作成処理はライブラリとしてGithubでソースコードを公開しています そういえば過去にこんな記事を書いていました。この記事の続きとして見ても面白いかも。 このライブラリが今では268のスターを獲得し、なんとお仕事まで獲得してくれました! オープンソースをやりたい人のモチベーションやきっかけになれると嬉しいです。 ある日突然メールが届く オーストリアの会社からメールが届いた。電子カルテのサービスを作っている会社だそう。 PDFのデザインができる画面が必要とのこと。 そこで下記のような帳票のデザインページを開発してくれないか？と話が来
Cognitive Complexityを400以上減らすまでに何をしたか 〜 コード品質改善の具体的なプラクティス
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。Yahoo!広告 ディスプレイ広告エンジニアの安田です。私たちの開発チームでは広告配信の起点となるJavaScript（TypeScript）ライブラリを提供しています。今回はこのライブラリのデプロイ失敗率を改善できた、コード品質改善の取り組みについてご紹介します。 コード品質を定量的に測る指標の1つにCognitive Complexityがあります。Cognitive Complexityは人間視点での複雑性を評価する指標で、例えばネストが深くなるほど複雑と判断される特徴があります。複雑なコードは変更に多くの時間を要し、テストが難しくなるので要改善なシグナルといえるでしょう。私たちが今回実施した品質改善の取り組みで
【パワポ対応版】資料作成はAIにまかせよう！AWSでBedrockエージェント入門ハンズオン - Qiita
この記事は何？ 先日公開した以下ハンズオンが大変好評だったので、今回はバリエーション版を作成しました。 GoogleスライドではなくPowerPoint資料を作成するようにアレンジしています。 MS Officeを普段使いしている会社で、より実務に活かしやすくなります。 Google関連の初期設定が不要となり、ハンズオンの所要時間を短縮できます。 （デモ動画） https://www.youtube.com/watch?v=78DPihePNUo 本ハンズオンの概要 生成AIブームは終わりが見えませんが、そろそろRAGは十分試したよという方も多いのではないでしょうか。次のトレンドと目されているのが、人間の代わりに自動で仕事してくれる「AIエージェント」です。 AWSクラウドの生成AIサービス「Amazon Bedrock」には、そんなエージェントを簡単に作れるマネージドサービス 「Agen
この記事は最近リリースしたlocation-stateというライブラリの紹介記事です。 モチベーション Reactのstate管理は、様々な分類が可能です。筆者が過去に書いた記事「スコープとライフタイムで考えるReact State再考」では、stateの分類は大きく以下2つの観点で分類ができると述べました。 スコープによる分類 ライフタイム（=stateの生存期間）による分類 詳しく知りたい方はこの記事を読んでいただきたいのですが、今でもstate管理というと多くの場合スコープによる分類の話が多く、ライフタイムによる分類の話はあまり聞かない気がします。 なぜライフタイム観点が重要か ライフタイムを意識せずに実装した場合に発生するのが、遷移時に状態が破棄され復元されない、つまりブラウザバックでstateが壊れるという問題です。この問題については以下の記事で、Vercelの社長が2014年に
useEffectを使ったデータ取得はベストプラクティスではないです、react-hooks-fetchをお試しあれ
useEffectの新しいドキュメントが書かれている途中です。useEffectのタイミングでデータ取得を開始するのは、これまでもベストプラクティスではないと言われていたのですが、React 18のStrict Effectにより再び議論されるようになりました。 今のところ、Reactが提供しているAPIだけですんなり実現する方法はなく、3rd-partyライブラリやフレームワークを使いましょうとなっています。react-hooks-fetchはその一つにならないかと開発してます。 また、他のライブラリも開発してます。比較表を作りました。 ちなみに、以前作っていたuseEffectベースのライブラリはdeprecateしました。こちらの記事にも注釈追記しました。 かいつまんだ紹介しかしませんでしたが、こんな議論を楽しめる方がいらしたら、ぜひReact Fanオンラインコミュニティ(Slac
Bun is an all-in-one toolkitWe love JavaScript. It's mature, it moves fast, and its developer community is vibrant and passionate. It's awesome. However, since Node.js debuted 14 years ago, layers and layers of tooling have accumulated on top of each other. And like any system that grows and evolves without centralized planning, JavaScript tooling has become slow and complex. Why Bun existsBun's g
MP3ファイルをダウンロード 内容紹介 yosuke_furukawaさんをゲストに、JavaScriptランタイム、Node.js、イベントループモデル、JavaScriptエンジン、Denoの生まれた経緯について語っていただいたエピソードです。 出演者 話したネタ denoの話 Bun first impressions Node.js、Deno、Bunとは何か？ JavaScriptランタイムとは何か？ サーバーサイドJavaScript expressを利用してWebサーバーを立てるコードは、Node.js以外でも動くのか？ ECMAScript と ランタイム との関係は？ TC39 Node.js はどんな経緯で生まれてきた？ Rubyを書くタイミングと、JavaScriptを書くタイミングでのコンテキストスイッチ netv8 イベントループモデルとは何か？ ブロッキング処理、
Panda CSS - Build modern websites using build time and type-safe CSS-in-JS
Want to skip the docs? Watch the official Panda course CSS-in-JS with build time generated styles, RSC compatible, multi-variant support, and best-in-class developer experience
ライセンスに関する誤りの訂正とお願い（tbls, runn, sshc, httpstub, grpcstub） - Copy/Cut/Paste/Hatena
2025/10/18 追記 該当パッケージの対象バージョンについてそれぞれ retract の設定をしました。 この度、私が開発している以下の5つのOSSにおいて、ライセンスに関する重大な誤りがあったことをご報告し、深くお詫び申し上げます。 https://github.com/k1LoW/tbls ( v1.51.0 - v1.88.0 ) https://github.com/k1LoW/runn ( v0.71.0 - v0.138.0 ) https://github.com/k1LoW/sshc ( v4.0.0 - v4.2.1 ) https://github.com/k1LoW/httpstub ( v0.9.0 - v0.23.0 ) https://github.com/k1LoW/grpcstub ( v0.8.0 - v0.25.12 ) それぞれ MITライセンス
ジャッパの星 @loira294 NHKで空き家問題やってたけど、「クレヨンしんちゃん」の家タイプが完全に昭和の負の遺産になってるんだな。相続したら罰ゲーム。 2023-10-01 22:22:38
【非推奨】2024年こそ corepack を使おう
追記: 2024-09-10 その後、corepack は Node.js から削除されることになったので現在は非推奨です。 補足記事: RIP 2024年こそ corepack を使おうとしたら終わった 普段の開発では nodenv を使って各プロジェクトのバージョンに合わせた Node.js をインストールしています。その後、各プロジェクトの README や package.json を頼りに npm install -g yarn や npm install -g pnpm することが多いです。 先日、同僚から「最近は corepack 使ってますよ」と教えてもらったので、「おーもう実務で使えるのかー」と一気にモチベーションが上がったので corepack 使っていきたいと思います。 まずはこちらの鉄板記事でおさらい。 corepack を使っていくということは yarn や pn
Googleが2024年4月3日、新たなJPEGのコーディングライブラリである「Jpegli」を発表しました。Jpegliは高い下位互換性を維持しながら機能が強化されており、高品質の圧縮設定で圧縮率を35％も向上したとのことです。 Introducing Jpegli: A New JPEG Coding Library | Google Open Source Blog https://opensource.googleblog.com/2024/04/introducing-jpegli-new-jpeg-coding-library.html libjxl/lib/jpegli at main · libjxl/libjxl · GitHub https://github.com/libjxl/libjxl/tree/main/lib/jpegli インターネットは人々の生活や仕事に
自分の回線速度は遅いのか速いのか1時間ごとにインターネット接続速度をテストし最大30日間分を記録して分析できる「MySpeed」レビュー、WindowsやLinuxでセルフホスト可能なオープンソース
MySpeedは継続的にインターネットの回線速度を計測・記録してくれるツールです。どんなアプリなのか、実際に使って試してみました。 gnmyt/myspeed: A speed test analysis software that shows your internet speed for up to 30 days https://github.com/gnmyt/myspeed 今回はWindowsで動作を試すので、「Installation」の項目にある「Windows」をクリックします。 Windowsマシンへのインストール手順が解説されているので、この手順に従って進めていきます。 最初にNode.jsのインストールが必要とのこと。Node.jsの公式サイトへ行き、「LTS」と書かれたバージョンのボタンをクリックします。 実行ファイルがダウンロードされるので、ダブルクリックして実
すべての状態をできるだけ減らしたいypresto (プレスト) です。 12月頭に予約してたアドベントカレンダーですが12/23になってしまいました。 LayerXのバクラク事業部では、Webフロントエンド領域もがんばっています！！ ということで一筆。 バクラク事業部のエンジニアは、バックエンド・フロントエンドの垣根なくプロダクト開発を手掛けています。各々に得意領域があり、わたしはフロントエンドの改善やコードレビューなども行っています。 そのコードレビューで、「Vueの watch() を使用せずに computed() でリアクティブに書きたいです」 (Reactで言えば useEffect() を避けたい) と指摘させていただいたときに、理解を深めたいとコメントを頂いたこともあり、フロントエンド開発のコアとも言える、リアクティブ (Reactive) な状態管理の話をまとめようと思いま
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? なぜ〇〇というプログラミング言語は流行らなかったのか？ 最近、私は古くからあるプログラミング言語に興味があり、LispやSmalltalkなどの言語に興味があります。触っていくうちに、結構面白いな。と思うことがあるのですが、それほど人気があるとは言えません。 例えば、プログラミングの人気を表すTIOBE Indexでも、ランクが高いとは言えませんし、それらの言語はプログラミング言語の歴史。という中で、ちょっと学ぶぐらいで、それほど詳しくは知らない。という人が多いでしょう。 Quoraを探してみると、「Lispはなぜ覇権を握らなかったので
React状態管理ライブラリの選択指針：「ローカル/グローバル/サーバー」における使い分けの基準 | レバテックラボ（レバテックLAB）
執筆 中川 幸哉 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）に所属するテクニカルライター。新潟県上越市出身。会津大学コンピュータ理工学部卒業後、現在は新潟市に在住。ReactやAndroidを軸に、モバイルアプリ開発やWebサイト制作、Webメディア編集部の業務改善や、プログラミング技術記事の執筆等に携わっている。著書に「たった1日で基本が身に付く! Androidアプリ開発超入門」（技術評論社）、「基礎から学ぶ React Native入門」（翔泳社）他。 監修 山田 祥寛 静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「
今アツい（気がする）UIライブラリ...?ではないらしい shadcn/uiを使ってみる - Nealle Developer's Blog
この記事はニーリーアドベントカレンダー2024の10日目の記事です。 はじめまして、Nealleのデザイナー音部です。 profile.unotovive.io アドカレでデザインチームのことを書くつもりが、全然思いつかずにフロントエンドの話をします。 タイトルにある通り、shadcn/uiというモノの紹介と、実際に使ってみたレポートです。 shadcn/uiとはそもそも何なのか? ui.shadcn.com shadcn/uiは、2023年のJavaScript rising starで総合1位に輝いたReactエコシステム(?)です。 2位は2022年王者のBunでしたが、10k以上の差をつけて1位に輝いていて、アツいといっても過言ではなさそうです。 最初はMaterial UIやChakuraなどと同じようなUIライブラリかと思っていましたが、どうやら「コピペで使えるUIコンポーネン
Next.js Conf 2022で最も感動したライブラリ、vercel/satoriについて紹介させてください。 - Commune Engineer Blog
はじめまして。コミューンでサーバーサイドエンジニアとして働いています、あのちっくと申します。 突然ですが皆様は昨年 10 月に開催されたNext.js Conf 2022はご覧になられましたでしょうか。 Next.js Conf は Next.js の開発・メンテナンスを行っている Vercel 社が主催する、Next.js とその周辺技術に関するカンファレンスです。 コミューンでもメインプロダクト commmune の Web フロントフレームワークとして Next.js を採用しており、私個人としてもとても興味深くオンラインから視聴をしていました。 特に話題になったのは、React Server Components をサポートしたルーティング・レイアウトシステム"app directory"などの新機能を新たに追加したNext.js 13と、"Webpack の後継"を謳う Rust
Goの歴史 本連載では、筆者（tenntenn）と周囲のGoエンジニアで、Goに関わる今アツい話を取り上げていきます。最新のGoの機能やこれからリリースされるGoの機能はもちろん、実際の開発現場で用いられているノウハウや自作ライブラリやツールについてご紹介します。第1回目はtenntennがこれまでとこれからのGoについて取り上げます。 Goは2009年にGoogleによって公開されたプログラミング言語です。2012年にGo1として正式公開されました。2022年現在では、GoogleやNetflixをはじめとする海外企業だけはなく、筆者の所属するメルカリなど国内の企業でも多く用いられるようになってきました。海外のGoの導入事例は公式サイトのケーススタディで確認できます。国内企業の導入事例はGoの公式Wikiに掲載があります。これらを見るとスタートアップからメガベンチャー、大企業までさまざま
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
メンテモが Vercel を剥がすまで (移行作業編) - メンテモエンジニアリング
TypeScript 4.5でますます便利に！ better-typescript-lib v2
2023年にVisual Regression Testingを始めるならどんな選択肢があるか
歴史から見るTypeScriptにおけるwebpackとBabelの必要性 - Qiita
Webサイトを作る際に超参考になったデザインのサイトまとめ - Qiita
ServiceWorkerの落とし穴8選 - Repro Tech Blog
CommonJSからES Modulesへの移行する方法。トップダウンかボトムアップか
トロイの木馬化したjQueryがGitHubやCDN経由で拡散 米セキュリティ企業が警告
【外貨を稼ぐ】 OSSきっかけでオーストリアの会社と仕事した話
ブラウザバックで壊れないstate管理を実現する`location-state`
Bun 1.0 | Bun Blog
82. Node.js、Deno、Bun （前編） w/ yosuke_furukawa | fukabori.fm
NHKで空き家問題やってたけど、「クレヨンしんちゃん」の家タイプが完全に昭和の負の遺産になってるんだな。相続したら罰ゲーム。
Googleが高品質なJPEG画像の圧縮率を35％向上させる新たなコーディングライブラリ「Jpegli」を発表
詳解：フロントエンドの状態とリアクティブ (なぜuseEffect()でsetState()がアンチパターンか)
流行っている・流行っていないプログラミング言語に関する1つの考察 - Qiita
これまでとこれからのGo | gihyo.jp
blog.lifematics.co.jp
www.tc.u-tokyo.ac.jp
dc.hatenadiary.com
courrier.jp
www.the-miyanichi.co.jp
kumattaki.hatenablog.com