コハム

Webクリエイターのコハムが提供する、Web制作に役立つ情報をまとめたブログです。

Javascript

エンジニア必見!JavaScriptの新常識『パイプライン演算子』の驚異の8機能

8 Features of the JavaScript Pipeline Operator You Should Know 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 JavaScriptパイプライン演算子(|>)は、現代JavaScriptにおける最も注目すべき提案…

JavaScript実践術:タスク分割でUXを改善する7つのテクニック

There are a lot of ways to break up long tasks in JavaScript. 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 メインスレッドを長い高負荷なタスクに占有させることで、サイトのユーザーエクスペリ…

コンテナクエリの欠点を解消!.matchContainer()のPolyfillが登場

.matchContainer() Polyfill ウェブ開発において、レスポンシブデザインはもはや標準です。長年にわたり、メディアクエリ(@media)はビューポートサイズに基づいてスタイルを適用するための主要なツールでした。しかし、真のコンポーネントベースの設計には…

1分で実装!ネイティブ感覚のデュアルレンジスライダーで UI をグレードアップ!

Native Dual-range Input 「ネイティブ」という部分はある程度議論の余地があります - このライブラリは2つのネイティブレンジ入力と約60行のJavaScriptを使用して、それらを連携させています。私の観点では、これは十分にネイティブと言えるでしょう。 動作…

年末だからおさらいして!ES2024完全ガイド - JavaScriptの革新的な新機能を総まとめ

JavaScript — What’s new with ECMAScript® 2024 (ES15) — In Depth Guide 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 プログラミング言語における新機能の発見は、まるで祝日や誕生日のようなもの…

【2024年最新】超速vs高機能!Svelte vs React、あなたのプロジェクトに最適な選択は?

Svelte vs. React: Which Framework Is Right For You? 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 Web開発とユーザーインターフェース構築のためのフレームワークを適切に選択することは、プロジ…

すぐにマスター!GSAP v3で魔法のようなウェブアニメーション作り

Getting Started with GSAP v3:A step-to-step guide 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 ウェブサイトに息吹を与える見事なアニメーションに魅了されたことはありませんか? そうであれば…

【2024年最新】detail・summary・dialog・popoverの徹底解説!もう要素の表示・非表示には悩まない!

The Different (and Modern) Ways to Toggle Content 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 コンテンツの切り替えとなると、JavaScriptを少し加えたdisplay: noneやopacity: 0を使用すること…

これ一本でOK!【markdown-it】でサクッとMarkdown変換!

Javascript Markdown Parsing with Markdown-it: A Guide 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 Markdownは、プレーンテキストでフォーマットできる軽量なマークアップ言語として、その使いや…

【初心者向け】驚くほど簡単!ChatGPTをJavaScriptで動かすファーストステップ

How to Connect JavaScript to ChatGPT: A Beginner’s Guide 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 はじめに 人工知能を統合することで、ユーザー体験を大幅に向上させることができます。この…

CSSだけ!Javascriptなしで実装するモーダル徹底解説

What is a modal? And how to build a CSS-only Modal 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 CSSは基本的なスタイリングというつつましい始まりから、大きく進化してきました。擬似クラスの使…

JavaScriptの配列メソッド完全解説:map・filter・reduce再入門

JavaScript map, filter and reduce functions explained, with examples 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 この記事では、JavaScriptコードでmap、filter、reduceをいつ、なぜ使うべきか…

さようならLodash、TypeScript時代の新星ユーティリティ【Radash】

Lodash is dead. Long live Radash. 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 Lodashの何が問題なのか? 関数の詳細分析 Lodashの_.get関数 Lodashの_.filter関数 Lodashの_.map関数 コード品質 …

期待の新星が登場!超軽量Webフレームワーク【Piecesjs】でサクッと作る、ネイティブWebコンポーネント

Getting Started with Piecesjs: Building Native Web Components with a Lightweight Framework 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 モダンでクリエイティブなウェブサイトを構築する際、…

JavaScriptの常識が変わる!開発者なら絶対知っておきたい2024年の神アップデート5選

Unlocking JavaScript in 2024: 5 Game-Changing Features You Need to Know 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 2024年に入り、JavaScriptは開発者の生産性向上、パフォーマンスの改善、よ…

【永久保存版】JavaScript初心者が陥る10大エラーを徹底解説!〜明日から使える現場のデバッグテクニック大公開〜

Top 10 JavaScript Errors and How to Debug Them 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 JavaScriptは、単純なウェブサイトのインタラクションから複雑なウェブアプリケーションまで、世界で…

2024年に選ぶべきJavascriptカルーセルスライダープラグイン11選

List of 10+ Best JavaScript Sliders 2024 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 ウェブサイトにインタラクティブなスライダーを追加するJavaScriptカルーセルスライダーライブラリをお探し…

JavaScript初心者からの卒業のために:開発者が陥りがちな10の罠

The 10 Most Common JavaScript Issues Developers Face 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 今日、JavaScriptはほぼすべての最新のWebアプリケーションの中核にあります。そのため、JavaSc…

知らないと損する最強のクライアントサイドストレージ ~ IndexedDB完全ガイド ~

A complete guide to using IndexedDB 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 データストレージは、ユーザーデータからアプリケーションデータまで、ほとんどのWebアプリケーションにおいて重…

配列やオブジェクトより便利!ジェネレータとイテレータの基礎知識

Generators and Iterators in JavaScript 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 イテレーションプロトコル JavaScriptには、イテレータプロトコルとイテレーブルプロトコルを定義するイテレー…

こんなことできるって知ってた?JavaScriptの配列を極めるプロ直伝のトリック

Mastering JavaScript: Deep Dive into Array Tooling. 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 はじめに JavaScript配列は言語の強力な機能であり、多数の組み込みメソッドと独自のメソッドを…

たった1行で!業務でも役立つJavascirptワンライナー10+1選

Top 10+1 JavaScript one-liners I love to use 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 今日は、私のプロジェクト作成に大いに役立った、最も有用でシンプルなJavaScriptのワンライナーをいく…

位置情報が価値になる?Geolocation APIの使い方と応用例

Unlocking the Power of Geolocation API 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 今日のデジタル時代において、位置情報サービスは多くのアプリケーションや産業において広く普及し、ユーザー…

Atropos.jsで実現する、もっとスクロールしたくなるWebデザイン

Exploring The Creative Potential Of Atropos.Js For Web Design 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 デザイン愛好家の皆さん、気を付けて乗ってください!私たちは、Webデザインにおける無…

インパクト大!View Transition APIによるページ遷移の実装例

View Transition API 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 View Transition APIは他ページへの遷移にアニメーション効果を適用するCSSです。 2024年秋に予定されているiOS18に搭載されるSafa…

スマホのロックをJavascriptで防ぐ!Screen Wake Lock APIの基本的な使い方

Disable Screen Sleep in JavaScript with WakeLock API 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 JavaScriptでスクリーンスリープを防ぐには、WakeLockAPIを使うことができます。この機能は、長…

Promise.tryによる同期/非同期処理のエラーハンドリングのベストプラクティス

Promise.try to improve error handling and sync/async interoperability 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 この記事では、JavaScriptのPromiseと同じくらい古い面倒なタスクの現代的な…

モダンJavascriptには必須!ES6で使えるスプレッド演算子を学ぶ

ES6 Spread Operator: Unleashing the Power of Modern JavaScript 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 JavaScriptはかつてはWebページのための単純なスクリプト言語と考えられていましたが…

2024年版!HTML/CSSで作るリボンデザイン20選

20 Best Free CSS Ribbons Designs In 2024 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 ウェブサイトのデザインにぴったりなCSSリボンをお探しですか? そうであれば、ここにいらしたのが幸いです…

Tailwind CSSの開発をより効率的に!おすすめのTailwind Pluginsリスト

Tailwind Plugins List 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 Tailwind CSSプロジェクトのワークフローをスピードアップしたいですか?この素晴らしいTailwindプラグインのリストをチェックし…

©コハム