Prism
Download Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s used in millions of websites, including some of those you visit daily. Dead simple Include prism.css and prism.js, use proper HTML5 code tags (code.language-xxxx), done! Intuitive Language classes are inherited so you can only define the language once for multiple code snippets. Light as a
リーダブルテストコード - Qiita
はじめに よく言われるように、ソースコードというものは書かれることよりも読まれることの方が多く、それゆえ読みやすいコードを書くということが非常に重要です。それはテストコードにおいても同様であり、プロダクトコードと同等に資産として扱う必要があります。 テストコードは具体的な値を用いて記述し、また複数の変数の値の組み合わせでテストケースを起こすため、プロダクトコードと比べて冗長になりがちです。 書籍『リーダブルコード』の14章でもテストコードの読みやすさについて触れられていますが、本稿では読みづらいテストコードをリファクタリングして読みやすくするためのテクニックを紹介したいと思います。 なおサンプルコードはJavaScriptで記述されており、そのテストコードはJest1を用いて書いています。 ソースコードはGitHubにあります。 リファクタリング(その壱) 以下の、決して読みやすいとはいえ
for...of - JavaScript | MDN
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. Learn moreSee full compatibilityReport feedback for...of 文は、反復可能オブジェクトをソースとした一連の値を処理するループを実行します。反復可能オブジェクトには、 たとえば組み込みの Array, String, TypedArray, Map, Set, NodeList（およびその他の DOM コレクション）、同様に arguments オブジェクトや、ジェネレーター関数から生成されるジェネレーター、ユーザー定義の反復可能オブジェクトなどがあります。
JavaScriptの謎コードまとめ - エフアンダーバー
JavaScriptのコードを書いていて、ふと変態的コードに慣れ切った自分に気づいてしまったので、 自戒の意を込めてJavaScriptでよく使われるおかしなトリックについてまとめておきます。 他言語からきた人が首を傾げるであろうアレらです。 文法編 (function(){...})() !!x ~~x x | 0 x || 0 x && x.y x >> 0 x >>> 0 +x "" + x void 0 typeof x === "undefined" API編 [].concat(x) Array.prototype.slice.call(arguments) Object.prototype.toString.call(x) Object.create(null) (0, eval)("this") おわりに 文法編 (function(){...})() みんな大好き即時関数
JavaScriptの「コールバック関数」とは一体なんなのか
近年のフロントエンドの盛り上がりはすごいですね。プログラミング初心者がJavaScript（最近ではTypeScriptも）から学び始めるなんて昔ではなかなか考えられなかったことです。 そんな世界中で大人気のJavaScriptですが、プログラミングに慣れていても困惑する部分が結構あります。特に初心者にとっては、非同期処理、this、コールバック関数、あたりが難しいのではないかと思います。 非同期処理については前に解説しましたし、thisの解説はネットに大量に転がってるので、今回はコールバック関数について解説します。 コールバック関数ってなんなんだ コールバック関数というとsetTimeoutなんかで使われるアレですね。Node.jsでもたくさん使われます。setTimeoutだと以下のような使い方になります： setTimeout(function() { console.log('He
なぜTypeScriptに失望してしまうのか - Islands in the byte stream
追記: この件に関してエンジニアHubにもTypeScriptの記事を書きました: TypeScript再入門 ― 「がんばらないTypeScript」で、JavaScriptを“柔らかい”静的型付き言語に - エンジニアHub｜Webエンジニアのキャリアを考える！ TypeScriptに対する失望は2パターンあって、その理由は理解できるのですが、いずれにせよそこでTypeScriptを捨てる判断をするのはもったいないと思っています。この2つの失望を感じたとしてもなお、TypeScriptには導入する価値があると思っています。 パターン1: 実はJavaScriptに対する失望である そこらのブログやTwitterで観測していると、理由の7割くらいこれです。これは、TypeScriptが独立した言語ではなくJavaScriptへのトランスパイラ（言語変換ツール）であり、独立したランタイムを
JavaScript：undefined値の判定
JavaScriptでは初期化されていない変数には全て「undefined」という値が入っています。 var a; alert(a); //undefinedが入っている これを利用して、変数が定義済みかどうかを判別することが可能です。…が、やり方がいろいろあるみたいなので、まとめてみることにします。 undefinedと比較する if (a === undefined) { alert("aは未定義"); } グローバル変数として、そのまんまundefinedという名前の変数が用意されているので、それと比較するやり方。一番素直な方法ですが、JavaScriptにおいては良くない書き方とされています。 undefinedは予約語ではなく、単なる変数です。だから上書きすることができるし、関数スコープ内で同名のローカル変数を作ることもできます。（ただし最近の処理系ではconst扱いになって上書
JavaScriptのIIFEとモジュールパターン | fenomas.com
他の多くのフラッシャーと同じく、最近色々HTML5開発を触ってみている。（現時点ではEdge Animateで色々を。）で、JSはAS3とかなり似ているため、それほど慣れにくくはない。（ほとんどのJSはAS3としてでもコンパイルできるし。JSを横目で見たら、変数の型を宣言しない人が書いたAS3と見間違えられる。） ただしJSとAS3は似ている言語にしても、使われる方言が違う。例えばこれ： 最初は「はあ？」と思った。でもJSにはよ〜くあるのだ。このパターンは英語圏で「IIFE」（イッフィー）とよばれる：「Immediately-invoked function expression」。つまり即時に実行される関数エクスプレッション。まあ、コードを見ればそういうもんですね。（@spacelogueさんによると日本語では即時関数というんだって） まあそれはそれで良いんだが、何のために使うのだろう？
JavaScriptを言語仕様から把握し、ライブラリに振り回されない漢を目指す人に贈るJavaScriptの基礎 - Qiita
個人的に本とかネットで勉強していたものを、ここにまとめていたのですが、せっかくなのでQiitaにも投稿します。 間違いなどお気付きの点があればご指摘をお願いいたします。 JavaScript(以下JS) ES6 = ES2015 とする(呼び方多すぎ) 変数と定数の定義 基本的に const で定義するようにし、どうしても必要な時だけ let を使うと事故を減らせる var はES6で書けるのであればもう使わなくて良い let 変数を宣言する。宣言できるのは一度だけ 宣言時に初期化を行わなくてもエラーにはならない(中身はundefinedとなる) 値の再代入は可能だが、再宣言はエラーになる const 定数を宣言する。宣言と同時に必ず初期化する必要がある 値の再代入も再宣言も不可能 定数名は大文字とアンダースコアを組み合わせた名前を使うことが多い模様 識別子 変数名、定数名として使われる文
マイナンバーのチェックディジット計算
[2018-08-07 おことわり] JavaScriptで書かれたマイナンバーのチェックディジット計算プログラムを公開していましたが，個人情報保護委員会様から，入力されたものがネットに流れないことはソースで確認したが，マイナンバー収集を誤認するようなページは好ましくないのではないかというご意見をいただきました。確かにもっともなことですので，ソースコードを示すだけにとどめることにしました。このソースを打ち込めば確認できますので，ご自分でお試しください。 <p><label>マイナンバーの先頭11桁：<input id="input" size="13" onchange="check()"></label></p> <p>マイナンバーの最後の桁（チェックディジット）：<input id="output" size="5" readonly></p> <script> function ch
truthy, falsy の訳について考えてみた。 - Block Rockin’ Codes
追記 twitter 経由で、id:mnicovideo さんがこの件を id:dankogai さんに質問されました。 @mnicovideo: @dankogai さんならtruthy、falsyをどう訳したり説明したりします？訳に関しては真、偽でも文脈から意味を想像できるからいいのかなと自分は考えたんですけど。 URL 2011-07-08 12:40:54 via web to @dankogai そしてそのレスポンスとして id:dankogai さんが以下のようなエントリを上げてくださっています。 404 Blog Not Found:"-y"は「っぽい」って訳していいっぽい 間接的になってしまいましたが、思わず弾さんに質問できた形になりました。弾さんありがとうございます! 内容としてはタイトルの通り「〜っぽい」が正解だろうということです。 そう。「悪い」のは原文なのだ。 だか
JavaScriptの行末セミコロンは省略すべきか
目次 自動セミコロン挿入(Automatic Semilocon Insertion) Restricted Production ASIの害 セミコロンにまつわる論争 で、どっちがいいの? JavaScriptには、 自動セミコロン挿入 という機能があり、行末でセミコロンを省略しても、多くの場合文法的に問題ありません。 しかしながら、 JavaScript: The Good Parts などで指摘されているように、自動セミコロン挿入は有害な機能であるため、JavaScriptのステートメント末尾には必ずセミコロンを付与するというのがフロントエンドエンジニアの共通認識だと思っていました。1 ところが、 Bootstrap に含まれるJavaScriptコードを見てみると、基本的にセミコロンが使用されていません。 調べてみると、どうも世の中にはJavaScriptのステートメント末尾にセミ
ES2015(ES6)新構文：アロー関数(Arrow function)｜もっこりJavaScript｜ANALOGIC（アナロジック）
アロー関数とは 基本構文 通常の無名関数との違い thisの扱いに注意 jQueryでコールバック関数としてアロー関数を使う場合 アロー関数で即時関数 まとめ 参考リンク アロー関数とは ES2015の新構文の一つ「アロー関数」とは、無名関数の省略記法です。無名関数ではない、いわゆる「関数宣言」には使うことができません。また、後述しますが無名関数とアロー関数とは完全に等価というわけではないため、取り扱いにはいくつかの注意が必要です。 //従来の関数式 var fn = function (x) {/* 関数本体 */}; //上記の関数式の無名関数部分（右辺）をアロー関数に置き換えたものが以下です。 var fn = (x) => {/* 関数本体 */}; //次の様な「関数宣言」をアロー関数に置き換えることは出来ません。 function fn(x) {/* 関数本体 */} 基本構文
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptのCollection操作をする時はお願いがある、一呼吸置いてから操作をしてくれ
セミコロンをつけ忘れただけなのに...【JavaScript】 - Qiita
JavaScriptで即時関数を使う理由 - Qiita
JavaScript Bang "!" Functions vs Leading Semi-Colon ";" IIFEs - Stack Overflow
PHPのarray_column関数をJavaScriptでも使いたい
JavaScriptを読んでて「なにこれ！？」と思うけれど調べられない記法8選。 - Qiita
JavaScriptのPromise - Qiita
