2024年2月、JavaScriptライブラリ htmx の発見から始まり、短期間でその可能性に引き込まれ、以下の3つの記事を書きました。 JavaScript ライブラリ htmx と a-blog cms は相性が良さそうだ | kazumich.log kazumich.log htmx という JavaScript のライブラリが、2023 JavaScript Rising Stars : Front-end Frameworks で 2位 になっているが、日本ではあまり聞かない。私自身も最近知ったばかりだが面白そうな... Ajax 通信を簡単にする htmx の基本と実践 | フロントエンド | スタッフブログ | 名古屋のCMS構築・Web制作会社 アップルップル appleple htmx は、JavaScript のコードを書かずにサーバーとの非同期通信を実現し、ページ

modal-video.js は、弊社が2017年2月にリリースしたビデオコンテンツ再生用のJavaScriptライブラリです。このライブラリは、コンテンツ内に設置された YouTube、Vimeo、mp4 などを モーダルウィンドウ を開き、より大きく動画を再生できるようにするために作られました。 誰でも自由に利用いただけるように MIT license で GitHub で公開しています。

htmx は、JavaScript のコードを書かずにサーバーとの非同期通信を実現し、ページの一部を更新することを可能にする JavaScriptライブラリです。HTML属性の拡張により簡単に使用できるようにし、結果として、コードの可読性が向上し、将来のメンテナンスも容易になります。これらの特徴から、htmx はウェブサイト制作の現場での活用が期待されます。 簡潔さとアクセシビリティ: htmx は、複雑な JavaScriptコードを書かずに、HTML 内で直接動的な振る舞いを宣言することを可能にします。これにより、Web開発がよりアクセスしやすく、より理解しやすくなることを意味します。 非同期リクエストの簡易化 : htmx は、Ajaxリクエストを簡単に実装するための属性を提供します。これにより、サーバーへの非同期リクエストを簡単に行い、ページの一部を更新できます。 導入の容易さ :

Intro textarea などに入力された文字数を、 JS で数えたい場合がある。 ここで .length を数えるだけではダメな理由は、文字コードや JS の内部表現の話を理解する必要がある。 多言語や絵文字対応なども踏まえた上で、どう処理するべきなのか。 それ自体は枯れた話題ではあるが、近年 ECMAScript に追加された機能などを交えて解説する。 なお、文字コードの仕組みを詳解すること自体が目的では無いため、 BOM, UCS-2, Endian, 歴史的経緯など、この手の話題につき物な話の一部は省くこととする。 1 文字とは何か Unicode は全ての文字に ID を振ることを目的としている。 例えば 😭 (loudly crying face) なら 0x1F62D だ。 1 つの文字に 1 つの ID が割り当てられているのだから、文字の数を数える場合は、この ID

Qiita記事を見ていると「なんとなくで書かないで！HTML5を書く時に気にしてみたいタグごとのお約束 - Qiita」で、HTMLを書くときの注意点などが紹介されていました。 ただ「aタグの中にaタグ」の箇所で、JSを使う方法が紹介されていました。 これはJSは使わなくてもできます。 気になったので書いてみました。 まず、aタグの中にaタグはどういう状況か？ 例えば、カード全体がクリッカブルエリアになっており、子の要素にもリンクが必要な時です。 HTMLで表現するなら、下記の状態。 しかしHTMLの仕様上、aタグの中にaタグは含められません。 仕様を無視していれても、動作しません。 <a href="" class="card"> <div class="card-inner"> <h1 class="card-title">Title Text</h1> <ul class="card

Web制作を長くやっている人なら、IE6の「要素拡張問題 (Expanding Box Problem)」を知っているのではないでしょうか？ この「要素拡張問題」は、要素に指定した横幅を無視して、要素の内容が要素の幅を押し広げてしまうというものです。 CSS Grid Layoutのカラム (列) でも、同様の問題が起こったため、その解決方法をご紹介します。 カラムの幅が拡張される問題が起こるケース次のようなコードで問題は発生します。 … <style> ._grid { display: -ms-grid; display: grid; -ms-grid-columns: auto 50%; grid-template-columns: auto 50%; -ms-grid-rows: auto; grid-template-rows: auto; } ._cell-1 { -ms-gr

JSを使わずにCSSだけで、 「要素の個数に応じてスタイルを出し分ける」やり方の紹介です。 前にどこかのサイトで紹介されてたのですがブックマークなかったのでメモです。 Demo "個数に応じたスタイルの出し分け" http://codepen.io/skwbr/pen/JKbNMP 説明 個数に応じてスタイルを変える場合、下記を組み合わせて使います。 :nth-last-child 擬似クラス … 最後から数えて何番目か 間接セレクタ ~ … それ以降の後続する弟要素(同階層) <ul> <li class="item"></li> <li class="item"></li> <li class="item"></li> : </ul>

この記事は、記事「JavaScript製アニメーションライブラリの原理を理解しよう」の続編となります。前回の記事ではアニメーションの基本的な仕組みと、基礎部分の実装について解説しました。 今回はより実践的に活用できる機能として、動きに深みを出す「イージング」と、演出にエフェクトを加える「CSSフィルター」のアニメーションを実装します。CSSコーダーの方であれば、イージングはCSS Transitionで、CSSフィルターもボタンなどの演出で馴染みがあると思います。 イージングとは 前回アニメーションとは、時間経過とともに「ある値を0（0%）〜1（100%）の間で連続して変化をさせる」と解説しましたが、たとえば「最初はゆっくりで、徐々に早く変化させる」といった具合に時間経過に応じて変化の速度を調整するのが「イージング」です。 イージングには色々な種類がありますが、一般的には「easeIn~」

もう 1 年半ほど前になりますが、 iPad OS 13.4 からマウスなどのポインティングデバイスがサポートされ、接続した時にポインターが表示されるようになりました。 このポインターは要素に合わせて形状を変えるようになっており、ボタンに吸い付いたりテキストカーソルの形に変形したりします 参考動画（51 秒辺りから） 操作していてとても気持ち良いため、似たようなものを Web ページ向けに JavaScript で実装してみました。 この記事では上記ツイートの動画と同じ動作をするポインターの実装手順を紹介します。 サンプルプロジェクト 今回紹介する実装の完成形を Codepen で公開しています。 実装 ポインターを実装します。 要素の作成・スタイルの適用まで JavaScript で行います。 マウスポインターを作る まず、シンプルなマウスポインターを作成します。 ポインターとなる di

Mocking is a technique to isolate test subjects by replacing dependencies with objects that you can control and inspect. A dependency can be anything your subject depends on, but it is typically a module that the subject imports. For JavaScript, there are great mocking libraries available like testdouble and sinon, and Jest provides mocking out of the box. Recently, I joined Jest as a collaborator

はじめに GitHubでソースコードを公開する場合、ライセンスを明記していないリポジトリがよくあります。 誰かに使ってもらうことを想定していないのであれば特に問題ないのですが、せっかく公開しているのであれば、誰かに使ってほしいですよね。 というわけで、GitHubでのライセンス設定の方法を紹介したいと思います。 ライセンスを明記するかどうか まず、ライセンスを明記しない場合は、どのような扱いになるのでしょうか。 ライセンスが明記されていないソースコードに対しては、このページにあるように、デフォルトの著作権法が適用されます。 つまり、ソフトウェアの複製、改変、（複製物または二次的著作物の）再頒布が認められません。 （ただし、forkした場合は上記を認める記述がGitHubの利用規約中にあり、GitHubの利用者はそれに同意したことになります） 改変せずにそのまま使用することだけを認めたいなら

概要 規則正しく美しいJavascriptコードを書くためにESLintを導入しておきたいが、Lintルールをイチから検討するのはなかなか大変... そこでAirbnbのJavascript style guideのLintルールを、お手軽に導入しようという試み 想定する導入所要時間： 10分程度 導入プロジェクト環境 node 10.13.0 webpack 4.26.0 ESLint構築 必要パッケージのインストール ESlint

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! What is “Float”? Float is a CSS positioning property. To understand its purpose and origin, we can look to print design. In a print layout, images may be set into the page such that text wraps around them as needed. This is commonly and appropriately called “text wrap”. Here is an example of

Volta とは Voltaとは、JavaScript ツールマネージャーです。 タイトルでは Node.js のバージョン管理としていますが、 npm・yarn のバージョン管理も行うことができます。 公式サイトでは、「The Hassle-Free JavaScript Tool Manager（手間のかからない JavaScript ツールマネージャー）」と紹介されています。 チームの Node.js のバージョン管理を Volta に統一したところ非常に DX が上がり、Volta の恩恵を感じています。 この記事では、開発者の Volta 人口を増やすべく Volta の紹介と使用方法について解説していきたいと思います。 なかなか詳しく解説している日本語のソースはないので、公式ドキュメントを読んで適宜和訳しています。 公式ドキュメントを読むのがめんどくさいという人に読んでいただい

「WAI-ARIA」とは、W3Cの中の団体が定めているWebアクセシビリティに関する規格ですね。「WAI」は「Web Accessibility Initiative」の略で、「ウェイ」と読むらしいです… HTMLは標準のタグでマークアップするだけでは、すべてに人に十分な情報が届けられない可能性があったりします。そこで、「WAI-ARIA」が定めたHTML属性を使うことで、「より伝わりやすいHTMLタグにしよう」ということですね。 「WAI-ARIA」公式文書を見ると、以下のように定義されていました。 ウェブアクセシビリティの分野は、障害をもつ人にとってどのようにすればウェブコンテンツを利用可能にするかを定義する。 Accessible Rich Internet Applications (WAI-ARIA) 1.1 日本語訳 ということで、Webアクセシビリティを考慮したマークアップを

キーボードのEnterキーを押すところから始めましょう。このタイミングででEnterキーの電気回路が（物理的にあるいは電気容量的に）閉じます。これによりキーボードの論理回路にわずかな電流が流れます。この論理回路は各キーのスイッチの状態を網羅的に調べ、素早く開閉するスイッチによる電気的ノイズを除き、キーコードの整数、今回の場合13に変換します。次にキーボードのコントローラーがキーコードをコンピュータに伝えるためエンコードします。これは現在ではほぼ必ずUniversal Serial Bus (USB)またはBluetooth connectionにより行われますが、歴史的にはPS/2またはADBコネクションにより行われてきました。 USBキーボードの場合: キーボードのUSB回路はコンピュータのUSBホストコントローラ(訳注: キーボード側にUSBデバイスコントローラがあり、対でUSBが機能

フロントエンド用語を100秒で解説するチャンネルを作りました！ よかったらチェックしてみてください！ はじめに 以前書いた記事「Webページがブラウザに表示されるまでに何が起こるのか？」で ブラウザレンダリングについて詳細に知りたいという意見をいただいたので、調べてまとめてみました。 全体図 レンダリングの大まかな流れです。 HTMLのダウンロード サーバから送られてきたHTMLをダウンロードします。 HTMLの解析 サーバから送られてきたHTMLファイルは、「0」と「1」でできたデータになっています。 ブラウザは、サーバから受け取ったデータをそのままHTMLとして解釈することはできないので、自分で扱うことができる形、つまりDOMに変換する必要があります。この作業を 解析 ( Parse ) と言います。 HTMLをダウンロードしたら、すぐにこの解析作業に入ります。作業は以下のようなステッ

というお願いは心苦しいものです。 CSSを更新したはいいけど、毎回「変わってないんですけど」とクレーム…。 CSSを修正するたびにファイル名を変更するのも面倒くさい…。 この問題はキャッシュバスティング（CacheBusting）で解決します。 しかもこの方法なら、CSS・JSファイルの名前を変更するような面倒もありません。 画像ファイルを強制的に更新させるHTMLキャッシュバスティングにも応用できます。 この記事では、HTMLにキャッシュバスティングを仕込んで、CSS・JavaScriptを強制的に更新させる方法を解説します。 キャッシュバスティングの仕組み キャッシュバスティングの仕組みは単純です。 閲覧者がページにアクセスすると、ブラウザがページ読込みをリクエストします。 サーバーのHTMLには、キャッシュバスティングのスクリプトを埋め込んでおきます。このスクリプトは、<link>タ