jsを使って情報量が多いサイトなどによくみられる、タブメニューの実装を行います。基本動作としてはsectionにactiveクラスを付与する機能になります。 jsのコードを上から解説していきます。 …

今回はjsを使って基本的なアコーディオンUIを実装してました。 jsで記述する機能としては、 ・トグルメソッドでクラスのつけ外し ・dt要素は複数あるのでforEach文で繰り返し処理 ・トグルでク…

compositionとは compositionとは、コンポーネントの中に別のコンポーネントを合成して出力することです。 どんなコンポーネントはどんな子エレメントが入ってくるかあらかじめ想定できな…

前置き chrome拡張機能を開発する際、manifest の permissions に contextMenus を追加し、 { ... "permissions": [..., "contex…

非同期通信 エラーも吐かないし、正常にレスポンスしている。 なぜか、ダウンロードが開始されない。 非同期通信 (ajax) でダウンロードをするとブラウザのダウンロード機能が死にます。 ブラウザの仕様…

設定 1. prettierの設定 prettierの導入をします。様々なサイトで案内されているのでそちらを参照して下さい。 例）https://ics.media/entry/17030/ 以下の…

Adobe Targetの便利な機能のProfileScriptを使って色々なターゲティングを実現する事は可能です。 しかし、JavaScriptを使ったプログラミングが必要なことであることや、色々…

ランダムな数値を出す。 const numbers = [1, 2, 3, 4, 5]; for(let i = 5; i > 0; i--){ const randomNum = Math.fl…

はじめに 初心者がWebアプリを作ってみたよ https://qiita.com/kajiyai/items/9b1418d21a55cd5dbc5d#tips APIにお金がかかるので使用制限につ…

ゴルトンボードとは、二項分布から正規分布への近似を表現する確率シミュレーションです。 画像のように右か左に1/2の確率で落ちる釘を用意し、最終的にどこに落ちるかを検証します。 https://ja.…

webGLで動的なアニメーションを入れるときに、 ブラウザのスクロール率を計算する必要があったので、メモとして残しておきます。 scrollTop → 要素の上から最も上の表示されているコンテンツま…

はじめに 一年たった頃に、ようやくふわっとしていたthisについて理解できた時があったので、その気付いたときの記録とthisについて僕なりの言葉で解説したいと思います。 1年目まで勘違いしていた点 …

はじめに お勉強を兼ねて、非常に低機能な Qiita 用の Chrome 拡張を作成してみました。 機能 Qiita を使っていて、いくつか機能が追加されたらいいな、と思ったものがあります。 一つは…

はじめに W3CのCSS Values and Units Module Level 4で、ビューポート単位についていくつか仕様が変更され、ビューポート単位にLarge viewport、Small…

フロントエンド開発にあたりconsole.log()は黄金のツールです。しかし、このconsoleオブジェクトにはもっと使えるメソッドがあります。正しく、そして効率よくデバッグを行うためにこのso…