JavaScriptでオブジェクトや配列の特定のキーの値だけを取り出す | 綺麗に死ぬITエンジニア
タイトル、日本語にすると少しわかりにくいですが。 普段よく使う関数の一つなので、簡単に導入できるようにシェアしておきます。 具体的には、オブジェクトや配列から、指定したキーの名称にあたる値だけを取り出して返却する関数です。PHPで言うところのarray_column()関数のような使い方もできます。 定義言葉で説明してもイマイチピンとこないと思うので、早速定義から。 以下のJavaScriptを読み込んでください。 (function (w) { var isArray = Array.isArray; /** * オブジェクトや配列の特定のキーの値だけを取り出す * @param {Object|Array.<Object>} object * @param {string|Array.<string>} path * @returns {*} */ function property(
「世界最悪のログイン処理コード」を解説してみた
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 概要 ところでこのツイートを見てほしい。このソースコードをどう思う？ 世界最悪のログイン処理コード。 実際のサービスで可動していたものだとか……https://t.co/C2bG93ZCkj pic.twitter.com/EfVNAEslrn — はっしー@海外プログラマ🇳🇿元社畜 (@hassy_nz) 2018年8月10日 すごく……セキュリティーホールです…… 一応は動いていますが、あまりに問題がありすぎるため、Twitterでも話題になっていました。 問題点は片手に入り切らないぐらいある気がしますが、一つづつ解説していきま
Reddit - The heart of the internet
This JavaScript code powers a 1,500 user intranet application
式と演算子 - JavaScript | MDN
このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。 p^3�View in English �� �Always switch to English 式と演算子（カテゴリー別） アルファベット順の一覧は左側のサイドバーをご覧ください。 基本式 JavaScript での基本的なキーワードと一般的な式です。これらの式は最も高い優先順位を持ちます（演算子よりも高い）。 this this キーワードは関数の実行コンテキストを示す特別なプロパティです。 リテラル 基本的な null、論理値、数値、文字列のリテラルです。 [] 配列初期化子またはリテラル構文です。 {} オブジェクト初期化子またはリテラル構文です。 function function キーワードは関数式を定義します。 class clas
Array.prototype.includesが実装された - JS.next
概要 配列に指定した値が含まれているかどうかの真偽値を返すメソッドである。 利用例 var ary = [ NaN, 1, 2, 3, 4, 5, 6 ] // 従来方式 ary.indexOf( 2 ) != -1 // true // includes ary.includes( 2 ) // true // 何が同値とみなされるかは基本的には===やindexOfと同じ ary.includes( "3" ) // false // ただしNaNはNaNと同値とみなされる ary.includes( NaN ) // true // 第二引数で探索の開始位置を指定できる ary.includes( 4, 2 ) // true // 負の数で後ろからの位置を指定できる ary.includes( 5, -1 ) // false 実装されるバージョン V8 3.31.52（通常配列）
Array.prototype.includes() - JavaScript | MDN
引数 searchElement 検索する値です。 fromIndex 省略可 検索し始める位置のゼロから始まるインデックスで、整数に変換されます。 インデックスが負の場合、配列の末尾からさかのぼって数えます。 -array.length <= fromIndex < 0 の場合、 fromIndex + array.length が使用されます。ただし、この場合でも配列は前から後ろに向けて検索されます。 fromIndex < -array.length または fromIndex が省略された場合は 0 が使用され、配列全体に対して検索が行われます。 fromIndex >= array.length の場合、配列の検索は行われず、 false が返されます。 返値 論理値で、searchElement の値が配列内（fromIndex が指定されていた場合は、配列のその位置以降の部分
jQueryでチェックボックスのチェック状態を調べる方法 - 小さい頃はエラ呼吸
photo credit: Alan Cleaver via photopin cc 2013.06.14追記 コメント欄の指摘を受けて、記事を一部修正しました。 はじめに jQueryでチェックボックスのチェック状態を調べる方法をまとめてみました。 Web制作の現場で使うjQueryデザイン入門[改訂新版] (WEB PROFESSIONAL)posted with amazlet at 14.02.01西畑一馬 アスキー・メディアワークス 売り上げランキング: 6,298 Amazon.co.jpで詳細を見る jQueryのバージョン jQuery v1.10.1 jQueryでチェックボックスのチェック状態を調べる方法１ jQueryでチェックボックスのチェック状態を調べるには、以下のようなコードを書きます。#check1はチェックボックス要素のIDを指定します。$("#check1
Backbone.js 1.2: チェックボックスに応じて取り消し線を入れる
Todo アプリの練習の続き。取り消し線を入れるには CSS の text-decoration プロパティに line-through を指定する。インラインスタイルを採用して、テンプレートに記述することにした。 <ul id="listView"></ul> <script id="listTemplate" type="text/template"> <% _.each(list, function(item) { var checked = item.done ? 'checked' : ''; var decoration = item.done ? 'line-through' : 'none'; %> <li data-id="<%= item.id %>"> <input type="checkbox" <%= checked %> ><label style="text-
作って覚える Backbone.js - present
Web サービスにリッチな UI を実装したいけど、jQuery だけだとコードがスパゲッティになりそうなので、JavaScript の MVC フレームワークを使うことにしました。候補は Backbone.js と Knockout.js の2つ。どちらも最近はてブで注目を浴びましたね。 Backbone.js はあの 37signals がモバイル版 Basecamp で使った実績があります。一方、Knockout.js は .NET 開発者にはおなじみ(?) の MVVM パターンで開発できるといいます。どちらを使おうか迷いましたが、「依存している underscore.js が便利そう」というズレた理由で、今回は Backbone.js を選択。 手を動かさないと覚えない人間なので、サンプルを作ることにしました。作るのは TODO アプリ。サンプルの題材としては定番ですね。Back
JavaScriptで正規表現（文字列置換え編） - Qiita
/** * スネークケースからキャメルケースに変換 * * アンダースコア、ハイフン、半角スペースを変換 * 先頭の区切り文字は削除 * 変換前にある文字列中の大文字は変換されないので注意 * * 「abc-def」→「abcDef」 * 「abc-dEF」→「abcDEF」（変換前の大文字はそのまま） * * @param {String} str 変換したい文字列 * @param {Boolean} upper アッパーキャメルケースにするかどうか */ var snake2camel = function (str, upper) { str = str .replace(/^[\-_ ]/g, "") .replace(/[\-_ ]./g, function (match) { return match.charAt(1).toUpperCase(); }); return u
replace()の機能のまとめ！『正規表現、function()、arguments、RegExp()』：JavaScript - モーリーのメモ
『replace()』は、文字列の置換を行う関数です。 基本的な使い方は、下記の通りです。 var text = "abcabc"; var result = text.replace(/a/g, "1"); // "abcabc"内の"a"を最後まで検索して"1"に置換する // 結果：resultは"1bc1bc"になる 『replace()』の第１引数の『/a/g』は、検索する文字列を正規表現で表したものです。 正規表現では、検索する文字列を『/（スラッシュ）』で囲みます。 末尾の『g』は、最後まで探すというフラグです。 フラグには下表のようなものがあります。 フラグ意味 g１個目だけでなく最後まで検索します。 i検索の際に大文字と小文字を区別しません。 m複数行に渡って検索します。 ＊『g』フラグを付けないと１個目しか置換しません。 ＊また『text.replace("a", "1
JavaScript Reference - MDN
このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。 @q��View in English ��Always switch to English JavaScript リファレンスは、 JavaScript 言語に関する事実の保管庫として機能します。言語全体がここで詳細に記述されています。 JavaScript のコードを書いていると、これらのページをよく参照することになります（だから「JavaScript リファレンス」という題名なのです）。 JavaScript 言語は、ブラウザーやサーバーサイドのスクリプトなど、何か大きな環境の中で使用されることを想定しています。ほとんどの場合、このリファレンスは環境に依存しないようにしており、ウェブブラウザー環境のみを対象としている訳ではありません。 もし
ES Modules（import/export）ことはじめ
JavaScriptにも、モジュール機能（import/export）がやってきました！これまではNode.jsなどを用いてモジュールを扱っていましたが、これからはJSの標準機能として使えます。 対応ブラウザ ES Modulesに対応しているブラウザは以下の通りです。 Chrome 61 Safari 10.3 その他のブラウザは未定です。 ES Modulesの使い方 importする側 ES Moduleのimportを使うには、script要素がtype=”module”である必要があります。スクリプト自体は、インラインでも外部ファイルでもかまいません。 <script type="module" src="main.js"></script> type=”module”が指定されたスクリプトは、defer属性が付与された場合と同様の扱いになります。オプションとしてasync属性を
Object.assign() - JavaScript | MDN
引数 target コピー先オブジェクト — コピー元のプロパティを適用するもので、変更後に返されます。対象とするプリミティブ値が指定された場合、その値はオブジェクトに変換されます。 source1, …, sourceN コピー元オブジェクト (単数または複数) — 適用したいプロパティを含むオブジェクトです。 返値 コピー先オブジェクトです。 例外 TypeError 次のいずれかの場合に発生します。 target 引数は null または undefined です。 ターゲット オブジェクトのプロパティへの代入に失敗しました。例えば、ターゲット オブジェクトでプロパティが書き込み不可であるため、またはそのセッターがエラーを発生させたためです。 解説 コピー先オブジェクトのプロパティは、コピー元に同じキーのプロパティがあると上書きされます。より後のコピー元のプロパティが、より前のものを
Object.keys() - JavaScript | MDN
// 基本的な配列 const arr = ["a", "b", "c"]; console.log(Object.keys(arr)); // ['0', '1', '2'] // オブジェクトのような配列 const obj = { 0: "a", 1: "b", 2: "c" }; console.log(Object.keys(obj)); // ['0', '1', '2'] // キーの順序がランダムなオブジェクトのような配列 const anObj = { 100: "a", 2: "b", 7: "c" }; console.log(Object.keys(anObj)); // ['2', '7', '100'] // getFoo は列挙可能ではないプロパティ const myObj = Object.create( {}, { getFoo: { value() {
JavaScriptのオブジェクトで反復処理を行なう方法 - Qiita
JavaScriptの配列（Array）には、.filter()や.map()などの反復処理を行なうメソッドが定義されています。1 オブジェクトでも同様の処理を行ないたいところですが、残念ながらObjectにはそれらのメソッドが定義されていません。 ここでは、JavaScriptのオブジェクトで反復処理を行なう方法を2通り紹介します。 キー配列に変換 Object.keys()でキー配列に変換すれば、配列の反復メソッドが使用できるようになります。 この方法ではいったん配列に変換しているため、終端操作で直接オブジェクトを生成できません。
JSのES6での変数宣言がほとんどconstになって、letを使う機会がない。 - pospomeのプログラミング日記
ES6では変数宣言として、var に加えて const, let が追加された。 const は代入不可能な変数宣言なんだけど、 ES6を書いてると、ほとんどの変数宣言がconstにできることに気がついた。 プログラミングにおいて、予期せぬ変数の代入によって発生する不具合は少なく無いと思うから、 イミュータブルな変数としてconstで変数宣言するのはいいことだと思う。 とはいえ、オブジェクトのプロパティ代入は可能だから完全にイミュータブルではないんだけど・・・。 const test = {name:'test'}; test.name = 'fin3'; //これが可能になってしまう。 でも、基本constで変数宣言するのはちょっと違和感。 const は円周率 3.14 とか、マジックナンバーとかの「定数」を宣言する際に利用すべきで、 基本は let を使うべきではないのか? と思って
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JavaScript] null とか undefined とか 0 とか 空文字('') とか false とかの判定について - Qiita![[JavaScript] null とか undefined とか 0 とか 空文字('') とか false とかの判定について - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/1cb3daa06e63424e6d2e7a0116b121420a38c7ec/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGNzc1NiUyRnByb2ZpbGUtaW1hZ2VzJTJGMTQ3MzY4MDcwOD9peGxpYj1yYi00LjAuMCZhcj0xJTNBMSZmaXQ9Y3JvcCZtYXNrPWVsbGlwc2UmZm09cG5nMzImcz0yMDg5YWE2OTljNzUzNGQ3YWQzNDM1YjEwMWVhZjRiNQ%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253Dad1469ca61be031e845c1c818664c067%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCSmF2YVNjcmlwdCU1RCUyMG51bGwlMjAlRTMlODElQTglRTMlODElOEIlMjB1bmRlZmluZWQlMjAlRTMlODElQTglRTMlODElOEIlMjAwJTIwJUUzJTgxJUE4JUUzJTgxJThCJTIwJUU3JUE5JUJBJUU2JTk2JTg3JUU1JUFEJTk3JTI4JTI3JTI3JTI5JTIwJUUzJTgxJUE4JUUzJTgxJThCJTIwZmFsc2UlMjAlRTMlODElQTglRTMlODElOEIlRTMlODElQUUlRTUlODglQTQlRTUlQUUlOUElRTMlODElQUIlRTMlODElQTQlRTMlODElODQlRTMlODElQTYmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtcGFkPTAmcz0yNDY2MjFiNzNlNDc0NzkwNjZmMTU2NmU5ZGFiNDhmOA%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBwaGkmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz1mNzA5ZDQyYTc3OGRkNzYxZDRkNmY1YjBiZDVhNWZmNw%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3De8d4a866836f43c960ae0a0ed6106f45)
ポリモーフィズムを活用するとなぜ if や switch が消えるのか？ - Qiita
Vue.jsとReact.jsを習得するために、どのように学んでいけばよいのか -VueとReactのデベロッパ用ロードマップ
