JavaScriptで配列の値を全削除したい時、なにか特別なメソッドが用意されているかと思いきや、どうやらそういったものはなさそうです。 今回はJavaScriptで配列を全削除する方法をまとめてみました。 1,spliceメソッドを使用する方法 Arrayオブジェクトのsplice()メソッドは、配列から要素を削除・追加して組み替えます。 配列名.splice(0)とすることで配列の中身を空にすることができます。 2,空で上書き 次に配列を空で上書きする方法です。 3,lengthを0にする そして最後に.lengthを用いて空にする方法です。 # まとめ 以上、JavaScriptで配列を全削除する方法でした。 開発のお役に立ちましたら幸いです。
誰に読んで欲しいか 初学者を指導するにあたり、どこまで拘って指導したらいいか、最低限守るべきラインに悩む人 JavaScriptを学び始め、少しキレイなコードを目指したい人 なぜ記事を書いたか 会社の初級エンジニアにフロントエンドの指導をしている時、指摘したいことは多くあるけどどこまで細かく指摘したらいいのか、、、悩みに悩みました。そこで、チョット難しいけど絶対意識して欲しいし、それだけで品質が変わることを自分なりに振り返ったのでJavaScriptをどうやって学習しようか悩む人や指導の仕方で悩む人の一助になればと思い纏めました。 本題 1. 変数宣言でconst以外は使わない JavaScriptの変数宣言にはvar, let, constが存在します。 極力constを使うことは変数の意味が一意に決まり、全ての開発メンバーがプログラムを理解することに役立ちます。 ２番以降の守るべきこと
この投稿ではJavaScriptで文字数をできるだけ正確にカウントする方法について取り上げます。 文字数とは？ 要件で「文字数を表示してほしい」「○文字以上はバリデーションエラーにしたい」と文字数を考慮しないとならないことがあります。 そもそも文字数とは何でしょうか。 たとえば、アルファベットの「A」は1文字と数えられそうです。 次の絵文字は、何文字になるでしょうか？ この絵文字はiOSであれば14.5の環境では、UI上では上のように1文字のように表示されます。しかし、それ以前のバージョンでは、同じ文字列データでも😵💫のように2文字で表示されます。なお、この絵文字は3つのコードポイントU+1F635 U+200D U+1F4ABからなります。この絵文字の「文字数」はいったい何文字として扱ったらよいのでしょうか。 以上のように、ひとことで文字数と言ってもデータと見た目と環境の3つのややこ
若者とプログラミングをしていて非常にショックを受けたのだが「JavaScript 配列 重複 削除」で検索するとfilterとindexOfを使ったアルゴリズムが検索結果上位に出てくる。これはO(N^2)。計算量の概念がないというのはとても恐ろしい。Big Techがアルゴリズム偏重の試験を課すのは合理的だと確信した。 — 父🌒 (@fushiroyama) March 10, 2020 先日このようなツイートが流れてきたので、$O(N^2)$、つまり計算量が $N^2$ に比例するということの恐ろしさを簡単に書きます。 JavaScriptで配列から重複を排除するコード EcmaScript 2015から導入されたSetを使えばものすごく簡単に書けます。 const array1 = [1, 5, 3, 1, 5, 3]; const array2 = Array.from(new S
たとえばJavaScriptで配列を扱っているとき、、、 同じ値を含めたくない、 重複してないか確認したい 、、、みたいな場面がありました。 一番簡単なのは forEach を使うことですが、あんまりスマートじゃありません。 そこで、JSにおける配列の重複チェックの簡単＆スマートなやり方 をいくつか紹介 たぶん重複チェックするだけなら、最初のが一番スマートだと思います。 方法１．Setを使って重複チェックするやり方 その一番スマートなやり方とはコレ Setオブジェクトを使って重複してるか調べる方法 これ以上に楽に判定できるやり方って（たぶん）ないですね。 この Set ですが、ES6 から使えるようになったデータ型です。 ▼ MDNでの Set についての説明 Set オブジェクトは値のコレクションです。挿入順に要素を反復することができます。Set に重複する値は格納出来ません。Set
JavaScriptでコードを記述する際、配列の各要素について処理をするケースは頻出します。開発の現場で配列操作の処理を見ていると、次のようなケースがよくあります。 配列の非破壊の望まれる場面が増えているが、元の配列を破壊操作している filter()やevery()など配列のメソッドで書けるところを、forEach()メソッドやfor ... of文を使ってコードを記載し、冗長になっている 記述しても効果のないArray.from()を使用している コード的には問題なく、アプリケーションは意図的に動作しているかもしれません。しかし、冗長な記述は可読性が低下し、予期せぬバグを誘発する可能性があるでしょう。 本記事では、配列操作でよく見かける冗長な記述を、簡潔な記述で置き換える方法について解説します。 本記事で紹介するJavaScriptの配列操作のチートシートを用意したので、まとめて読みた
おさらい その１，その２で新しいJavaScriptの書き方について学んできました。 今回は最終回となるその３です。 オブジェクトの省略方法 オブジェクトのプロパティ名と設定する変数が同じ場合、省略することができます。 const name = "タロウ"; const age = 20; // userオブジェクト const userObject = { name: name. age: age, } userObject // { name: "タロウ", age: 20 }のようなオブジェクトになる // こんな感じでかけばプロパティ名を省略できる // userオブジェクト const userObject = { name, age, } userObject // { name: "タロウ", age: 20 }のようなオブジェクトになる map, filter Ruby o
前回のおさらい 前回はJavaScriptの新しい書き方の基礎を学んでみました。 今回はさらに突っ込んだ新しい書き方を学んで行きます。 分割代入 昔の書き方ではobjectに対して要素をとり方出すときに、こんなやり方をしていたと思います。 var personObject = { name: "タロウ", age: 20, }; // 私の名前はタロウです。年齢は20歳です。 var message = `私の名前は${personObject.name}です。年齢は${personObject.age}歳です`;
私の知っているJavaScriptはもう古い 下記の記事をかいたように、JavaScriptの時代の流れについていけなかった私、、、。 そこで今回は今の時代はどんなふうにJavaScriptをかけばいいの？っていうことを学んで行こうとおもいます！ 知っている書き方 10年前のJavaScriptしか知らなかった私、、、。もし同じような方がいればこういった書き方を過去していたと思います。
はじめに JavaScriptは年々進化している、、、。もしかして私の知ってるJavaScriptってもう古い？！ ってことで、最近ずっとフロントエンドに関わる機会がなかったので改めて勉強してみました！ あなたの時代JavaScriptは？ 私がJavaScriptを書いていたころは約10年前(2011年あたり)で、当時はjQuery使うと便利だよね〜みたいな時代でした。そこから10年たったいま、、、React?Vue.js?ES2015?webpacker?Babel?なんじゃそりゃーっていうギャップが生まれている状態です（反省）。そこで今回は表面だけでもいいから概要だけでも知っておくのが目的になります。 モダンなJavaScriptは昔のJavaScriptと何が違うのか では、昔と今では何がちがうのか？ いくつかポイントをまとめてみました！ ◇ ReactやVueという便利なライブラ
JavaScriptでx === 'a' || x === 'b' || x === 'c' || ...をシュッとさせるJavaScript
こんにちは山崎です。久しぶりの投稿になります。 今回はJavascriptでドラッグアンドドロップでのファイルアップロードを実装しようと思います。 完成形・仕様 このような画面になります。ファイルはドラッグ＆ドロップもしくは、ファイル選択フィールドからアップロードし、下にアップロードされた画像を表示する形です。 Ajaxなどを使ってアップロードされた時点でサーバーに保存するのではなく、送信ボタンが押された時点でサーバーに画像がアップロードされる仕様です。 今回はスタイルを最低限しか当ててないため質素ですが、こういったUIはCMSの管理画面などでよく見ると思います。 実装 まずHTMLを作っていきます。今回は最低限のスタイルで済ませるので、インラインでスタイルを書いています。 <html lang="ja"> <head> <meta charset="UTF-8"> <title>ドラッグ
デベロッパーのコミュニティには、実装に役立つテクニックやヒントが満載です。その中から特に有用なJavaScriptのテクニックとヒントを紹介します。 8 JavaScript Tips & Tricks That No One Teaches 🚀 by Garvit Motwani (@GarvitMotwani) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. JavaScriptにおける機能継承 2. .map()の置換 3. 数値から文字列に、文字列から数値に 4. lengthを使用して配列のサイズを変更したり、空にする 5. 配列の分割で値を入れ替える 6. 配列から重複を削除する 7. ループのコードを少なくする 8. パフォーマンス 終わりに はじめに JavaScriptは世界で最もクールな言語
JavaScript でいろいろな日付の計算関係をまとめてみました。前回の日付関係のまとめエントリの JavaScript版です。 日付の単位について 基本的なことですが、一応まとめておきます。 1秒は1000ミリ秒 1分は60秒 1時間は60分 よって 1時間=60分=3600秒=3600000ミリ秒 1日=24時間=1440分=86400秒=86400000ミリ秒 現在時刻の取得 まずは、最もよく使う処理です。 //今日の日時を表示 var date = new Date(); document.write(date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.get
日付バリッド関数 JavaScriptで一般的な日付チェックを行う関数です。 日付オブジェクトに変換して確認しているので、うるう年などの間違いも正しく指摘してくれます。また、標準的な関数のみの使用なのでブラウザ依存もありません。 // ------------------------------------------------------------------- // 日付チェック関数 // ------------------------------------------------------------------- function ValidDate(y,m,d) { dt=new Date(y,m-1,d); return(dt.getFullYear()==y && dt.getMonth()==m-1 && dt.getDate()==d); } <script s
new Date()の使い方 指定した時刻を表す日付オブジェクトを生成する。何も指定されなかった場合は現在の（デバイスに）設定されている時刻を取得する。 日時を指定するときはYYYY/MM/DD HH:mm:ssまたはそれぞれをカンマで区切った形式で取得。 var d1 = new Date('2014/04/01 12:34:56'); console.log(d1); // => Tue Apr 01 2014 12:34:56 GMT+0900 var d2 = new Date(2014, 3, 1, 12, 34, 56); console.log(d2); // => Tue Apr 01 2014 12:34:56 GMT+0900 new Date()に年を入れる new Date("2013")でその年の1月1日GMT+9時間の日付を取得する var d2 = new D
この辺主観も混ってくるところではあるんですが。 JavaScript を上の方で読み込んだ場合 JavaScript の読み込みが終わるまでレンダリングされない JavaScript を下の方で読み込んだ場合 JavaScript の読み込み前にレンダリングは終わるが、 JavaScript が読み込まれるまでウオッなんかスクロールガクガクする！！スクロールできねえ！！！みたいになりがち スクロールしなくてもコンテンツが表示されるようなサイトでは下で読み込むアプローチは有効でしょう。しかしながらユーザーがレイアウトを変えられるようなサイトだったり長文コンテンツが沢山出るような可能性が高いサイト（具体的にははてなブログ）などで「スクロールしないとコンテンツが出てこない可能性が十分に高い」場合はかえってユーザビリティを阻害する可能性があります。 ユーザーは経験的に数秒待てばコンテンツが表示され
Google Hosted Library – Webを速くするためにGoogleがやっていること Make the Web Faster 03 – Jxck Googleは、よく使われるJavaScriptのライブラリなどをGoogleのインフラを使って配布しています。 これを Google Hosted Library と呼びます。 この、Hosted Libraryの導入を単純に「自分で配布しない分が楽になるだけ」、くらいな感覚で使っている方も多いと思います。しかし、実はこれはみんなが使えば使うほど、得をする仕組みになっていることを見落としてはいないでしょうか？ 今回はそんな、Google Hosted Libraryについて、その仕組となるCDNやキャッシュの技術などについて解説します。 よくある Web ページ 例えば自分が配信するindex.html内でjquery.2.0.3
「Webサイト・アプリ高速化テクニック徹底解説」第8回は、モバイルブラウザに向けた最適化について紹介します。 モバイル端末はPCに比べ、CPUやネットワークなどの性能面で劣ることからボトルネックの影響が出やすく、またゲーム開発など突き詰めたチューニングを行う場面では、特殊なノウハウも必要になります。 しかしきちんと最適化を行えば、その効果もその分著しく、比較的低スペックな端末や3G回線であっても、サクサク軽量なサービス提供が可能です。今回の記事では、その勘所をお伝えしたいと思います。 1. ボトルネックを取り除く まずはやってしまいがちなボトルネックの事例について、挙げていきたいと思います。前述のようにモバイル端末では、その性能からPCよりも顕著に、未最適化箇所が体感に影響を及ぼします。 仕事がらそこそこの数のアプリケーションを見てきましたが、モバイル向けに特化したチューニングができていな
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く