URLSearchParams使ってみた URLSearchParamsを使ってみました。 その結果、URLのパラメータを追加する際に非常に便利だと感じたので、その使い方を共有したいと思います。 以前、パラメータを追加する際は次のように記述していました。 const name = encodeURI("taro"); const age = encodeURI("12"); const sampleURL = `https://example.com?name=${name}&age=${age}`; しかし、この方法はパラメータが少ない場合には問題ありませんが、動的なOGPなどでパラメータが多くなると、コードが読みにくく、さらにはencodeURIを個別に実行する手間もかかります。 URLSearchParamsを使用すると、次のように記述できます。 const sampleParams

はじめに まず↓の記事を見てない方はぜひ見てください！ 自分にとってはこの記事には「えっ、ナニコレ！」なテクニックが多く、特に解説もなかったのでいろいろ調べてたら休日が消えてました... なのでその時間の供養もかねて、自分が知らなかった部分を中心に、僭越ながら元記事の解説を書いてみたいと思います。 ちなみに、以下が元記事のコードそのままを実装したものです。たしかに掲載コードだけで要素がグリグリ動きますね。 See the Pen js-drag-move-original by www-tacos (@www-tacos) on CodePen. 初耳1: $img まずコードのここ

はじめに この記事はこちらの記事の和訳となります。 なお、著者には許可をいただいております。是非原文もご覧ください。 拙訳なので、ご指摘などあればお待ちしております。 Javascriptのバグ修正や答えを求めてGoogleやStackOverflowを探し回るのは楽しくないでしょう🏴‍☠️。 この記事では、生産性⚡を最大化し、苦痛🩸を最小化する、20個（訳註:正確には15個）の短く、パワフルなJavaScriptのテクニックを紹介します。 それではコードを見ていきましょう🤘 配列の重複を除去 配列から重複した要素を除去します。 const arr = ["a", "b", "c", "d", "d", "c", "e"] const uniqueArray = Array.from(new Set(arr)); console.log(uniqueArray); // ['a',

非推奨;: この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。 execCommand メソッドは、複数の異なるコマンドを実装しています。クリップボードへのアクセスを提供するものもあれば、フォーム入力フィールドや contenteditable の要素、文書全体（デザインモードに切り替えた場合）を編集するためのものもあります。 クリップボードにアクセスするには、execCommand() よりも新しいクリップボード API が推奨されます。しかし、編集コマンドを置き換えるも

プロプログラマ プログラマーを職業としてます。 Flex,Air,C#,Oracle,HTML+JSの言語ノウハウを中心に情報発信していきます クリップボードに簡単に値を設定するAsync Clipboard APIのnavigator.clipboard.writeText関数ですが、 ローカル環境で動かしていたときは動作していたのに、サーバにデプロイして動かすと、「Cannot read property ‘writeText’ of undefined」エラーになります。 このAPIはHTTP環境では動作しないように制限されているようです。 外部アクセス前提のサイトなら良いんですが、社内システムでhttpのまま動かしている場合、困ることになります。 クレジットカード番号などをコピーされて収集されるのを防ぐ目的でしょうか。 httpサイトでも使えるようにするには、前からある「docum

CSS .moviepass_area { display: block; margin: 20px auto 20px; padding: 20px 20px 0; } .moviepass_area p { color: #2165c0; font-size: 1.4rem; font-weight: 500; text-align: center; margin-bottom: 15px; line-height: 1.6; } .moviepass_inner { display: flex; width: 450px; margin: 0 auto; background: #F0F0F0; justify-content: center; align-items: center; padding-top: 10px; padding-bottom: 10px; flex-wra

var、let、constとは JavaScriptでは、変数や定数（以下、まとめて「変数」と表記します）を使う際、変数名を宣言することが推奨されています。 var、let、constとはすべてJavaScriptで変数を宣言する際に使うキーワードです。 たとえば、以下のように記述することで変数を宣言できます。 var techacademy = 'テックアカデミー'; let techacademy = 'テックアカデミー'; const techacademy = 'テックアカデミー'; let、constは新しい記法 3つの宣言キーワード内のletとconstは、ECMAScript2015から採用された宣言方法のキーワードです。 ECMAScript2015（エクマスクリプト）とは、JavaScriptの標準仕様です。 現在では、国際団体で標準化されたうえでGoogle Chrom

JavaScriptの変数宣言で馴染み深いvarは、letとconstが追加されたことで使われなくなっていくだろう、と『入門JavaScriptプログラミング』の著者J.D.Isaacksは書いています。再代入が必要ないときはconst、再代入が必要なときはletを使うほうがいいのだと。今回、本書からletについて詳しく紹介します。本書ではconstについても解説していますので、ぜひチェックしてみてください。 本記事は『入門JavaScriptプログラミング』の「LESSON 4　letを使った変数宣言」からの抜粋です。掲載に当たり、一部を編集しています。 letを使った変数宣言 今回は、次の内容を取り上げる。 letのスコープの仕組みとvarのスコープとの違い ブロックスコープと関数スコープの違い letで宣言された変数が巻き上げられる仕組み JavaScriptの歴史において、変数は常

JavaScriptの仕様には「参照レコード」という概念があります。参照を意識することで、JavaScriptにおけるメソッド呼び出しの理解と左辺式の評価順序の理解を同時に深めることができます。本稿ではこの「参照レコード」の動機と詳細の説明を試みます。 ※ 本記事ではECMAScriptの規格で「参照レコード」と呼ばれている概念を説明します。JavaScriptのオブジェクトは参照渡しのような使い方ができますが、これは本稿で説明する「参照」とは少しだけ異なります。 参照レコードの目的 JavaScriptにおける参照レコードは以下の2つの目的で存在しています。 左辺式の中間評価結果を表現するため。 メソッドのレシーバーを決定するため。 左辺式の中間評価結果とは たとえば a[f()] += 2; というコードを考えます。 function f() { console.log("f()");

ただ、取り出しただけではkey=value&key=valueで繋がれた状態で使用しにくいので、 Node.js標準ライブラリのquerystringのparseを使用して扱いやすいオブジェクトの形にパースします。 import { parse } from 'querystring' console.log(parse("param1=hoge&param2=fuga")) // { param1: 'hoge', param2: 'fuga' }

標準組み込みオブジェクトRegExpコンストラクターRegExp() コンストラクター静的メソッドRegExp.escape()静的プロパティRegExp.$1, …, RegExp.$9 非推奨; RegExp.input ($_) 非推奨; RegExp.lastMatch ($&) 非推奨; RegExp.lastParen ($+) 非推奨; RegExp.leftContext ($`) 非推奨; RegExp.rightContext ($') 非推奨; RegExp[Symbol.species]インスタンスメソッドRegExp.prototype.compile() 非推奨; RegExp.prototype.exec()RegExp.prototype.test()RegExp.prototype.toString()RegExp.prototype[Symbol.mat

hostとhostnameの違いとは？ 一覧を見ていると、hostとhostnameという似ているプロパティがあることにお気づきでしょうか？ hostとhostnameは、現在開いているWebページのホスト名を取得することができるプロパティです。ホスト名とは、例えばhttps://www.sejuku.net/blogのようなURLがあったとするとwww.sejuku.netの部分のことです。 大抵の場合は、プロトコル情報を排除したトップページのURLが該当します。では、この2つの違いは何なのか、サンプルコードを見ながら確認してみましょう。 console.log( location.host ); console.log( location.hostname ); 実行結果 www.sejuku.net www.sejuku.net locationに対してhostとhostnameを記