[JavaScript] ECMAScript6のMapとSetを使ってみよう - YoheiM .NET
こんにちは、@yoheiMuneです。 今日は、ECMAScript6で定義されているMapとSetを使ってみたいともいます。Chromeはver.38から使えるので、すぐそこまできている技術です。 Special Thanks to https://flic.kr/p/aBtMu5 目次 多くのプログラミング言語でサポートされているMapが、とうとうJavaScriptでも使えるようになりました。 Mapはコレクション型の1つで、データを格納するためのデータ構造です。 JavaScriptではオブジェクトリテラルを用いて、以下のようにデータを保持することができます。 var data = { name: 'Yohei', sex: 'male', contry: 'JP' }; Mapでも似たようにKey-Value構造でデータを格納することができます。 // Mapオブジェクトの作成
![[JavaScript] ECMAScript6のMapとSetを使ってみよう - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/5dcc0513954e1663d28cfa213e031bd6db5588f8/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F340.jpg)
JavaScriptでカバレッジを取得する
本連載は、テストコードをこれから書こうと考えているJavaScript技術者を対象に、テストコードの意義からテスト駆動開発、JavaScriptでのテストコードの書き方、継続的インテグレーションなど、テスト全般にわたって解説します。また、原理原則だけでなくWhyから説明し、チームメンバーを巻き込みながら開発現場に活かせる考え方を総合的に解説します。第6回目の本稿は、JavaScriptでテストを動かし、JSCoverでカバレッジを取得する方法を説明します。 対象読者 JavaScriptの基本をある程度理解している方 テストコードをこれから書こうと考えている方 カバレッジとは ソフトウェアをテストする際の重要な基準の一つに、カバレッジというものがあります。カバレッジとは、テスト対象のコードの中で、テストが行われた割合のことをいい、パーセントで表現します。カバレッジ率は、いくつかの基準で取得
【JavaScript】AngularJSを触ってみた【MVCフレームワーク】 | ウェブ戦略・コンサルティング UNIONNET Inc.
2014.09.16 こんにちわ。 以前のスーツが入らなくなり落ち込んでいる山尾です。 今日は話題のJavascriptのMVCフレームワークAngularJSを触ったので少し紹介します。 少し前にVue.jsを触ったことがあったのですがAngularJSも触ってみようと思い手を出したのですが・・ Vueよりいい！！ 何がいいってドキュメントやサンプルが豊富！ これは僕みたいな未熟者が学習するにあたってデカいことですよ。 僕はずっとjQuery一辺倒で戦ってきたのですが、jQueryの惜しいとこめんどくさいとこを補ってくれるすげーやつです。 ちなみに僕はAngularJSの事をずっとアングラージェイエスって呼んでたんですがアンギュラージェイエスらしいです。 この業界だとこんなこと結構ありますよね？勘違いして覚えてしまう文字。英語難しい・・・ そんなAngularJSの機能の一部をご紹介しま
JavaScript イベントハンドラの循環参照
$(function() { var menu = document.getElementById('my-menu'); $('#run').click(function() { attachEvt(menu); }); }); var attachEvt = function(element) { var mouseHandler = function() { /* whatever */ $('#debug').html('done.'); }; element.addEventListener('mouseover', mouseHandler, false); }; attachEvt の中に mouseHandler をネストさせている。 これは、ハンドラ(mouseHandler) が呼び出し元の attachEvt のスコープ内に閉じ込められることを意味する。 したがって、
デザイナーが知っておきたいDOMの読み込みとjQuery | スマートフォンアプリ開発会社のエンジニアブログ
こんにちは。ビンゴ豊島です。デザイナーという立場ですがJavaScriptもちょいちょいと書かせていただいております。 今回はDOM操作をする前に知っておきたいDOMの読み込みについて記事を書かせていただきます。対象はDOM操作ばかり、もしくはDOM操作しかしないんですけど？といったデザイナーさんになります。これを読むと今までなんとなく使っていたjQueryも意味を理解した上で使えるようになれるかもしれません。 Webページが表示されるまで ブラウザがページを表示するまで簡単に書くと下記のようになります。 サーバにページをリクエスト サーバから返されたHTMLをダウンロード DOM構築をしつつ描画と画像等のダウンロード 表示完了 このうち「3. DOM構築をしつつ描画とダウンロード」のタイミングでどのような順番でイベントや処理が発生するかを検証します。 DOMの読み込みを確認するサンプルコ
Javascriptで範囲選択禁止 - 京都のお墨付き！
動作概要 Javascriptでの画像とテキストの範囲選択禁止スクリプトです。 <!-- 画像とテキストの範囲選択禁止（Javascript） CSS3版がなくてもこれだけで画像とテキストの選択禁止が可能 ================================================== --> <script language="Javascript"> /*<![CDATA[*/ document.onselectstart = function(){return false;}; /*]]>*/ </script> BODYタグに書く場合は以下のようになります。 <body onselectstart="return false"> CSSでも同様のことができます。 <!-- 画像とテキストの範囲選択禁止（CSS3） ========================
nexe - nodeスクリプトをラッピングして実行ファイル化
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました nodeを使えばJavaScriptでローカルで動くコマンドなどを作ることが出来ます。これはとても便利で個人的にはよく使うのですが、そのためには予めnodeがインストールされていなければなりません。 もちろんバイナリでも配布されているのですが、インストールの手間は初回実行には相当大きいと言えます。そこで使ってみたいのがnodeスクリプトを実行ファイル化するnexeです。 nexeの使い方 nexeは他の同じようなソフトウェアと同じく、nodeの実行エンジンをスクリプトと一緒にするタイプのソフトウェアです。 コンパイルはこのように行います。 nexe -i ./ -o ./hello-world.nex -r 0.8.18 コンパイルのためにnodeのコンパイルまで行うので初回は時間
Duo.jsちょっと使ってみた #duojs - pirosikick's diary
Duo - A next-generation package manager for the front-end. ちょっと良さ気だったので調べてみた。 準備 # install duo $ npm install -g duo Github APIを使うらしく、duo用にAPI Tokenをここから生成し、 ~/.netrcに下記フォーマットで保存する。 # なんかGHEとかもできそうな感じがするけど調べてはいない machine api.github.com login <username> password <生成したGithubのapi token> これで準備完了。 使う var uid = require('matthewmueller/uid'); var fmt = require('yields/fmt'); var msg = fmt('Your unique ID
ふじこのプログラミング奮闘記
JavaScriptのクロージャやスコープをちゃんと理解しているか試すテストを見つけました。 So, you think you know JavaScript? http://dmitry.baranovskiy.com/post/91403200 全部で5問ありましたが、今日は1問目を紹介したいと思います。 勉強した甲斐あって、1問目は私にも分かりました～☆へ（ｏ＾Д＾ｏ）ノ Nicholas C. Zakasがブログで引用解説していたので、日本語訳して載せておきますね。 ■問題 次のコードは、何がアラートされるでしょう。 if (!("a" in window)) { var a = 1; } alert(a); ■解答 undefined ■解説 if (!("a" in window)) { var a = 1; } alert(a); この不思議なコードは、「
Rails アプリケーション開発で役に立ったJavaScript デバッグの小技｜TechRacho by BPS株式会社
Chrome devtools でイベント監視 いろいろなJavaScriptプラグインを使っていると イベントの伝播を止めてしまうような動作をするものを使ってしまうことがあります。 function を割り当てたいイベントが止められていると厄介です。 代用できるイベントが生き残っていればそちらを使ってしまいたいです。 そんな時、どんなイベントが発生しているのかは Chrome devtools のmonitorEvents で確認することができます。 https://developer.chrome.com/devtools/docs/commandline-api#monitoreventsobject-events 第一引数で監視対象、第二引数でイベントを指定します。 monitorEvents(window, "resize"); イベントの指定はイベント名だけでなく、"mouse
JavaScript : Web Message って、ヤバイね。 : typeOf 'aki_mana'
postMessage で、HTML-IFRAME 間のメッセージ通信するネタは、ググればたくさん出てくる状況なんだけど、 １つのJavaScriptライブラリを読ませるだけで通信できる方法を考えた。 結論を先に書くと、postMessage のアスタリスク・メッセージングは、仕様上、非推奨ということだけど、たぶんこれは WebWorker 環境も考慮しての表現。popupやiframeでのアスタリスク・メッセージングはダメ。絶対にダメ。 まず、HTML（test_PostMessage.html）。 先に特徴； ブラウザの window のフレームで top に表示されることが条件。 IFRAMEは動的生成するので、IFRAMEに表示させたいHTMLとそのURLだけ、きっちり押さえます。 ちなみに、CSPで禁止できますので、確実に動作するわけではないこともポイント。 <!doctype
エンタープライズで使える！実践から学ぶJavaScript MVCフレームワークの選び方
エンタープライズで使える！実践から学ぶJavaScript MVCフレームワークの選び方 酒巻瑞穂（html5jエンタープライズ部） 現在エンタープライズシステムの開発現場では、シングルページアプリケーション（SPA: 単一のWebページで構成されているWebアプリケーションのこと）アーキテクチャの採用が模索されるなど、根本的な開発パラダイムにおいて大きな変化が起きようとしています（全体的にどのような変化があるかはエキスパートNo59の佐川夫美雄さんの書かれた「JavaからHTML5ヘ。業務システムの開発におけるWeb技術の変化と適応事例」によくまとまっています）。 こうした変化の一部を支えているのが、JavaScriptによるMVCフレームワークです。数あるフレームワークの中で、実際にどのフレームワークを採用するかというのは、開発コストだけではなく学習・運用コストにも関わる、非常に大きな
複数のブラウザで一度にJavaScriptのテストを行う
本連載は、テストコードをこれから書こうと考えているJavaScript技術者を対象に、テストコードの意義からテスト駆動開発、JavaScriptでのテストコードの書き方、継続的インテグレーションなど、テスト全般にわたって解説します。また、原理原則だけでなくWhyから説明し、チームメンバーを巻き込みながら開発現場に活かせる考え方を総合的に解説します。第5回目の本稿は、JavaScriptのクロスブラウザのテスト方法をjs-test-driverを使って説明します。 対象読者 JavaScriptの基本をある程度理解している方 テストコードをこれから書こうと考えている方 複数のブラウザでのJavaScriptのテスト 前回までは、主にテストコードの書き方について説明してきました。今回からは、テストの実行環境についての説明をします。 JavaScriptの実行環境は、クライアントサイドはブラウザ
JavaScriptはいかにしてprototypeを捨てクラスベース継承を得るのか - なんたらノート第三期ベータ
きっかけは、prototype と constructor と __proto__ の関係を再確認していたときでした。JavaScriptはこうだけど、これって、AltJSな言語の継承はどうなってるんだろうと思って試したくなりました。 ちょっと気持ち的に、なんだか宗教に入ったみたいに俺は JavaScript がわかったって声高に言う人、だいたいみんな、プロトタイプチェーンによる移譲がクラスベースの継承に束縛されていた思考のブレイクスルーなんだぜ、みたいに言うんだけど、いったいそれがどれほど素晴らしいものなんだろうと考えてしまい... もしプロトタイプチェーンがそんなに素晴らしいんなら、npm にあるほとんどのライブラリがチェーンを活かして作られてない理由が説明できない。もしかしたら、仕組みがいくら面白くても、実際のメンタルモデルにフィットせず、実は使い物にならないんじゃないか ----
JavaScriptのコードを記述する上での基本ルール
大文字と小文字の区別 JavaScript では大文字と小文字は明確に区別されます。変数に名前を付ける時や、または既に定義されている予約語を使う場合には大文字小文字も正確に記述する必要があります。 次の例を見て下さい。 let name = 'Yamada'; console.log(name); >> Yamada console.log(Name); >> Uncaught ReferenceError: Name is not defined 変数 name に値を代入したあと、コンソールに変数 name の値と 変数 Name の値を出力しています。 JavaScript では大文字と小文字は区別されるため変数 name と変数 Name は別の変数です。よって console.log(Name) の方は変数 Num が定義されていないためエラーとなります。
setTimeout, setIntervalを乗っ取って爆速にする - 素人がプログラミングを勉強していたブログ
setTimeout() vs ハッカー、仁義なき戦いによると function isNativeFunction(func, name) { for (var o in func) { if (o === "toString") return false; } var match = func.toString().match(/^function (\S+)\(\)\s*{\s*\[native code\]\s*}$/); return (match && match[1] === name); } setInterval = function(){}; isNativeFunction(setInterval, 'setInterval'); // false でsetIntervalが偽装されているか調べられると書いてあるが、そんなことはない。 自分が普段使っているブラウザはSa
JavaScript Test-Driven Development with Jasmine 2.0 and Karma
JavaScript Test-Driven Development with Jasmine 2.0 and Karma This document discusses JavaScript test-driven development using Jasmine 2.0 and Karma. It introduces test-driven development principles and benefits, then covers the Karma test runner, PhantomJS browser, and features of the Jasmine testing framework including describe blocks, expectations, matchers, spies, and custom matchers. It also
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - airbnb/javascript: JavaScript Style Guide
ClojureScript、Wisp、js_of_ocaml で いつもの window.addEventListener(...) を比較してみる - Qiita
JavaScript Memory Management Masterclass
