JSとCSSで中央寄せがなぜかズレる - Qiita
#はじめに JSを使用して要素の中央揃えを作成した時、なぜかCSSのフレックスボックスと中心がずれる場合があるので調べてみました 検証用コード 要素を3つ用意し 1.CSSのフレックスボックスを使用して中央揃えしたもの 2.JSの window.outerWidth を使用し計算を行い中央揃えしたもの 3.JSの window.innerWidth を使用し計算を行い中央揃えしたもの を作成しどういった場合に中央揃えがずれるのかを検証してみます <style> .frame{ /* height: 10000px; */ } .flex{ display: flex; justify-content: center; align-items: center; } .box{ width: 100px; height: 100px; color: white; } #box1{ backgr
JavaScript用の教材、ぷよぷよプログラミングをPythonでやってみた！ - Qiita
左：JavaScript版 右：Python移植版 はじめに 今回はJavaScript用の学習教材「ぷよぷよプログラミング」を参考に、Pythonでぷよぷよを作ってみたので、その感想を書いていこうと思います。 ぷよぷよプログラミングとは ぷよぷよプログラミングは、セガが出しているJavaScript向けの学習教材で、写経を通じてJavaScriptを学べます。コースが基礎、初級、中級、上級と分かれているので、自分のレベルにあったものを選べます。リンクを貼っておくので、気になる方はご覧ください。（本家の方にPythonは出てきません） この試みについて もともとは、Python以外の言語にも触れて比較したいと思い、JavaScriptの勉強をするつもりでした。しかし、せっかくなら上級をやりたいものの、上級だと無からすべて写経することになるので、流石に時間かかるな～という思いがありました。そ
2025-02-24のJS: Create React Appが非推奨に、Deno 2.2、Bun 1.2.3、ESLintのCSSサポート
JSer.info #726 - Create React Appが非推奨となりました。 Sunsetting Create React App – React create-react-appは非推奨となり、Reactを使ったフレームワークやVite/Parcel/Rsbuildなどのビルドツールへの移行が推奨されています。 Deno 2.2がリリースされました。 Deno 2.2: OpenTelemetry, Lint Plugins, node:sqlite lintのビルトインルールの追加、JavaScriptで書けるLint Plugin APIの追加、deno taskがwildcard(*)指定に対応しています。 また、deno outdatedにinteractive modeを追加、deno compileの改善なども含まれています。 unstableな機能としてOpe
JavaScript で関数はオブジェクト? なにそれ?
はじめに JavaScript をある程度書いていると、「関数はオブジェクトでもある」という話を耳にしますよね。そして、「そんなの知らないよ。はいはい。」と右から左に聞き流しているあなたのためにこの記事を書きました。 Function オブジェクトのプロトタイプチェーンや内部スロット、コンストラクタとしての使い方、bind/call/apply の仕組み、Arrow Function や Generator Function、Async Function など、JavaScript の関数が持つさまざまな特徴を解説します。 関数がオブジェクト?? まず最初に、JavaScript の関数は Object を継承した「呼び出せるオブジェクト(callable object)」です。つまり関数として呼び出し可能であるだけではなく、プロパティを持つことができます。関数名を変数のように扱ったり、他
HTML / CSS / JavaScript 制作 Tips 番外編 - Qiita
HTML / CSS / JavaScript 制作 Tips 番外編 user: ChatGPT先生、先日はHTML/CSS/JavaScript を用いたWebページ制作の初級編・中級編・上級編として次の３０項目を教えていただきました。 初級編のTips 10個： HTMLタグは必ず閉じるように心掛けてや。メンドクサイけんど、閉じ忘れが原因でエラー起こることもあるんじゃ。 CSSは外部ファイルで管理する方が整理整頓やし、保守や改修も楽よ。ほなら、あんたのコードもすっきりと！ やはよう使うけど、セマンティックなタグを使うとSEOにも好影響よ。シンプルでも、意味をもったタグがあるけん、活用しとき。 CSSのセレクタ優先度を理解しとき。この順なら、「ID」「クラス」「タグ」よ。覚えておき。 JavaScriptでDOM要素を扱うときは、getElementByIdやquerySelector
JavaScript: 接尾辞Automatonで高速に文字列を扱う - Qiita
接尾辞Automatonとは、接尾辞を効率的に表現するData構造です(Wikipediaより)。今回はこれを利用して高速に部分文字列とその出現回数を求めます。 このprogramの主な特徴は以下の通りです class State：各状態を表現し、以下の情報を保持します 部分文字列の長さ suffix link 次の状態への遷移 その状態が終端状態かどうか その状態を通過する部分文字列の出現回数 class SuffixAutomaton：以下の主要なmethodを提供します extend: 新しい文字を追加してAutomatonを拡張 build: 文字列からAutomatonを構築 calculateCount: 各状態の出現回数を計算 enumerateSubstrings: 部分文字列とその出現回数を列挙 第1引数: この値を超える出現回数(既定値=1)の部分文字列のみ列挙 第2引
わずか数行のコードで1つの要素を別の要素にスムーズに遷移させる、フレームワークに依存しないJavaScript -Blendy
数行のコードと外部スクリプトを記述するだけで、1つの要素を別の要素にスムーズに遷移させるJavaScriptを紹介します。 フレームワークやライブラリなど他のスクリプトに依存することなく、単体で動作し、もちろん他のフレームワークと一緒でも動作します。 Blendy Blendy -GitHub Blendyとは Blendyのデモ Blendyの使い方 Blendyとは Blendyはわずか数行のコードを記述するだけで、1つの要素を別の要素にスムーズに遷移させるJavaScriptです。依存関係はなく、単体で動作し、React, Vue.js, Angularをはじめ、ほぼすべてのフレームワークと一緒でも動作します。 MITライセンスで、商用プロジェクトでも無料で利用できます。
【海外記事紹介】Web開発者向けのWebAssembly活用法5選
2月17日、海外のテクノロジーメディア「The New Stack」が「Top 5 Uses of WebAssembly for Web Developers」と題した記事を公開した。この記事では、WebAssemblyがWeb開発にもたらすメリットと具体的な実装例を含む5つの活用法について詳しく紹介されている。以下に、その内容を紹介する。 2月17日、海外のテクノロジーメディア「The New Stack」が「Top 5 Uses of WebAssembly for Web Developers」と題した記事を公開した。この記事では、WebAssemblyがWeb開発にもたらすメリットと具体的な実装例を含む5つの活用法について詳しく紹介されている。以下に、その内容を紹介する。 1. ブラウザ内での高パフォーマンス演算 JavaScriptは柔軟性が高い反面、複雑な数値計算やアルゴリズ
🚀 「Solid.js」入門！高速リアクティブUIの新時代が来た⚡ - Qiita
Solid.jsで実現する高速リアクティブUI開発 ⚡️ こんにちは、現役エンジニアの@YushiYamamotoです。 今回は、最新のリアクティブUIライブラリ Solid.js について、初心者にもわかりやすく、かつ専門的な内容を解説します。Solid.jsは、その優れたパフォーマンスとシンプルなAPIで注目されており、多くのプロジェクトで採用されています。本記事では、Solid.jsの基本概念、導入方法、コード例、そして動作の仕組みについて詳しく解説します。 Solid.jsとは？ 🤔 Solid.jsは、Solid公式サイト で紹介されている通り、「コンパイル時にリアクティブ性を確保する」次世代のWeb UIライブラリです。 主な特徴は以下の通りです： Fine-grained reactivity (細粒度リアクティブ性) → Solid.jsは、仮想DOMを使用せず、直接DO
HTML / CSS / JavaScript 制作 Tips 中級編 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? HTML / CSS / JavaScript 制作 Tips 中級編 user: ChatGPT先生、先日はHTML/CSS/JavaScript を用いたWebページ制作の初級編について教えてくださり、ありがとうございました。今日は中級編として、以下の10個の項目について詳しく教えてください。 レスポンシブデザインに対応するにはCSSのメディアクエリを使うとええよ。 モダンJavaScriptでは、アロー関数がよく使われるわ。覚えときなり。 CSSでflexboxやgridを使うと、レイアウト作成が手軽になるの。 画像やフォントはな
HTML / CSS / JavaScript 制作 Tips 上級編 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? HTML / CSS / JavaScript 制作 Tips 上級編 user: ChatGPT先生、先日はHTML/CSS/JavaScript を用いたWebページ制作の初級編・中級編について教えていただき、ありがとうございました。今日は上級編として、次の１０項目について詳しく教えてください。 パフォーマンス最適化のために、クリティカルCSSの使用や画像の遅延読み込みを検討しとき。 JavaScriptを使ってデバッグ作業を効率化する方法を覚えるのがええし。コンソールAPIとかね。 RESTやGraphQLによるAPIの設計と使用
バグバウンティにおけるJavaScriptファイルの監視ツールの事例 - blog of morioka12
1. 始めに こんにちは、morioka12 です。 本稿では、バグバウンティの脆弱性調査で使われている JavaScript ファイルの監視ツールについて少し紹介します。 1. 始めに 免責事項 2. バグバウンティにおける JavaScript ファイルの監視 3. JavaScript ファイルの監視ツール JSWatch DiffScript URL Tracker JSMon jsmon.sh BLACKBIRD 4. その他 Monitoring JS files to know first about new features feat. Testing JavaScript files for bug bounty hunters Blog「バグバウンティ入門(始め方)」 Blog「バグバウンティにおける JavaScript の静的解析と動的解析まとめ」 5. 終わりに
JavaScriptメタプログラミングの極意 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 反射とメタプログラミングとは？ まずは理論から始めましょう。心配しないでください、それほど退屈ではありません。 反射（Reflection）：プログラムが実行時に自分自身の構造を検査できる機能を指します。例えば、オブジェクトのプロパティや型を調べることができます。JavaScript には Reflect オブジェクトがあり、一連の反射メソッドを提供することで、オブジェクトをよりエレガントに操作できます。 メタプログラミング（Metaprogramming）：より高度なテクニックで、コードを操作するコードを書くことを可能にします。つまり
ReactとHono.jsでAIチャットアプリを作る - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 0. はじめに この記事では、AIチャットアプリを作成していきます！ 最後まで読むと↓のようなアプリを作れるようになります 👏 工夫したポイント ストリーム形式でレスポンスを受け取る ユーザ体験の向上 ✨ 1. 技術スタック 1.1. Hono.js バックエンド（API）を作成します。 最近耳にする機会が増えたのでこれを機に触ってみたかったので採用しました。 ※フロント側で直接OpenAI APIを呼べばいいので、正直このチャットアプリにAPIは不要ですがHono.js使いたかったんです・・ ChatGPT曰く、以下のような特徴があ
ESLintがセグフォする件を調査していたら、Node.jsにコントリビュートしていた話 - CARTA TECH BLOG
はじめに こんにちは、サポーターズでエンジニアをしている@y_chu5です。 本記事では、当初ESLintのバグと思われていた問題が、実はNode.jsのバグであることが判明し、その修正に至るまでの過程をご紹介します。この体験を通じて得られた知見は、小中規模なプロジェクトのデバッグ手法として参考になるかもしれません。 まず、この問題の発見と初期調査において、VOICEVOXコミュニティのコミュニティサーバーの方々の多大なる貢献があったことを深く感謝申し上げます。彼ら彼女らの綿密な調査と報告がなければ、今回の問題解決には至らなかったと考えています。 問題との出会い 私の所属している VOICEVOX（テキスト読み上げ・歌声合成ソフトウェア）のコミュニティである 「VOICEVOX Communty by Discord」の開発雑談チャンネルで、とても気になるIssueについての話題が挙がって
JavaScriptの日付と時刻の管理を大きく簡素化する「Temporal」の実装作業が進行中
JavaScriptには「Date」という時刻を表すためのオブジェクトがありますが、タイムゾーンの扱いが難しかったり、APIが直感的ではなかったりするなどの問題がありました。こうした問題を解決した新たな時刻表示用オブジェクト「Temporal」が登場し、ブラウザへの実装作業が進められています。 JavaScript Temporal is coming | MDN Blog https://developer.mozilla.org/en-US/blog/javascript-temporal-is-coming/ JavaScriptのDateオブジェクトは、JavaScriptが1995年に作成された際にJavaの「java.util.Date」の実装をコピーして作成され、30年間同じAPIが使われ続けてきました。Dateはユーザーのローカル時刻とUTC(世界協定時)をサポートするもの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【JavaScript】分割代入いろいろ - Qiita
JavaScriptで「HTMLファイルに直接JavaScriptのコードを記述する」の動作を確認してみた。 - Qiita
Reactでハマッた`&&`の罠 ~JSとJSXを正しく理解しよう~ - Qiita
【React・JavaScript】Reactで必須！配列操作を練習する問題集-filter編 #1 - Qiita