ダークモードをCSSとJavaScriptで実装する方法 | Recooord | Web制作で扱うコーディングスニペットを紹介
ダークモードとはWebサイトや、アプリなどの背景色を黒基調としたものです。 長時間画面を眺める場合は、ダークモードの方が目に優しいと言われていますので、制作者の私もダークモード設定ができるWebサービスは、全てダークモードにしています。 今回はOS側でダークモードにした際のWebサイトの設定方法と、ユーザーが任意でダークモードを選択できる方法をご紹介します。 OS側の設定をWebサイトに反映する方法 Macの場合「システム環境設定」から「一般」を選択して、外観モードから「ライト」「ダーク」を選択することができます。 このOS設定の判定方法は、CSSのメディアクエリを使う方法と、JavaScriptを用いる方法があります。 CSSのメディアクエリ @media (prefers-color-scheme: dark) { body { color: #fff; background: #00
State of JavaScript 2024
Let's take a second to consider something: 2024's top three front end framework were all launched over a decade ago. Now sure, all three have evolved a lot along the way, and the patterns of 2014 would seem downright antiquated today. But given the JavaScript ecosystems's reputation as a constantly-churning whirlwind of change, it can be nice to know that some things do remain constant. Speaking o
じゃんけん勝敗判定アルゴリズムの思い出 | えすたくぶろぐ
昔、中学生の頃、BASICでプログラミングの勉強をしていて、何の本かは忘れてしまったんですが、たった1行でじゃんけんの勝敗判定ができる計算式というのが載っていました。「たった1行で勝敗判定ができるなんてすげー！」と思ったものです。どんな計算式だったかは正確には覚えていないのですが、とても短い式でした。 やってる内容もよくわからないままその式を組み込んでじゃんけんゲームを作りました。キーボードからグー・チョキ・パーに対応する数字を入力して、コンピュータには乱数発生させて、その式で勝敗判定、結果を表示するというだけのものでしたが。「なんでこれで判定できるんだろう？」って不思議に思ったことを覚えています。僕にとって「プログラミングって面白いなあ」って思った出来事のうちのひとつでして、未だに思い出すことがよくあります。 ただ、じゃんけんの判定なんてものはそうそう使う機会はないので、ふと「そういえば
😡webのスクロールでふわっと出てくるやつ絶対粉砕するマン【クソアプリ】 - Qiita
おひさしぶりです。この記事はクソアプリ Advent Calendar 2021の13日目です 突然ですが皆さんは「スクロールに合わせてふわっと出てくるwebページ」ってどう思います？ 最近多いですよね、あれ。 確かにオシャレだし楽しいしゲームとか作家さんのギャラリーサイトとかなら全然OK。でも情報が欲しくてアクセスしてるページで「ふわっ」ってされるとちょっとイラッとする。 ちょっと？...イラッと？...いや、 許さない、絶対 よろしい、ならば粉砕だ よそ様のサイトを粉砕する都合上、今回の実装はChrome機能拡張です。機能拡張はViteにChrome機能拡張用のプラグインvite-plugin-chrome-extensionを入れて作りました。今回は解説しないけど、これ超楽。フレームワークは無し、言語はTypeScriptです。 とは言え、クソアプリのためにChromeに機能拡張をイ
matter.jsでつくるタワーバトルゲーム
ちょってぃタワーバトル 弊社キャラクターの「ちょってぃ」を使ったタワーバトルゲームを作りました。(つみあげるだけです) ちょってぃタワーバトル matter.jsとは matter.jsはJavaScriptで扱える2Dの物理演算エンジンです。重力があったり物体の当り判定ができます。公式では多くのデモが紹介されています。 今回はこの物理演算を用いてタワーバトルを実装したときのTipsを紹介します。 実装時のTips 環境 Vite v4.4.9 matter.js v0.19.0 オブジェクトの生成 オブジェクトは重力によって下に落下します。 床のような固定されているオブジェクトを生成するときはisStaticをつけてあげます。
JavaScriptのES2023・ES2022の新機能まとめ - ICS MEDIA
JavaScriptの仕様であるECMAScriptはEcma Internationalによって定められています。ECMAScript 2015（ES6）の登場以降は、ECMAScript 2016、ECMAScript 2017･･･と、年次で仕様が更新されています。ECMAScript 2022（ES2022）は2022年6月22日のEcma InternationalのGA 123rd meetingにて、ECMAScript 2023（ES2023）は2023年6月27日のGA 125th meetingで承認されました。 ES2022とES2023はすでに多くのブラウザやNode.js環境で利用可能です。本記事では新仕様と使いどころを紹介します。 ES2023 - 配列の非破壊操作 ES2023では配列を非破壊で操作できるメソッドが追加されています。非破壊とは、元の配列を変更せ
【JavaScript】ES2023で導入された非破壊的メソッド - Qiita
ES2023で導入された非破壊的メソッドを紹介します toReversedメソッド toSortedメソッド toSplicedメソッド withメソッド toReversedメソッド reverseメソッドは破壊的に配列の要素を逆順にする toReversedメソッドは非破壊的に配列の要素を逆順にする // reverse const a = [1, 2, 3]; const b = a.reverse(); console.log(a); // [3, 2, 1] console.log(b); // [3, 2, 1] // toReversed 👍 const c = [1, 2, 3]; const d = c.toReversed(); console.log(c); // [1, 2, 3] console.log(d); // [3, 2, 1]
【JavaScript】ES2023の新機能が何故かいまさら追加されていた - Qiita
ES2023その2 / ES2023 / ES2022 / ES2021 先日ES2023では新機能が2個しかなかったという話をしましたが、どういうわけか2023/01/30になってからES2023が2個追加されました。 よくわかりませんが、どうやら1月までは前年のESになるみたいです。 なんで。 これらは2023/01/30に行われたTC39ミーティングで決定したようです。 他にIntl.NumberFormat V3もStage4への議題に上がったみたいですが、こちらは却下されたみたいです。 なんでそんなふわふわな言及なのかってまだアジェンダしかないから詳しいことがわからねえんだよ。 Finished Proposals Change Array by copy 配列を破壊せずに操作するメソッドを追加します。 既存の配列操作メソッドは、変更後の値を返すと同時に元の値も変更してしまいます
一瞬で理解！JavaScriptの`debounce`テクニックとその実装方法 - Qiita
あなたがウェブサイトやアプリケーションを開発しているとき、高頻度で発火するイベントにどう対応すればよいか考えたことはありますか？この記事では、その問題を解決するためのdebounceテクニックについて紹介します！ 目次 debounceとは？ debounceのメリット JavaScriptでのdebounceの実装 使用例と応用 まとめ 1. debounceとは？ debounceは、高頻度で発火するイベント（例: ウィンドウのリサイズ、キー入力など）を制御するためのテクニックの一つです。このテクニックを使うと、特定の時間間隔内に再度イベントが発火しなかった場合にのみ関数を実行することができます。 2. debounceのメリット パフォーマンスの向上: 不要な関数の実行を抑制することで、アプリケーションのパフォーマンスを向上させることができます。 APIのコスト削減: ユーザーの入力
You’ve Got Options for Removing Event Listeners
You’ve Got Options for Removing Event Listeners Reviewing some of the most common approaches available to remove event listeners in JavaScript. Cleaning up your code in runtime is a non-negotiable part of building efficient, predictable applications. One of the ways that’s done in JavaScript is by stewarding event listeners well — specifically, removing them when they’re no longer needed. There ar
意外と知られていないJavaScriptのnew Date()の使用方法
new Date()の使い方 指定した時刻を表す日付オブジェクトを生成する。何も指定されなかった場合は現在の（デバイスに）設定されている時刻を取得する。 日時を指定するときはYYYY/MM/DD HH:mm:ssまたはそれぞれをカンマで区切った形式で取得。 var d1 = new Date('2014/04/01 12:34:56'); console.log(d1); // => Tue Apr 01 2014 12:34:56 GMT+0900 var d2 = new Date(2014, 3, 1, 12, 34, 56); console.log(d2); // => Tue Apr 01 2014 12:34:56 GMT+0900 new Date()に年を入れる new Date("2013")でその年の1月1日GMT+9時間の日付を取得する var d2 = new D
TypeScript で"moduleResolution": "Node"は使わないほうがいい
はじめにタイトルは若干煽りですが、TS 5.0 でBundlerという設定値が追加されたため、Nodeを使う場面はほぼ無くなったと思います。 今回は Node.js と TypeScript のモジュール解決の仕組みについて、moduleResolutionというオプションの観点から解説します。 この記事を書くにあたって実際に動作確認は行っていますが、もしも間違っているところがあればご指摘いただけると幸いです。 なお、 Node.js LTS v18、TypeScript v5.0 時点での情報です。 今後のバージョンアップにて変更がある可能性があります。 TL;DR"moduleResolution": "Node"は使わないほうがいい おそらく求めているものはBundler tsc をビルドツールとして使用している場合はNode16 / NodeNextがベスト Nodeを使う場合でも
WEBLIFE｜Shopify構築運用、CMS、映像CG制作
Shopifyを利用したECの構築・アプリ開発や、高セキュリティのホスティングサーバーを内包したCMSを提供。数多くの実績をベースとした運用支援やECのプランニングなど、進化し続けるWebに最適なソリューションを提案します。 BiNDec Shopify Premierパートナーとして350社以上の導入実績を誇る、EC構築・運用支援サービス。独自のShopifyアプリやShopifyに特化したグロース支援でECの成長をトータルサポートします。 WEBLIFEは、国内で数千社以上いるShopifyパートナーの中から、最も多くの事業者を支援し活躍したとして「Shopify Plus Partner of the year」および「Shopify Plus Upgrade Partner of the Year」を受賞しました。
D3 Tutorial Japanese D3チュートリアル日本語版
SUGIMOTO Tatsuo/...PublicD3 Tutorial Japanese D3チュートリアル日本語版Showing all 18 listings1.D3 チュートリアル 日本語版SUGIMOTO TatsuoMay 18, 2021•62.D3 チュートリアル 01 : このチュートリアルについてSUGIMOTO TatsuoOct 29, 20183.D3 チュートリアル 02 : 基礎編SUGIMOTO TatsuoOct 15, 2018•14.D3 チュートリアル 04 : 要素の追加SUGIMOTO TatsuoNov 12, 20185.D3 チュートリアル 05: メソッドのチェインSUGIMOTO TatsuoNov 12, 20186.D3 チュートリアル 06 : データのバインディング SUGIMOTO TatsuoNov 12, 2018•17.
こわくない関数型プログラミング
関数型プログラミングは全部理解しようとすると難しいですが、簡単な部分の中にも有用な知見がたくさんあります。 関数型プログラミングにまだ親しんでいない人向けに、明日からのプログラミングにすぐ役に立つ考え方をできるだけわかりやすく伝えます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
OldMapsOnline
Paraglide JS | inlang
Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.
オブジェクトのクローンにJSON化を使う時代は終わった！【JavaScript】 - Qiita
const Hoge: React.FC<Props>=()=>って書いてたら思考停止系と言われたので調べた
