サイト制作などでアニメーションをレスポンシブ対応できることをご存知でしょうか? 考え方は簡単で「画面サイズ」を取得できれば良いわけです。 JavaScriptで画面サイズを取得したり、監視したりする方法を紹介していきます […]
Tips
JavaScriptのstyleでCSSスタイルを指定する方法【追加、変更、上書き、keyframesとanimationでアニメーション設定など】
JavaScriptでCSSのスタイルを設定できることをご存知でしょうか? もちろん全体的なコーディングについてはcssファイルに書いていくのですが、アニメーションなど単発の動作についてのスタイルなどで使うことができます […]
頻出!JavaScriptで作るアニメーションの基本【要素の書き換え、classList, setAttribute, toggle, innerHTML, textContent, getAttribute】
「toggleやinnerHTMLを使ったコードをよく見かけるけど何をしているか分からない」「JavaScriptが詳しくないので、アニメーションは記事のコピペで作っている」「innerHTMLとtextContentの […]
fit-contentを使って文字幅に背景色を揃える方法
見出しなどで「背景色を文字の幅ぴったりに指定したい」という場面があるかと思います。 そんなときにCSSだけで簡単に実現できるfit-contentというプロパティがあり、意外と知られていないので紹介していきます。 また動 […]
【コレだけでOK】JavaScriptでHTML要素を操作する方法(要素の中身を取得、作成、削除するメソッド、querySelector, querySelectorAll, getElementsClassByName)
「HTML、CSSはそれなりに書けるようになったけど、JavaScriptはググってコピペしている」「jQueryから知ったため純粋なJavaScriptの長い文法が何をしているのかイマイチ理解できない」「オリジナルでア […]
ReactのuseReducerの使い方を初心者向けに解説【useStateやuseContextとの違いまで!】
「Reactをそれなりに触れるようになったけどReduxになった瞬間ドはまりする」「Reduxの学習教材やYoutube動画を見てもイマイチ理解できなかった」「useReducerの使うべきタイミングが分からない」 本日 […]
JavaScriptで重複チェック、重複削除など検索(絞り込み)をする方法【filter, indexOf, set, startsWith, endsWith, test】
JavaScriptでデータの重複チェックと重複削除ができることをご存知でしょうか? 基本的な文法だけを使うとforEachを複雑にした方法があるのですが、自分としては使いづらいなと思っているので他の方法でシンプルなもの […]
JavaScriptでキーボードの入力を判定した処理を実装する方法
JavaScriptでユーザーが何のキーボードを入力したかを判定する方法があるのをご存知でしょうか。 代表的な使用例はPCゲームの開発ですが、最近ではWebアプリでショートカットキーを使った機能が当たり前に使われています […]
【※重要】JavaScriptのObject.freezeのよくある勘違いと使い方を解説
「オブジェクトと配列を定数で固定してるのに値の更新が行われる」「Object.freezeまでやっているのに値を固定できていない」 本日はそんな方に向けてObject.freezeの正しい使い方を解説します。 Web制作 […]
JavaScriptでオンライン/オフラインの判定をする方法
JavaScriptだけでユーザーのスマホやパソコンがネットに接続されているか確認できることをご存知でしょうか。 近年はゲーム、ツールなど殆どのサービスにインターネットが必須になってきました。 一方で何の拍子にWi Fi […]