2024年、Web制作者がチェックしておきたいCSSの新機能のまとめ

2024/12/19 118 users CSS GitHub WEB制作者 一行 まとめ

今年もCSSの進化が早かった1年でした。一昔前にはJavaScriptや複雑なCSSを使用しないとできなかったことがたった一行、もしくは数行のCSSで簡単に実装できるようになりました。 2024年、Web制作者がチェックしておきたいCSSの新機能を紹介します。 CSS Wrapped 2024 CSS Wrapped 2024 -GitHub 下記は各ポイントを意訳し... 続きを読む

TypeScript/JavaScript Array完全攻略2024 | フューチャー技術ブログ

2024/12/05 86 users TypeScript ジェネレーター いまどき エントリー

TypeScriptアドベントカレンダーの12/5のエントリーです。昨日は@nanasi-1さんの【TypeScript】ジェネレーターによる遅延評価でフィボナッチ数列を生成するでした。 イマドキのJavaScriptの書き方2018というのを以前書いたのだけど、配列周りはかなり変わっているな、というのを思ったので、そこの部分だけアップデート... 続きを読む

【2025年版】ReactとVue.jsどちらを選ぶべきか？【アドベントカレンダー2025】 - Qiita

2024/11/30 184 users Qiita React getter CSS Vue.js

TL;DR Vue.jsはHTMLをJavaScriptの中に書かなくて済むので、可読性が高いです Vue.jsは双方向バインディングをサポートしており、Reactみたいなsetter/getterみたいな無駄な作業は必要ありません Vue.jsはHTMLとCSSとJavaScriptを分けて記述することができるため、どこを修正すればいいか直感的です ReactはJSX内で{}と(... 続きを読む

オラクルが所有する「JavaScript」商標登録の取り消し、Denoが米国特許商標庁に申請したと発表

2024/11/26 108 users Netscape deno オラクル Deno Land 名称

JavaScriptランタイム「Deno」の開発元であるDeno Landは、米国特許商標庁にオラクルが所有する「JavaScript」の商標登録の取り消しを申請したことを明らかにしました。 JavaScriptはNetscapeがWebブラウザ用に開発したプログラミング言語であることはよく知られていますが、その名称はサン・マイクロシステムズが登録商... 続きを読む

JavaScriptのthisもこれで完璧！呼び出し方で変わる5つのパターン - Qiita

2024/11/09 96 users Qiita this パターン 呼び出し方 5つ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 続きを読む

『JavaScriptプログラマーのためのTypeScript厳選ガイド』を執筆しました - Islands in the byte stream

2024/11/04 123 users JavaScriptプログラマー TypeScript

JavaScriptプログラマーのためのTypeScript厳選ガイド という本を書きました。JavaScript中級者でTypeScript初心者のプログラマーに向けたTypeScriptの入門書です。 これまで何度かTypeScriptの記事を書いてきました。 TypeScript再入門 ― 「がんばらないTypeScript」で、JavaScriptを“柔らかい”静的型付き言語に｜ハイ... 続きを読む

［作って学ぶ］ブラウザのしくみ──HTTP、HTML、CSS、JavaScriptの裏側

2024/10/21 331 users リソース 本書 目次 通信プロトコル クライアント

はじめに 本書を読むにあたって 目次 第1章：ブラウザを知る──Webサイトを表示するアプリケーション ブラウザの役割❶──Webクライアントとしてのブラウザ クライアント／サーバモデル Webクライアント Webサーバ インターネットとWeb 通信プロトコル HTTP URLによるリソースの指定 DNS ブラウザの役割❷──レンダリングエン... 続きを読む

HTML だけで Shadow DOM を構築するための宣言型 Shadow DOM

2024/10/20 71 users Shadow DOM HTML サーバーサイドレンダリング

HTML だけで Shadow DOM を構築するための宣言型 Shadow DOM 2024.10.19 宣言型 Shadow DOM は `<template>` 要素を使用して Shadow DOM を構築する方法です。宣言型 Shadow DOM を使用することで、従来の JavaScript を使用した Shadow DOM の構築方法と比較して、サーバーサイドレンダリング（SSR）に対応しているため... 続きを読む

【JavaScript】Idle Detection APIとかいう悪用以外の使い道がないAPI - Qiita

2024/10/14 147 users report 勧告 Qiita ステータス コミュニティ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 2024/09/10にIdle Detection APIというAPIが更新されていました。 ステータスはDraft Community Group Reportです。 これはコミュニティによる提案であり、W3Cによる正式な勧告では... 続きを読む

これでCSSのみで実装できる！ スクロール方向に合わせてヘッダを非表示・表示する方法を解説

2024/10/10 126 users ヘッダ hide CSS スクロール方向 解説

Webページを表示し、スクロールダウンするとヘッダが非表示になり、ページのどこからでもスクロールアップするとヘッダが再び表示される、というのを見たことがあると思います。 これまでは実装するにはJavaScriptが必要でしたが、CSSのみで実装できる方法を紹介します。 Solved by CSS Scroll-Driven Animations: hide ... 続きを読む

JavaScriptの非同期処理をしっかり理解する　〜async/await/Promise〜 - Qiita

2024/09/29 252 users コメント プログラム 最後 順番 処理

JavaScript での非同期処理について、身近な例や具体例を交えながら詳細に解説しています。 最後には練習問題も用意しています！ 頑張って書いているので、良いと思ったらコメント・いいね・ストック・共有などしてもらえると嬉しいです！！ 非同期処理とは 非同期処理とは、プログラムの処理が順番に実行されず、ある処... 続きを読む

オラクルよ、 JavaScriptの商標を手放すときだ。Denoのライアン・ダール氏がオラクルに公開書簡

2024/09/17 103 users deno Oracle オラクル node.js 要請

主要なJavaScriptランタイムであるNode.jsの作者であり、現在もDenoの開発を進めているライアン・ダール氏は、JavaScriptの商標を所有しているオラクルに対して商標を手放すように要請する公開書簡「Oracle, it’s time to free JavaScript.」を公開しました。 オラクルへの要請は今回で2回目 同氏がオラクルにJavaScript... 続きを読む

JavaScriptで実現するFLIPアニメーションの原理と基礎 - ICS MEDIA

2024/09/04 80 users FLIP ICS MEDIA 原理 基礎 ライブラリ

アニメーション実装のテクニックのひとつにFLIPと呼ばれるものがあります。FLIPアニメーションは2つの状態をなめらかにつなげるテクニックで、とくに移動や拡大といった動きに有効です。FLIPアニメーションを用いると、次のようなアニメーションを実装できます。 本記事では、ライブラリに依存しないFLIPアニメーション... 続きを読む

デザイナーにもお勧め！ CSSもThree.jsもタイムライン編集を可能にするTheatre.jsが凄い - ICS MEDIA

2024/08/28 176 users CSS ICS MEDIA three.js デザイナー ゴー

デザイナーにもお勧め！ CSSもThree.jsもタイムライン編集を可能にするTheatre.jsが凄い ウェブサイトの演出を作る上でアニメーションの実装は欠かせません。一般的には、CSSアニメーションやJavaScriptのライブラリ（GSAPジーサップなど）を用いてコードベースで動きをつけることが多いと思います。ですが、完全にコー... 続きを読む

音を鳴らす

2024/08/25 302 users ソース 最初 ボタン

JavaScriptで音を鳴らすことができます。ご自分の耳が何Hzまで聞こえるか試してみてください（23000Hzまで聞こえたというかたがおられたので24000Hzまでに増やしてみました）。 1000 Hz Stop 4000 Hz 8000 Hz 10000 Hz 11000 Hz 12000 Hz 13000 Hz 14000 Hz 15000 Hz 16000 Hz 17000 Hz 18000 Hz 19000 Hz 20000 Hz 2100... 続きを読む

JavaScript｜importの書き方が多いのでまとめてみた - Qiita

2024/08/24 63 users Qiita import エンジニア みなさま 学習

はじめに エンジニアのみなさま、日々の学習本当にお疲れ様です！ また本記事まで足を運んでいただき本当に感謝です。 記事は約3分程度で読めるので最後まで読んでもらえると幸いです。 さっと見たい人向け importの書き方パターン 説明 続きを読む

Googleスプレッドシートを自動化するGoogle Apps Script（GAS）の始め方

2024/08/15 64 users GAS Gmail CSS 関数 Googleスプレットシート

Google Apps Scriptを使うには Googleスプレッドシートには、Microsoft Excelのマクロのような機能拡張機能としてJavaScriptやHTML、CSSといったWeb言語をベースとする「Google Apps Script（GAS）」が提供されている。GASを利用することで、関数では実現が難しい処理などが可能になる。また、Gmailと連携させることなど... 続きを読む

JavaScript エンジンの高速化

2024/08/11 109 users エンジン 高速化 インタープリタ 欠点 言語

これらの JavaScript エンジンのうち、以下では特に JavaScriptCore を扱います。 最適化の基本戦略 JavaScript をはじめとする動的言語は、主にインタープリタにおいて実行されます。しかし、インタープリタはコンパイルされたコードと比較して実行に時間を要するという欠点があります。そこで、インタープリタの最適化... 続きを読む

CSSのclass名やJavaScriptの関数名を付けるときに役立つ単語リストのまとめ -Classnames

2024/07/11 129 users CSS class名 関数名 単語リスト BEM

CSSのclass名やJavaScriptの関数名を付けるときに悩んだり、ネタ切れになったことはありませんか？ BEM, OOCSS, SMACSSで命名する場合はそれを使用すればよいのですが、特定のテーマ別にグループ化された単語のリストが必要になるときもあります。そんなときに役立つ単語リストをまとめたClassnamesを紹介します。 Class... 続きを読む

チュートリアル: Yjs, valtio, React で実現する共同編集アプリケーション - ROUTE06 Tech Blog

2024/07/03 97 users figma React Notion yjs Array

Yjsは、リアルタイム共同編集を実現するためのアルゴリズムとデータ構造を提供するフレームワークです。Notion や Figma のように、1 つのコンテンツを複数人で同時に更新する体験を提供することができます。 Y.Map, Y.Array, Y.Text といった共有データ型を提供し、それらは JavaScript の Map や Array のように利用で... 続きを読む

Google、Google Sheetsの計算エンジンをWebAssemblyに最適化し、2倍の性能を実現したと発表

2024/07/02 62 users WebAssembly WebAssemby 実装 従来 性能

Google、Google Sheetsの計算エンジンをWebAssemblyに最適化し、2倍の性能を実現したと発表 GoogleはWebブラウザ上でスプレッドシート機能を提供する「Google Sheets」の計算エンジンの性能をWebAssembyで実装し、従来のJavaScriptによる実装と比較して性能を2倍に向上させたことを明らかにしました。 これにより単純なS... 続きを読む

JavaScriptで100行で作る！数式言語のインタプリタ

2024/06/26 78 users インタプリタ 数式言語 100行

皆さんはプログラミング言語を作ったことがあるでしょうか？ おそらく大抵の方は「ない」というのが正直なところなのではないかと思います。背景には、おそらく「プログラミング言語を作るって難しそう」という先入観があるのではと筆者は踏んでいます。 プログラミング言語とは、コンピューターに指示を与えるための特... 続きを読む

TypeScriptの型と値とバリデーション

2024/06/11 144 users TypeScript バリデーション バリデーシ 何度 影響

TypeScript は本質的に自分に型が付与されていると思っているだけの JavaScript です。 いくら型を付与しようが、それが実行時に影響を与えることはありません。 コードレビューをしているとここを誤解している人が本当に多いです。何度も解説しているのですが、なかなか浸透しないので、TypeScript におけるバリデーシ... 続きを読む

TypeScriptを導入する意味と限界、型レベルプログラミングの紹介 - Qiita

2024/06/10 167 users Qiita TypeScript 型レベルプログラミング

はじめに JavaScript/TypeScript初学者を抜けたあたりの方に向けてTypeScriptの利点や限界、型レベルプログラミングについて紹介します。 TypeScriptはJavaScriptをラップしたライブラリであり、静的な型情報をつけることができます。また、それらの型情報をもとに型を推論し、型違反な代入やプロパティへのアクセスなど... 続きを読む

ARM に存在する JavaScript 専用命令「FJCVTZS」を追う（ついでに V8 をビルドする）

2024/06/10 137 users JIT ARM アセンブラ ARM アーキテクチャ 出力コード

前回の記事では、JavaScript の実行エンジン V8 の JIT 出力コードを読んでみました。記事は M1 Mac 上で動かした結果でしたので、ARM アーキテクチャのアセンブラを読むことになりました。 さてそんな ARM アーキテクチャですが、最近の ARM には FJCVTZS という JavaScript 専用の機械語命令があるのをご存知でしょう... 続きを読む