JavaScript
イージングって何？ 開始とか終了地点に近づくにつれて速度が変わるアレのこと。 今更感満載なので詳しくはググってね。 実装 See the Pen Untitled by m1y474 (@m1y474) on CodePen. const div = document.querySelector("div"); const span = document.que…
検証用に触ってみた記録 完成形 <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.10.2/lottie.min.js" type="text/javascript"></script> <div></div> <script> lottie.loadAnimation({ container: document.querySelector('div'), // 表示領域 path: './data.json', // ローカルに用意したLottieのJSONファイル renderer: 'svg', // 表示する…
やりたいこと canvasを使った文字の描画で、特定の幅で文字を折り返して表示したかった。 何も処理しないと↓みたいに文字が詰まって表示される 実装 ①文字を任意の文字数ごとに分割して配列に入れていく // 表示したいテキスト const src = "あ".repeat(30);…
やりたいこと canvasにdrawImage()で貼り付けた画像を正円で表示させたい（丸型にトリミングされたように表示させたい） やるまでは「quadraticCurveTo()でベジェ曲線使ってやらなかん感じ〜！？！？！？！数学できないよ〜！！」（数学関係あるかもわからな…
経緯 ありがたいことに投稿日から数年経過しても、検索からアクセスされてる記事がいくつかあるんだけど、情報が古いから○iitaみたいに この記事は公開日からn年以上が経過しています。情報が古い可能性がありますので十分ご注意ください。 っていう注意書き…
webpackでproduction buildしたときdist/にmain.js.LICENSE.txtを生成させたくなかった const TerserPlugin = require("terser-webpack-plugin"); module.exports = { // ...省略 optimization: { minimizer: [ new TerserPlugin({ extractComments: false, …
こういうやつ コード <textarea></textarea> <script> const textarea = document.querySelector('textarea'); textarea.addEventListener('input', () => { textarea.style.height = null; textarea.style.height = `${textarea.scrollHeight}px`; }); </script> 改行の数をカウントしてtextareaの…
親のチェックボックスのチェック状態を親に紐付けた子供のチェックボックスにも反映させたい ↓こういうやつ これをピュアJSで書いたときの備忘録 コード 解説 HTML 親チェックボックスに子供を紐付ける用のカスタムデータ属性(data-id="1")をつける (親であ…
電卓使いたいときにブラウザの Console 使う人間なので、タイマーも Console で完結させたかった 1秒ごとに Console に秒数を表示する let sec = 0; const intervalId = setInterval(() => { ++sec; console.log(sec); }, 1000); 特定の秒数になったらカウン…
Vue.js というより axios でファイルアップロードをしたかった 保存ボタンがなく、アップロード時にサーバーに送るのを想定 サーバーサイドのFWは Laravel を想定 <template> <div> <input type="file" ref="image" accept="image/*" name="image" @change="uploadImage" /> </div> </template> <script> import axios from "axios"; export default { name: "…
(function () { if (!navigator.geolocation) { console.warn("Geolocation APIを利用できない環境"); return; } navigator.geolocation.getCurrentPosition( (positions) => { // 位置情報の取得成功時の処理 console.log(positions.coords.latitude, posit…
PHPで言うところの range(1, 20) をやりたかったけどJSにはそれらしき機能がなく毎回調べているのでメモ [...Array(5).keys()] // [0, 1, 2, 3, 4] Array.from(Array(5).fill().keys()) // [0, 1, 2, 3, 4] indexを0以外から始めたいときはmapで足してあげる…
children - 指定した要素の1階層下の子要素を取得する find - 指定した要素の子孫要素を取得する closest - 指定した直近の親要素を取得 contents - 指定した要素の子要素のテキストを含み取得 next - 指定した要素の直後の兄弟要素を返す nextAll - 指定し…
scroll() list 余計な余白 var $scrollTarget = $("#scrollTarget"); var $scroll = $("#scroll"); var $scrollInt = $("#scroll").offset().top; $scrollTarget.hide(); $scroll.on("click",function(){ $scrollTarget.slideToggle("normal",function(){ if…
after - 指定した要素の後ろに引数で指定した要素を追加 insertAfter - 指定した内容を引数で指定した要素の後ろに追加 append - 指定した要素の中の後ろに引数で指定した要素を追加 appendTo - 指定した内容を引数で指定した要素の中の後ろに追加 before - …
fadeOut - 要素をフェードアウトして非表示 fadeIn - 要素をフェードインして表示 fadeToggle - fadeInとfadeOutの切り替え fadeTo - 指定したアニメーションでフェード処理 toggle - showとhideの切り替え slideDown - スライドで要素を表示 slideUp - スラ…
jQueryのDOM操作系のメソッドについてまとめておく 追加していく予定 .addClass - クラスを追加する .attr - 属性の取得 .hasClass - そのクラス名があるかどうか .prop - プロパティのチェック .removeAttr - 指定した属性の削除 .removeClass - 指定したク…
