はてなブックマーク

フロントエンド開発では、よくfetch()メソッドやaxios等でREST APIにリクエストを送る処理を書くことがあります。リクエストを送ったあとにサーバー側で動くのがバックエンドですが、仕組みをよく知らない方もいるのではないでしょうか？ この記事では前後編に分けて、フロントエンド開発をはじめた若手エンジニアに向けてハンズオン形式でバックエンドの仕組みを解説します。 前編である今回は、「こんにちは！」という文字を返す簡単なREST APIを実装して画面から呼び出します。 バックエンドって？ 一般的に、フロントエンドが「見た目・操作」を担当するなら、バックエンドは「データの保存・処理・提供」を担当します。 ECサイトを例にすると、以下のように役割が分かれていることが多いです。 フロントエンド：商品一覧やカート画面など、ユーザーが直接目にする部分を担当 バックエンド：商品情報、在庫、ユーザー

CSSの仕様の策定を行っているCSS Working Group（CSSWG）では、CSSにif()関数を追加する提案が出されています。このif()関数は文字通りCSSにおける分岐を行う関数です。仕様策定中ではありますが、すでにChrome・Edge 137（2025年5月リリース）より利用可能となっています。この新しいif()関数の特性、もたらすメリット、そしてデメリットについて解説します。 ▼Chrome・Edge 137以降のブラウザでご確認ください サンプルを別ウインドウで開く コードを確認する if()関数の基本的な使い方 CSSのif()関数の基本的な使い方について解説します。if()関数はCSSの値を条件分岐するので値部分に記述します。 /* --colorの値がprimaryなら赤、それ以外は青 */ .hoge { background-color: if( style(

ウェブサイトにおけるクリエイティブ表現は、ユーザーの目を惹きつけ、コンテンツの印象を高める重要な要素です。前回の記事：『p5.jsの表現力を活かしたクリエイティブなWebサイト事例集』では、p5.jsを活用してクリエイティブな表現を実現しているウェブサイトを紹介しました。本記事では次のステップとして、実際にp5.jsを活用しウェブサイトのヒーローエリアを実装する作例と実装時の注意点を紹介します。本記事では、三角関数を用いた周期的なアニメーション、p5.jsによるマウスインタラクション、そしてp5.jsを全画面に展開したWebページの実装例を学べます。 作例とコードの解説 今回用意した作例では、波のようなビジュアル表現と、マウス操作によってビジュアルが変化する表現を組み合わせています。カーソル移動やクリックによってビジュアルが変化します。なおTypeScriptでコードを記述し、Viteを使

HTMLのdialog要素を利用すると、モーダルダイアログをシンプルに実装できます。dialog要素は、2022年頃から主要ブラウザで利用可能です。 モーダルとは、表示している間は他の操作を禁止し、ある操作が完了するまで先に進めなくするUIを指します。dialog要素の登場以前は、次のような制御が必要で複雑でした。 画面の最前面にモーダルUIを表示する モーダルUIが表示されている間、ほかの操作を制限する モーダルUI開閉時に、フォーカス位置を調整する こうした複雑さについては記事『HTMLでモーダルUIを作るときに気をつけたいこと』でも解説していますので、あわせて参考にしてください。 dialog要素を利用すれば、HTMLが標準で提供する仕組みによって、シンプルかつ一貫した方法でモーダルダイアログを扱えるようになります。本記事では、dialog要素の基本的な使い方を紹介します。 本記事で

美しいグラデーションづくりで鍵になるのは、色そのものと、色と色をつなぐ「補間」です。たとえ2色のシンプルなグラデーションでも、補間の仕方しだいで中間色がくすみ、意図しない印象になってしまいます。 CSSグラデーションでは色の補間方法を指定できます。 本記事ではCSSで扱えるグラデーションの基本をおさらいしたあと、「色の混ぜ方（補間方法）」の違いを作例で比較します。 CSSのグラデーションの種類 まず、グラデーションの種類を整理しましょう。グラデーションは概念的に4種類に分けられます。このうちCSSで実装できるのは線形、放射、円錐（扇形）グラデーションの3種類です。 線形グラデーション：linear-gradient()関数 放射グラデーション：radial-gradient()関数 円錐（扇形）グラデーション：conic-gradient()関数 フリーグラデーション・メッシュグラデーショ

Google DocsやFigmaのような複数人が同時編集できるアプリケーションを作るためには「ロックフリー」な共同編集の技術が必要です。誰かが文字を入力するたびにサーバーの更新完了を待つわけにはいきませんが、だからといって各自が好き勝手にデータを書き換えてしまうとテキストが混ざったり他のユーザーのアイテムを消してしまったり、さまざまな問題が発生するためです。 この問題を解決するための代表的なアルゴリズムがCRDTで、CRDTをベースに共同編集機能を提供するメジャーなJSライブラリがYjsです。CRDTとYjsについては以前の記事『共同編集を支える技術とライブラリの活用』でも紹介しており、ICSではYjsを利用した開発も行っています。 このYjsの有力なライバルとして、2024年に正式リリースされたのがLoro（ロロ：スペイン語でオウム）です。後発だけに、これまで実装が難しかった便利な機能

ウェブサイトにおけるダイナミックなクリエイティブ表現の裏側には、多くの場合JavaScriptライブラリの力があります。有名なものにThree.jsがありますが、HTML Canvasを利用したライブラリであるp5.jsの表現力も決して劣りません。本記事では、まだあまり知られていないp5.jsを使ったウェブサイトを通して、p5.jsのウェブ制作への活用方法を紹介します。 p5.jsの表現力を活かしたウェブサイト/アプリケーション紹介 p5.jsは、ProcessingをベースにしたJavaScriptライブラリで、ビジュアル表現やインタラクションの実装を得意とします。描画はHTMLの<canvas>タグに出力されるため、既存のコンポーネントやフレームワークとも統合できます。 本記事では、p5.jsの活用事例のうち、Awwwardsで評価されたものを紹介します。 ※Awwwardsとは、優れ

Notoファミリーは「すべての言語で文字化けのない世界」を掲げて開発されたフォント群です。通常のフォントでは、該当する文字（グリフ）が存在しない場合、代替として四角い記号が表示されます。この四角い記号は「□」のような形で表示され、見た目が豆腐のブロックに似ていることから「豆腐（Tofu）」と呼ばれています。そんな中、Notoファミリーは、豆腐のないフォント＝No Tofuを意味して「Noto」と命名されたことは有名なエピソードです。 「Noto Sans JP」は数多くのウェブで利用されています。今年4月のWindowsにもNoto Sans JPが搭載され大きな話題となりました。しかしNotoフォントは2014年の登場から11年以上経過し、複雑な状態になっているのも事実です。 Noto Sans JP、Noto Sans Japanese、Noto Sans CJK JPなどたくさんの名

ウェブの見た目を整えるのにCSSはなくてはならないものですが、そのCSSの記述方法やツールは多種多様です。そしてそれらは進化したり、変化したりしています。本記事ではSassとCSSの関係性の変化を題材に、他のCSSツールにも応用できるような中長期的なCSSとの向き合い方、そしてネイティブの利点について解説します。 CSSを書く手法の変化について スタイリングを記述する手法やツールは変化しています。この記事ではスタイリングを記述する手法のことをCSSを書く手法と呼びます。中には直接CSSを書かないものもありますが、最終的にはCSSとして表現されるので含むことにします。 HTML1.0が登場した1993年にまだCSSはなく、タグや属性を用いてスタイリングしていました。その後、1996年にCSSが勧告され文書構造とスタイリングが分離し、スタイリングはCSSが担当するようになります。なお、この頃の

CSSのclip-pathを使うと要素を好きな形に切り抜けます。コンテンツを斜めに切り抜いたり、画像を丸く切り抜いたり、おそらくみなさんも見たことがある表現なのではないでしょうか？ clip-pathでは形を切り抜くための関数が利用できます。2025年4月ごろにリリースされたChrome 135、Edge 135、Safari 18.4にはshape()関数が追加されました。shape()関数を使うとより自由度の高い切り抜きが可能になります。 今回の記事ではclip-pathとshape()関数でどんな表現ができるかをご紹介します！ clip-pathとは まずはclip-pathについて簡単に確認しましょう。 冒頭でも紹介した通り、clip-pathでは要素を切り抜くためのクリッピング領域を作ります。circle()、rect()、path()、polygon()などの関数を使うことで、

UIのインタラクションの実装で、height: 0 → autoなど、数値とキーワード値とをアニメーションさせたいと思ったことはないでしょうか。 一見可能そうに見えるものの、従来はCSSのみではアニメーションが不可能でした。代替手段として数値同士を変更してトランジションを実装したり、JavaScriptでの実装を行うほかありませんでした。 height: autoの代わりに、offsetHeightを取得してアコーディオンの開閉アニメーションを実装する例 Chrome 129、Edge 129（2024年9月）で登場した、CSSのinterpolate-sizeプロパティとcalc-size()関数により、固有キーワード値のアニメーションが可能になりました。本記事ではinterpolate-sizeとcalc-size()がどのようなものなのか、作例とともに紹介します。 ※本記事の作例は、

みなさんはGPGPUという言葉を知っていますか？　GPGPUとは「General Purpose computing on GPU」、つまり「GPUによる汎用計算」という意味です。GPUは3Dの高速描画のために作られたものですが、GPGPUは数値シミュレーションなどの汎用計算にも活用する技術のことです。 WebGPUは、WebGLの後継として現在策定・実装が進んでいるブラウザ向けの次世代の描画・計算APIです。WebGPUが登場したことにより、JavaScriptの開発者もブラウザ上でGPGPUができるようになりました。 WebGPUについて、詳しくは記事『WebGPUがついに利用可能に - WebGL以上の高速な描画と、計算処理への可能性』で解説しているので参考ください。 本記事では、WebGPUの描画機能には一切触れず、計算機能であるコンピュートシェーダーだけに焦点を当てて紹介します。

ウェブ技術を用いたクリエイティブコーディング環境にはさまざまなものがありますが、プロトタイピングや2D表現には、Canvas 2DをラップしたJavaScriptライブラリ「p5.js」が非常に便利です。この記事ではp5.jsの強み、便利な関数と作例を紹介し、自分で作成した作品の公開方法について解説します。 p5.jsとは p5.jsは、ウェブ上でグラフィカルな表現ができるJavaScriptライブラリで、基礎的なプログラミングの知識さえあれば手軽に創作を始められるのが魅力です。 またp5js.orgが提供しているウェブエディターを使うと、環境構築なしにブラウザ上でクリエイティブコーディングが始められます。たった数十行のみのコードでもメディアアート作品のような出力が得られる、とても興味深いライブラリです。今回はp5.js Web Editorを使って簡単なアニメーションを制作しましょう。

JavaScriptのSetを使っていますか？　多用はしていなくても[...new Set(array)]で配列の重複をなくしたり、set.has()で存在チェックを行うコードはきっと見たことがあるはずです。 2025年6月に正式仕様がリリースされるES2025で、このSetをさらに便利にする「集合演算」の新しいメソッドが追加されました。2024年にBaseline(2024 Newly available)になっており、すでに主要ブラウザーすべてで利用可能です。 この記事では新しく追加されたメソッドをよくある利用例とともに紹介します。今まで配列のforEachやfilterを多用していたような処理がより簡潔に書けるようになるだけでなく、コードの意図が明確になり、読みやすさや保守性も向上します。 Setの新機能 新機能の説明の前に、Setの基本を確認しておきましょう。すでにご存知の方は読み

スクロールの状態変化でスタイル切替が可能に！ CSSコンテナークエリーのscroll-state()入門 @container scroll-state()は、CSSコンテナークエリーの一種です。従来はJavaScriptを使って実装していた、「スクロールされたらヘッダーのスタイルを切り替える」等のインタラクションをCSSだけで実装できるようになります。 本記事では、scroll-state()の使い方とできることを作例で紹介します。 コンテナークエリーは、記事『要素の幅でレスポンシブ対応を行える！コンテナークエリーの使い方』で紹介しています。コンテナー幅でのレイアウト制御にかかわらず、インタラクティブなUI構築にも役立ちます。コンテナークエリーの可能性の広さを感じ取っていただけたら嬉しいです。 ※本記事の作例は、Chrome 133・Edge 133（2025年2月）以上でご覧ください。

CSSの新機能「@scopeアットルール」。このルールを使えば、CSSセレクターに適用されるスタイルのスコープ（範囲）をHTMLの特定の一部分に限定できます。さらに、その開始点（ルート）や終了点（リミット）も柔軟に設定できます。 この記事では、CSSのスコープを制御できる@scopeの基本的な使い方や注意点を解説します。 @scopeを使用すると、以下のようなメリットがあります。 クラス名を複雑にしなくてすむ スタイルの衝突を防ぎやすくなる 保守性が高まる .titleや.buttonなどのよく使うクラス名も、スコープごとにスタイルを分けられます。その結果、複雑なクラス名を増やさずにすみ、意図しないスタイルの上書きも防ぎやすくなります。また、スコープを設定することで影響範囲が明確になり、あとからスタイルを修正したり追加したりしやすくなります。 @scopeの使い方は大きく2通りに分けられま

2025年4月にリリースされたChrome 135、Edge 135からHTMLとCSSのみでカルーセルUIがつくれるようになりました。新たに追加された::scroll-button()、::scroll-marker疑似要素を使用して、ボタンやインジケーターが実装可能です。 ▼HTML・CSSだけで実装したカルーセル カルーセルUIといえば、いちから自前で用意するのではなくSwiper.jsなどのJSライブラリを採用してきたコーダーも多いのではないでしょうか？　ICS MEDIAでもカルーセルUIを作成できるJSライブラリをまとめた記事があります。 『カルーセルUIを実現するJSライブラリまとめ - 導入手間や機能の比較紹介』 本記事では、新しいCSSでどのようなカルーセルが実現可能になるのか紹介します。 ご注意：本記事のデモは、Chrome 135・Edge 135以上で閲覧ください。

WebGPUは、ウェブ上で動作する新世代のグラフィックスAPIです。従来のWebGLに代わるものとして設計されており、より低レベルで効率的にGPUへアクセスできるようになっています。たとえば記事『WebGPUがついに利用可能に』で紹介したように、WebGLより高いパフォーマンスが期待できます。 Three.jsはウェブで3D表現を作るためのJavaScriptライブラリです。2010年代のWebGL黎明期からThree.jsが多くのウェブサイトで使われており、3Dの代表的なライブラリとも言えます。 Three.jsでは、WebGPU対応が進んでいます。WebGPU対応のレンダラー「WebGPURenderer」が存在し、従来のWebGLRendererとほぼ同じ使い勝手で利用できます。Three.js利用者は低レベルコードを書くことなく、WebGPUの利点を活かせるようになっています。We

ウェブ開発に関するHTML、CSS、JavaScriptの新機能は次々と登場します。このような新機能を紹介したブログ記事やSNSを見たことがあるかもしれません。新機能は、開発コストやユーザーエクスペリエンスを向上させるために重要ですが、ブラウザ側の対応状況により、すぐには導入できない場合もあります。本記事では、ウェブの新機能を実践投入するまでのプロセスとそのタイムラインについて考察します。 結論：新機能を取り入れる際の対応ブラウザの指針 まずは結論として、新機能を導入する際は次の3つの指針で判断していくと良いと考えます。 最新機能を取り入れつつメジャーなゾーンをカバーする：Chrome・Edgeの最新3バージョン、Safariの最新2世代のメジャーバージョン 最新機能を取り入れつつも、より幅広い対応を考える：上記に加えFirefoxの最新3バージョンとSafariの最新3世代のメジャーバー

前回の記事『階層メニューやトーストUIが簡単に作れる新技術!　JavaScriptで利用するポップオーバーAPI』ではポップオーバーAPIについて紹介しました。今回はその続編として、Chrome 133、Edge 133で新しく追加されたpopover="hint"属性に焦点を当てます。ツールチップなどのUIの実装に便利な属性で、その特徴や使い方、他の属性との違いを詳しく説明します。 ポップオーバーAPIのおさらい まずはポップオーバーAPIについて簡単におさらいしましょう。ポップオーバーAPIはその名の通りポップオーバーを実装するためのものです。ポップオーバーとは画面上の最前面に表示させるUIで、確認メッセージやトースト、メニューなどに使えます。 ポップオーバーAPIを使わなくてもCSS、JavaScriptを駆使して同じようなUIを作れますが、ポップオーバーAPIを使えば細かなケアを実

「React Three Fiber」は、Three.jsをReactで扱うためのライブラリです。Reactの特徴である再利用可能なコンポーネントを活かしながら、宣言的に3Dシーンを構築できるのが大きな魅力です。 通常のThree.jsでは、メッシュの作成、マテリアルの適用、シーンへの追加などひとつひとつの処理を命令的に記述する必要があります。しかしReact Three Fiberを使えば、裏側の複雑な処理をライブラリ側が担ってくれるため、作りたいシーンをコンポーネントとして宣言でき、処理の流れがわかりやすいコードが書けます。 ▼ 通常のThree.jsで立方体メッシュを記述する例 const geometry = new THREE.BoxGeometry(); const material = new THREE.MeshNormalMaterial(); const box = n

配列（Array）との比較 JavaScriptにはTypedArrayとは別に配列（Array）の違いを説明します。 ArrayはTypedArrayと比べると柔軟で汎用性が高いです。しかし、Arrayは内部で動的なメモリー管理を行うため、データ処理や転送を高い頻度で行う場合にはオーバーヘッドが発生する可能性があります。 TypedArrayは長さが固定であり、バイト単位のデータ格納が可能なため、メモリーアクセスが効率的に行われます。数値計算においてもバイナリデータを直接操作できるので、高いパフォーマンスが期待できます。また、メモリー領域が連続しているので高速なデータの転送が可能です。 大量のデータを処理する数値計算の場合にはTypedArrayで管理するとデータのまとめた取り回しが楽になります。逆にデータの規模が小さい時は汎用的なArrayが良いでしょう。 TypedArrayは決まっ

font-variantプロパティを使用すると、フォントの特定のスタイルや装飾を制御できます。これは、OpenTypeフォントのさまざまな機能を有効化するためのプロパティであり、細かい文字の見た目を調整するために役立ちます。この記事では、font-variantの各種プロパティについて、とくに日本語フォントに役立つものに焦点を当てて紹介します。 font-variantプロパティを適用するには、使用するフォントが対応するOpenType機能をサポートしている必要があります。サポートされていない場合、指定したプロパティが適用されないことがあります。 font-variant-east-asian font-variant-east-asianプロパティはその名の通り、日本語や中国語など、東アジアの文字の字形を指定できます。指定できる値はいくつかありますが、その中から2つを紹介します。 fon

2024年12月〜2025年2月頃にかけてリリースされたSafari 18.2、Chrome 133、Microsoft Edge 133から、text-box-trimプロパティとtext-box-edgeプロパティが使用可能になりました。テキスト要素の上下のスペースを調整できるようになります。 たとえば、次のCSSでテキスト上下の余白を調整できます。 .selector { text-box: trim-both cap alphabetic; } ※ただし、フォントによります。 本記事では、上記で指定した各プロパティの使用方法と具体的にどのようなデザインの実装に役立つのか、日本語フォントの場合を中心に紹介します。 テキストの上下のスペースとは？ 今回調整ができるようになったテキストの上下のスペースとは何でしょうか？　このスペースはテキストにline-heightプロパティを設定した際

2025年3月にリリースされたChrome 134、Microsoft Edge 134では、<select>要素をカスタマイズできるようになりました。今までは<select>要素で表現できる見た目は限られており、やむをえず別のタグを組み合わせて独自の実装をしていた方も多いのではないでしょうか？　独自の実装をした場合、アクセシビリティーやキーボード操作に対しても独自の対応が必要だったり、対応が不十分になる場合もあります。<select>要素をカスタマイズできるようになれば、こうした課題を解決しつつ自由なデザインやレイアウトを実現できるようになります。 この記事では、カスタマイズできるようになった<select>要素でどんなことができるのかを紹介します！（※本記事の作例はChrome 134、Microsoft Edge 134以上で閲覧ください）。 カスタマイズに必須のCSS まずはカスタ

ウェブサイトの中にはスクロールするとフワッと文字が出てくる表現があります。シンプルに見えますが、少し工夫を凝らすだけで表現力を大きく高めることが可能です。今回は、フワッと出るアニメーションをより魅力的にするためのテクニックとその応用例をいくつか紹介します。本記事の完成形は次のとおりです。 比較 まず、2つのフワッと出てくるアニメーションを比較してみましょう。下記の2つのアニメーションは、どちらもスクロールするとフワッと文字が出てくる表現です。エレガントなカフェのサイトを想定してアニメーションを作りました。 ▼実際にスクロールして比較してみてください。 サンプルを別ウインドウで開く コードを確認する（ちょっと微妙な方） コードを確認する（改良したもの） どちらも同じフワッと出てくるアニメーションですが、速度やイージング、タイミングなどが異なります。左側の「ちょっと微妙なもの」は全体的に間延び

以前の記事「マークダウンの力を引き出す！ Nuxt Contentで快適なウェブサイト制作」では、Nuxt Contentについて紹介しました。Nuxt ConetentはVue.jsのフレームワークであるNuxtのモジュールで、マークダウンなどのコンテンツからサイトを作る強力なプラグインです。 Nuxt Contentそれ自体も強力なコンテンツ管理、運用システムですが、WordPressやヘッドレスCMSといった既存のコンテンツ管理システムと比べると以下の課題があります。 マークダウンの知識が要求されるため、コンテンツの作成が難しい Nuxtを起動する必要があるため、環境構築する必要がある つまり、「開発者しかコンテンツが作成できない」のが大きな課題です。 Nuxt Contentを使いつつその課題を解決するのがNuxt Studioです。Nuxt StudioはNuxtのモジュールでは