JavaScriptのビルトインオブジェクトを拡張する - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
ウィンドウサイズに応じて倍率を自動調整する.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メモ: HTML 要素の位置を取得する
要素の位置を取得する APIある HTML 要素の左上の座標を取得するには次のようにします。 ページの左上からの絶対座標や、親要素からの相対座標で取得することができます。 jQuery の例 const $e = $('#box'); // document（ページ左上）からの絶対座標 const x1 = $e.offset().top; const y1 = $e.offset().left; // 親要素の左上を (0,0) とした相対座標 const x2 = $e.position().top; const 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/a7815437fe281f634075b7fa8fc0da446bb6dbe4/backend=imagemagick;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
JavaScriptメモ: 使用している Web ブラウザが IE (Internet Explorer) かどうか判別する
JavaScript で IE かどうかを判別するIE 判別関数 (isIe)navigator.userAgent プロパティを参照して、ブラウザのユーザーエージェントを調べることで、使用しているブラウザが IE (Internet Explorer) であるかを判別することができます。 IE の場合、ユーザーエージェント名は MSIE あるいは Trident/ で始まります。 // 使用中のブラウザが IE であるかどうかを判別します。 function isIe() { const ua = navigator.userAgent; return ua.indexOf('MSIE ') > -1 || ua.indexOf('Trident/') > -1; } ただし、navigator.userAgent プロパティの値はブラウザの設定により書き換えられる可能性があることに注意
jsやcssファイルのバージョン化
laravel-mixの続きです。まだ続きそうなので、連載ものにしました。右にリストされているCATEGORIESのフロントエンドの開発です。 今回は、laravel-mixで作成されたjsやcssのファイルがどのようにbladeで参照されているかにフォーカスします。 asset() 再びレイアウトのbladeファイルの中身を以下に掲載します。 <!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- CSRF Token --> <meta name="csrf-token" conte
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の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におけるシャローコピー(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/65c6bca6dac61f3d6c28d2414c8e9796815cfbae/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Frfs.jp%2Fwp-content%2Fthemes%2Fsmart%2Fogpimage.png)
JavaScriptでのObject比較方法 | deep-rain.com
他の言語とはひと味違う、JavaScriptのObject比較方法 修正とお詫び コメントにて、JSON.stringifyがObject順序を保証しない、というご指摘を頂きました。誤った情報を掲載してしまったことをお詫び申し上げます。 JSON.stringify()によると、 注: 配列以外のオブジェクトのプロパティでは、特定の順番で文字列化されることは保証されていません。文字列化された同じオブジェクトの中でプロパティの順番に依存しないようにしてください。 とのことでしたので、JSON.stringifyをObjectに適用する方法ではなく、es6より実装された`Object.entries`を利用し、配列に適用する方法に修正しております。 JavaScriptのObjectとは JavaScriptのObjectは、他の言語における、いわゆる「連想配列」です。 こうしたい const
Javascript配列のコピー方法(Deep/Shallow/代入)備忘録 - Qiita
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; console.log(array); // [ 2, 1, 1, 1, { "a": 2 } ] console.log(array2); // [ 2, 1, 1, 1, { "a": 2 } ] cons
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptの真偽判定まとめ。 - Qiita
TechAcademy [テックアカデミー]![TechAcademy [テックアカデミー]](https://cdn-ak-scissors.b.st-hatena.com/image/square/2c295330d4f51d6ba69336c6835b47fb606bfd53/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Ftechacademy.jp%2F_nuxt%2Fogp%2Fog-image.jpg)
JavaScriptで特定の文字列が含まれているか調べるメソッドの使い方 - Qiita
JavaScriptで[ 0, 1, 2, 3, 4 ]のような連番の配列を生成する方法 - Qiita![JavaScriptで[ 0, 1, 2, 3, 4 ]のような連番の配列を生成する方法 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/c0b916ed0209ce652c3fb7826c6e1b3cf98c3aab/backend=imagemagick;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-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9SmF2YVNjcmlwdCVFMyU4MSVBNyU1QiUyMDAlMkMlMjAxJTJDJTIwMiUyQyUyMDMlMkMlMjA0JTIwJTVEJUUzJTgxJUFFJUUzJTgyJTg4JUUzJTgxJTg2JUUzJTgxJUFBJUU5JTgwJUEzJUU3JTk1JUFBJUUzJTgxJUFFJUU5JTg1JThEJUU1JTg4JTk3JUUzJTgyJTkyJUU3JTk0JTlGJUU2JTg4JTkwJUUzJTgxJTk5JUUzJTgyJThCJUU2JTk2JUI5JUU2JUIzJTk1JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz0xOTIwNmVmYzY5MWRiYjQxNDVjMjk2MjdhZWU0YTFhYw%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBzdWluJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0zNDNhMWU3NTVkZjIxMTBmNzgyZTg0ZjViMzMyNDZmZQ%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4gQ3JhZnRzbWFuIFNvZnR3YXJl%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%25231E2121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3D8d54da51ed503b7e1bc22f464ad46a43)
TechAcademy [テックアカデミー]