JavaScriptのビルトインオブジェクトを拡張する - QiitaHelp us understand the problem. What are the problem?
ウィンドウサイズに応じて倍率を自動調整する.js - Qiita
はじめに こんな方に読んで欲しいです。 スタイルを作成する時に 色んなデバイスを考慮するのがめんどくさい レスポンシブなフレームワークを使っても、デバイスサイズによって改行位置とかが微妙にずれてきになる PCとSPでカラム数を変える必要がない 1カラムを想定している 解像度が高いPCだとコンテンツに対する余白の割合が多すぎて気になる この記事で紹介する方法を用いると 固定幅のデザインを1つ作成するだけでOK どんなデバイスでも同じ見栄えになる それでは… 仕組み 仕組みはっても単純です。 例えば幅1000pxのページをデザインしたとします。そしたらjsがウィンドウサイズに応じて適切な倍率を計算して設定してくれます。 ウィンドウサイズが1000pxの時は何もしない ウィンドウサイズが2000pxの時は200%にする ウィンドウサイズが500pxの時は50%にする 値は極端ですが、イメージでき
JavaScript で print デバッグ時に変数名を出力する - mizdra's blog
数列の和を求めるプログラムを作成することになり、意気揚々と以下のようなプログラムを書いたという状況を想像して下さい。 function sum(nums, acc = 0) { if (nums.length === 0) return 0; if (nums.length === 1) return nums[0]; return sum(nums.slice(1), acc + nums[0]); } const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; console.log(sum(nums)); // expected: 55 一見すると何も問題なさそうに見えるプログラムですが、実はバグがあります (皆さん分かりますか?) *1。実際に上記プログラムを実行すると 55 ではなく 10 が出力されます。 こうした場面に遭遇すると、自然と sum
JavaScriptの真偽判定まとめ。 - Qiita
ifを使う時に空文字列とか空オブジェクトってどう判定されるのかいつも忘れてしまうのでまとめてみます。 下記の関数を使ってチェックしてみました。
JavaScriptで連想配列のキーでソートする方法を現役エンジニアが解説【初心者向け】
連想配列とは 配列とは複数の要素をまとめて扱う仕組みです。配列は以下のように定義します。この場合「arr[0]」と記述することで先頭の要素である「’みかん’」を取得することができます。配列は先頭から順番に並んでおり、要素の位置をインデックスで指定します。 const arr = ['みかん', 'さくらんぼ', 'りんご']; 連想配列とは、要素が順番に並んでおらず、要素をキーで指定して取り出す配列です。JavaScript には連想配列は無く、オブジェクトが該当します。オブジェクトは以下のように定義します。 const obj = { orange: 'みかん', cherry: 'さくらんぼ', apple: 'りんご' }; オブジェクトの要素をプロパティと呼びます。プロパティの値「’みかん’」を取得するには以下のように記述します。 obj.orange obj['orange']
HTML 要素の位置を取得する | まくまくJavaScriptノート
要素の位置を取得する API ある HTML 要素の左上の座標を取得するには次のようにします。 ページの左上からの絶対座標や、親要素からの相対座標で取得することができます。 jQuery の例 var $e = $('#box'); // document（ページ左上）からの絶対座標 var x1 = $e.offset().top; var y1 = $e.offset().left; // 親要素の左上を (0,0) とした相対座標 var x2 = $e.position().top; var y2 = $e.position().left; ここで、親要素としてみなされるのは、position 属性に relative、absolute、fixed のいずれかをもつ直近の親要素です。 $e.position() でうまく値が取れない場合は、親要素にこの指定を忘れていることが多いので
[JavaScript] 数字を3桁カンマ区切りにする、2つの方法 - YoheiM .NET
こんにちは、@yoheiMuneです。 数値を3桁カンマ区切りにしたいという要件を、JavaScriptでどのように実現するのかについて、ブログに書きたいと思います。 目次 解決したいこと 「数字は3桁カンマ区切りで表示したいんだよね〜」と言われた時に、サクッと対応できる方法をお伝えしたいと思います。 方法1：toLocaleString()を利用 実装方法 もっとも簡単に対応するなら、toLocaleString()関数を使うと便利です。数値型の変数に利用できます。 var num = 12345; num.toLocaleString(); // "12,345" toLocaleString()はロケール（=言語、国、地域、などを表現する、例：ja）に合わせた数値表現を行うためのメソッドです。ロケールによって表示が異なりますが、日本語や英語の場合には3桁カンマ区切りとなります。 ブラ
![[JavaScript] 数字を3桁カンマ区切りにする、2つの方法 - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/59af8a45171618d90e4d4f0d7fe3d06f158278fc/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F624.jpg)
JavaScriptでアップロードするファイルの拡張子をチェックするサンプル
PHPでファイルをアップロードするサンプル PHPで複数ファイルをアップロードするサンプル に引き続き、ファイルのアップロードに関する記事です。 PHP側でもアップロードされる拡張子のチェックは当然するべきですが、アップロード処理が走る前にブラウザ側でチェックもしておきたいところ。これを無駄と感じるか、二重でもチェックはするべきと考えるかは人それぞれ。 例えば、アップロードを許可する拡張子の種類が変わった場合、JavaScriptとPHPの両方を修正しなければならないというメンテナンス上の問題もあります。 ちなみにぼくの場合はほとんどのサイトをPHPで作っているため、データベースのテーブルとかに許可する拡張子一覧を入れておいて、PHPでもJavaScriptでもそこを参照するような作りにすることが多いです。管理者しかアクセスできないようなページも作っておき、そこで拡張子の設定もできるように
JavaScript の配列の要素をすべて削除する - Qiita
clear とか clearAll とか remove とか delete とか配列を空にするシンプルなメソッドがあるのかと思ったけどなかった。 もう少し高機能な splice メソッドを使うのが良さそう。 Array.prototype.splice() - JavaScript | MDN splice() メソッドは、 (in place で) 既存の要素を取り除いたり、置き換えたり、新しい要素を追加したりすることで、配列の内容を変更します。 サンプルコード。 let array = ['Tanis'] // 配列要素を指定して初期化 array.push('Sturm') // 要素を1つ追加 array.push('Flint', 'Tasslehoff') // 要素を複数追加 Array.prototype.push.apply(array, ['Caramon', 'Rai
使用している Web ブラウザが IE (Internet Explorer) かどうか判別する | まくまくJavaScriptノート
JavaScript で IE かどうかを判別する IE 判別関数 (isIe) navigator.userAgent プロパティを参照して、ブラウザのユーザーエージェントを調べることで、使用しているブラウザが IE (Internet Explorer) であるかを判別することができます。 IE の場合、ユーザーエージェント名は MSIE あるいは Trident/ で始まります。 // 使用中のブラウザが IE であるかどうかを判別します。 function isIe() { var ua = navigator.userAgent; return ua.indexOf('MSIE ') > -1 || ua.indexOf('Trident/') > -1; } ただし、navigator.userAgent プロパティの値はブラウザの設定により書き換えられる可能性があることに注意
JavaScriptで特定の文字列が含まれているか調べるメソッドの使い方 - Qiita
JavaScriptでは特定の値が含まれているか調べる方法が複数あります。 用途によって使い分けられるのでまとめてみました。 String.prototype.indexOf()メソッド 呼び出すStringオブジェクトを引数の値で検索し、 指定された値が最初に現れた位置を返します。 使い方 const sample = 'abcdefg'; const result = sample.indexOf('c'); console.log(result);
async/awaitでPromiseの待ち合わせを行う
もう語り尽くされた感もあるのですが、async/awaitで複数のPromiseを待ち合わせる場合のやり方についてです。 Chrome 69のDevToolsのコンソールで動作確認を行いました。 3行で Promise.all() を使う方法があるよね awaitの配列を作る方法もあるみたいなんだ おもしろいね（小並感） Promise.all()をawaitする 筆者がよくやるのは、Promise.all()をawaitする方法です。 async function hoge() { const start = Date.now(); // 時間計測用 // sleep的なやつ const p11 = new Promise(resolve => setTimeout(resolve, 1000)); const p12 = new Promise(resolve => setTimeou
JavaScriptで[ 0, 1, 2, 3, 4 ]のような連番の配列を生成する方法 - Qiita
[...Array(5)].map((_, i) => i) //=> [ 0, 1, 2, 3, 4 ] spread operator...と、arrow function=>を使っているためES6以降で動作します。 解説 上のコードは3つのパートに分けられます。 パート1: Array(5) これは要素数が5つ(=スロットが5つあるだけ)の空っぽの配列を作る。undefinedが5つ入るわけでない。
![JavaScriptで[ 0, 1, 2, 3, 4 ]のような連番の配列を生成する方法 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/03c188097fe88306c3498c4b3ed35ea65a63b441/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZ0eHQ9SmF2YVNjcmlwdCVFMyU4MSVBNyU1QiUyMDAlMkMlMjAxJTJDJTIwMiUyQyUyMDMlMkMlMjA0JTIwJTVEJUUzJTgxJUFFJUUzJTgyJTg4JUUzJTgxJTg2JUUzJTgxJUFBJUU5JTgwJUEzJUU3JTk1JUFBJUUzJTgxJUFFJUU5JTg1JThEJUU1JTg4JTk3JUUzJTgyJTkyJUU3JTk0JTlGJUU2JTg4JTkwJUUzJTgxJTk5JUUzJTgyJThCJUU2JTk2JUI5JUU2JUIzJTk1JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1lNTc0MDAyMjI1YjBiZDZiNzRlYjFkMmNmODcwMjI2Yw%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwc3VpbiZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NGFlNjk2NWUyOWFiNjg4MmRlNmViY2E4NDc2NWMxMjA%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D03a063fc3a010dd01c0f721d05a7cc2b)
JavaScriptのArray.forEachをbreak、continue、returnさせたい
Array.forEachとは ECMA-262標準で追加されたメソッドで、for文を書かなくても、Arrayの要素すべてに対してcallbackの処理を行ってくれる便利なメソッドです。 たとえば、配列の中身をすべて表示するようなコードを組んでみましょう。 // テストデータ const TEST_DATA = ["a", "b", "c", "d", "e"]; // 従来の記法 for(let i = 0; i < TEST_DATA.length; i++){ console.log(TEST_DATA[i]); } // forEachを利用した記法 TEST_DATA.forEach(value => { console.log(value); }); 関数型言語っぽい非常にシンプルな記述が可能ですね。 forブロック内における、break、continue、returnと同じ動
JavaScriptで配列を空にする方法を現役エンジニアが解説【初心者向け】
初心者向けにJavaScriptで配列を空にする方法について現役エンジニアが解説しています。配列を空にするには、配列の長さを0にしたり、配列に空の配列を代入する方法があります。JavaScriptの配列が空かどうかの判定も含めて解説します。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 JavaScriptで配列を空にする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 Jav
JavaScriptにおけるシャローコピーとディープコピーについて - よちよち開発の日々
JavaScriptにおけるシャローコピー(shallow copy)とディープコピー(deep copy)について簡単にまとめました。 shallowは日本語で「浅い」という意味になります。 シャローコピー シャローコピーはざっくり言うと参照元のオブジェクトとコピー先のオブジェクトどちらも同じメモリを参照していることをいいます。 簡単な例 const obj = { name: "hoge", age: 24 } const obj2 = obj obj.name = "fuga"; console.log(obj2.name) // fuga console.log(obj.name) // fuga 同じメモリを参照しているのでobj2のnameを変更するobjのnameも変更されてしまいます。 ディープコピー ディープコピーとは、オブジェクトのみのコピーではなく、オブジェクトとメモ
JavaScriptで数値の桁数を合わせる（ゼロパディング）方法 - JavaScriptテックラボ - [SMART]
ゼロパディング(zero padding)とは、書式の桁数に満たない数値の場合に、足りない桁数だけ 0 を追加して桁数を合わせることです。 たとえば3桁で1を表す場合、足りない2桁をゼロで埋めて 001 と表記します。 JavaScriptでは、String.slice() を使って桁数を合わせます。 たとえば変数 num の値の書式を3桁にしたい場合、下記のようになります。 var num = 1; var ret = ( '000' + num ).slice( -3 ); console.log(ret); 出力結果 001 希望の桁数だけ '000' の0を増やし、その桁数を solice( -3 ) として指定します。 2桁にしたい場合は下記になります。 var ret = ( '00' + num ).slice( -2 ); 値が想定する桁数を超えたときは上記の桁が失われるの
![JavaScriptで数値の桁数を合わせる（ゼロパディング）方法 - JavaScriptテックラボ - [SMART]](https://cdn-ak-scissors.b.st-hatena.com/image/square/efeb6493234f33406d242c048873a805fca99c63/height=288;version=1;width=512/https%3A%2F%2Frfs.jp%2Fwp-content%2Fthemes%2Fsmart%2Fogpimage.png)
JavaScriptでのObject比較方法
修正とお詫び コメントにて、JSON.stringifyがObject順序を保証しない、というご指摘を頂きました。誤った情報を掲載してしまったことをお詫び申し上げます。 JSON.stringify()によると、 注: 配列以外のオブジェクトのプロパティでは、特定の順番で文字列化されることは保証されていません。文字列化された同じオブジェクトの中でプロパティの順番に依存しないようにしてください。 とのことでしたので、JSON.stringifyをObjectに適用する方法ではなく、es6より実装された`Object.entries`を利用し、配列に適用する方法に修正しております。 JavaScriptのObjectとは JavaScriptのObjectは、他の言語における、いわゆる「連想配列」です。 こうしたい const a = {"a":"a"}; const b = {"a":"a"
Javascript配列のコピー方法(Deep/Shallow/代入)備忘録 - Qiita
Javascriptの配列をコピーする時には、単に代入する、第一階層の値だけコピーする(Shallow Copy)、全てをコピーする(Deep Copy)の3通りのコピー方法がある。 例を見ると次の通り const array = [1,1,1,1,{a: 1}]; const array2 = array; // 代入 const array3 = [...array]; // spread演算子による展開代入 (Shallow Copy) const array4 = array.concat(); // concatによるShallow Copy const array5 = JSON.parse(JSON.stringify(array)); // Serialize/DeserializeによるDeep Copy array[0] = 2; array[4].a = 2; con
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jsやcssファイルのバージョン化 – ララジャパン