弊社ニジボックスでは、9/8（水）にNext.jsの1日研修を実施しました。WEB+DB PRESS Vol.123でNext.jsの特集記事を執筆した古川陽介さんと吉井健文さんの2名を講師に迎え、参加者は30名以上にもなりました。 この研修の企画運営と事前のフォローアップ研修で講師を担当させていただきましたので、研修のねらいや当日の雰囲気をご紹介します。 なぜNext.js研修なのかReactに関しては世間的にも広く使われ始めており、これまでもニジボックス内の研修テーマとして度々扱って来ました。Next.jsはそのReactを包含しているフレームワークです。 今回、Reactの枠を超えたNext.js研修を行ったのにはいくつかの理由があります。 まず１つ目は、フレームワークとしての使い勝手が非常に良いからという単純な理由です。React、TypeScriptといったモダンな開発環境をコマ

概要 Partytownというプロジェクトが先月発表された。このプロジェクト自体はWebのパフォーマンス向上(3rd Party Scriptによるブロッキングの低減)を主目的としているが、実質ブラウザにおけるJavaScript Sandboxの方向性に一石を投じるものであるとして自分は理解した。本稿ではこちらについて背景とともに解説を試みる。 WebブラウザにおけるJavaScript Sandbox JavaScriptで記述されたWebアプリケーションにおいて、たとえばプラグイン機構を実現したいなど、他Partyが提供あるいはユーザ自身が記述したスクリプトを、ホストとなるアプリケーションに影響を与えることなく実行することを許可したい、というケースはままある。2000年代に跋扈したブログパーツの類はWebコンテンツに対するプラグインの代表例とも言えるが、埋め込み先ページに対しての全権

CSSでよく使用する単位といえば、px, em, remをはじめ、最近ではvh, vwなどだと思います。特にレスポンシブ対応のレイアウト・コンポーネントを実装する時には、ビューポート相対単位のvh, vwが非常に便利です。 CSSはメディアクエリの登場で進化したように、コンテナクエリの登場でさらに進化しようとしています。新しい単位「コンテナ単位（qh, qw）」は、コンテナのサイズをベースにする相対単位です。 コンテナ単位を使用すると、下記のようにコンテナの幅をベースにした値でfont-sizeを定義したり、同一ページ内で異なる幅のカラム（コンテンツとサイドバー、2カラムと3カラム）に同じコンポーネントやテキストを異なるサイズで配置したり、異なる幅のカラムでスペースの量を変えたりできます。 ビューポート単位では、同一ページだとビューポートの基準値は同じなので、こういうことはできません。 C