あなたが知らないJavaScriptの便利すぎるショートハンド19選
日頃書いているJavaScriptをもっと短く書く方法を知っていますか？ 目からうろこ、すぐに使えるJavaScriptのショードハンドを紹介します。 JavaScriptを使うすべての開発者に向けて、私が長年かけて身につけたJavaScriptのショートハンド（短縮記法）を資料にしました。コードの違いが分かるように通常の記述方法も併記しました。 1．三項演算子 if-else文を1行に収めた短縮記法です。 通常const x = 20; let answer; if (x > 10) { answer = 'is greater'; } else { answer = 'is lesser'; } ショートハンドconst answer = x > 10 ? 'is greater' : 'is lesser'; 従来のif文を1行に収めることも可能です。 const big = x >
【脱jQuery】jQuery <=> vanillaJS 書き換え集
jQuery <=> JavaScript全書き換え一覧ではありません jQueryで書いていたコードをvanilla(素のJavaScript)に書き換えたいけど書き方がわからなくて調べ方もピンとこない状態の自分がこれを見ることができたらきっと嬉しいと思ったのでここに供養します。 脳の記憶容量が8バイトくらいしかないので今でもシンプルにJavaScriptの書き方をページ内検索して使ったりしています。 /*----------------------------------- セレクター ------------------------------------*/ //html $("html") document.documentElement; //body $("body") document.body; //id $("#hoge"); document.getElementBy
JavaScriptの演算子の優先順位と「禁止ルール」の一覧
ただし、種別は以下の通りです。 prefix (前置演算子) …… もとの式の手前に何個でもつけられる演算子。 例: -~-~x postfix (後置演算子) …… もとの式の直後に何個でもつけられる演算子。 例: x.foo()`bar`[0] postfix once …… もとの式の直後に1個だけつけられる演算子。 例: x++ は可能だが x++-- はパースされない。 逆に ++--x はパースされるが、構文とは別のルールで禁止される。 (後述) infixL …… 中置演算子で左結合 (演算子の優先度が同じ場合は左側にあるほうが優先される) 例: 0.1 + 1.0 - 1.0 は (0.1 + 1.0) - 1.0 になる infixR …… 中置演算子で左結合 (演算子の優先度が同じ場合は右側にあるほうが優先される) 例: 2 ** 2 ** 3 は 2 ** (2 **
JavaScript 長いループ 分割 - hitode909の日記
ブラウザで長いループや、重い処理をともなうループを回したいとき、同期的にJavaScriptを実行するとメインスレッドがブロックしてしまうので、ちょっとずつ細切れに分割して実行したい、ということがある。 昨日久しぶりに書いたら新たなパターンと出会ったので、これまでにどう書いてて今回どうなったかメモ。 setTimeoutする 以前(10年前とか)はこんなのをよく書いていた。 itemsがでかいArrayで、console.logがすごく重い処理だとして読んでください。 function iterateHeavyTask(items) { const startAt = new Date(); while (items.length > 0 && new Date().getTime() - startAt < 10) { console.log(items.shift()); } if (
JavaScriptの関数で何ができるのか、もう一度考える
関数（Function）は、ほぼ全ての現代的なプログラミング言語が備えている、プログラミングにおける基本的な構成要素です。もちろんJavaScriptも関数を備えています。 関数はシンプルで強力です。ですが、それゆえに多くの人を混乱させることもあります。私が大学のプログラミング実習のティーチングアシスタントを担当していたときも、「関数」でつまずく学生が少なくありませんでした。 関数は普段何気なく呼吸をするように使っているものです。ですが、改めて、関数とは何か、何ができるのか、ということを考え出すと、意外と難しいことに気がつきます。そこで、JavaScriptにおける関数について、いったい何ができるのか、もう一度ゆっくり考え直してみることにしましょう。 関数って何ができるんだっけ 複数の命令をまとめて名前をつける 関数の最も基本的な機能は、複数の命令をひとつにまとめて、名前をつけることです。
JavaScriptの非同期処理を理解する その2 〜Promise編〜 | さくらのナレッジ
こんにちは！小田島です。前回の「コールバック編」を納稿したとき、アイキャッチ画像はJavaScriptのロゴにタイトルの文字を入れただけというとんでもないやっつけ仕事だったのですが、さくナレ編集部の方に「シリーズで理解が深まる」というすごい煽り文句がついたとてもカッコいい画像に差し替えていただきました。アイキャッチ詐欺にならないようにがんばります。 非同期処理シリーズの2回目はPromiseについての説明です。前回はコールバックについて説明しましたが、Promiseを使うことでどのように便利になったのでしょうか。それでは見ていきましょう！今回はコードが多いのでかなり分量が多く感じられるかもしれませんが、実際はあまり大したことはありません。 今回の目的 今回説明するのはPromiseです。これはFutureパターン（Promiseパターン）というデザインパターンの一種で、ECMAScript
関数合成で書く！メンテナンスしやすいJavaScriptコードの書き方
JavaScriptに関数型プログラミングでアプローチするメリットは、小さくて理解しやすい個々の関数を用い、複雑な関数を構築できることです。しかし、もっともエレガントなソリューションを見出すには、ときには逆の方向から問題を見ることが必要になります。 本記事ではJavaScriptの関数合成について分析し、それによってなぜ判断が簡単でバグが少なくなるのか、段階的なアプローチで説明します。 ネスト関数 関数合成は、複数の単純な関数を受け取り、指定した論理的順序でサブ関数を実行する1つの複雑な関数にまとめる手法です。 結果を得るには、1つの関数を別の関数にネストし、結果を生成するまで、外部関数の操作を内部関数の結果上で繰り返し実行します。結果は、適用された関数の順序によって異なります。 これは以下のように、JavaScriptでよく見られる関数呼び出しを別の関数への引数として渡すプログラミング手
Webクリエイターの為の情報サイト | Web Programming Portal
みなさまどうも。続きまして引数とか『可変長引数』(かへんちょうひきすう)とか『arguments』(アーギュメンツ)とかについてやっていきましょう まずJavaScriptにおいての引数の挙動について軽く確認していきます。JavaScriptの引数はかなり自由に構築することができ、引数の個数も特に意識する必要なく使用することができます。 以下のサンプルを見てください。 var f = function(x, y, z){ console.log(x); console.log(y); console.log(z); }; f(1, 2, 3); // 数値『1』、『2』、『3』が出力されます。 上記のサンプルは仮引数の『x』、『y』、『z』を出力するだけの簡単な処理ですね。 3つの引数を出力する関数となっていますが、規定数以下の引数を渡して実行させても、逆に規定数以上の引数を渡して実行させ
FlexboxとJavaScriptで、異なる文字数の行の幅を自動で一律にそろえる
Result text-align: justify;が使えれば楽だけどそうもいかないのでJavaScriptで揃える、というのはかなり昔からある方法ですが、最近はflexboxが普通に使えるようになったので、spanで文字を囲ってdisplay:flex;で揃えれられるし、いろいろ応用も効きそうですね 他ライブラリに依存せず、バニラなコードとなっています var lines = document.querySelectorAll(".text-line"); var appendages = document.querySelectorAll(".append"); // 各文字をspan要素で囲う var wrapCharacters = function(lines) { return lines.forEach(function(line) { var characters = l
思わぬところで学習スイッチが入るかもしれないJavaScriptの小ネタ5選！ | フロントエンドBlog | ミツエーリンクス
2018年4月24日 思わぬところで学習スイッチが入るかもしれないJavaScriptの小ネタ5選！ UI開発者 宇賀 みなさんどうもこんにちは、UI開発者の宇賀です！ もうすっかり春ですね。暖かくなってきて過ごしやすくなってきましたが、花粉との戦いに日々明け暮れたり、新しい環境に四苦八苦したりと、反面身の回りは大変な時期なのではないでしょうか。 今回はJavaScriptを学び初めてしばらくすると陥りがちな「学習に飽きてきた状態」な方向けの記事です。 何かを作るために必ずしも直接必要ではない知識を知ることで、意外と学習スイッチが入ったりすることがある個人的な経験から、ちょっとした小ネタをいくつか紹介したいと思います。 微妙なチョイスで「最近ちょっとマンネリ化してきた」という方の学習スイッチを押していきたいと思います。 注意： 本記事は、これから紹介するコードや仕組みの利用を推奨するもので
JavaScriptのクロージャはメモリーリークをちゃんと理解して使おう - Qiita
はじめに 前にブログで書いた記事なのですが、せっかくなのでQiitaにも投稿します。 脱初級者の壁として君臨しているクロージャ。クロージャの使い方はわかったけど、いろんな記事を見るとクロージャは問題点もあるみたい。それに、そもそもクロージャの使い所がいまいちわかんないと思ってクロージャに再度立ち向かおうと思った次第です。同じような悩みを抱えているデザイナーさん、コーダーさん、フロントエンドエンジニアさんの参考になれば嬉しいです。 クロージャとは とりあえずおさらい & 補足をします。 よく見かけるクロージャの見本がこちら。 ここで簡単にクロージャについて説明します。ちなみに、最近読んだ本で何となくJavaScriptを書いていた人が一歩先に進むための本が説明としてわかりやすかったので、そちらを引用させていただきながら。 まずクロージャとは ローカル変数を参照している、関数の中に定義している
ECMAScript 2015以降のJavaScriptの`this`を理解する
この記事はJavaScriptの入門書として書いているjs-primerのthisに関する部分をベースにしています。 またjs-primerでは書けなかった現在時点(2018年1月1日)でのブラウザの挙動についてを加えたものです。 次の場所にjs-primer版（書籍版）のthisについての解説があります。 この記事と違って実際にコードを実行しながら読めるので、学習ソースとしては書籍版を推奨します。 書籍版: 関数とthis · JavaScriptの入門書 #jsprimer また、バグ報告やPRも直接リポジトリにして問題ありません。 asciidwango/js-primer: JavaScriptの入門書 おかしい場所を選択した状態で右下にある”Bug Report”ボタンを押せば、簡単にtypoとかのバグを報告できます。(PRでも歓迎) 前置きはこの辺までで、ここから本編。 この記
配列の重複をはじく、もしくは重複を取り出す - Qiita
var a = [1,2,3,3,2,2,5]; // 重複を削除したリスト var b = a.filter(function (x, i, self) { return self.indexOf(x) === i; }); // 重複のみをリスト var c = a.filter(function (x, i, self) { return self.indexOf(x) !== self.lastIndexOf(x); }); // 重複を検出したものを重複しないでリスト var d = a.filter(function (x, i, self) { return self.indexOf(x) === i && i !== self.lastIndexOf(x); }); console.log(a); // [ 1, 2, 3, 3, 2, 2, 5 ] console.log
「JavaScript初級者のためのコーディングガイド」に補足を試みる - Qiita
はじめに http://qiita.com/raccy/items/bf590d3c10c3f1a2846b を見ていたら、はてブに「理由がないから」ということがよく挙がっていたので、理由をつけてあげたら有益な内容になるかな？と思い、拙いながらも補足を試みようと思います。 【2017 1/3 15:10 追記】 元記事の前提はgulpなどを使ってminifyなども行なえる（もしくは行う目標がある）前提の様子なので、中級者以上がターゲットかなーと思いました。そのつもりで読むととてもいい記事だと思っています。 「最新のJSの書き方を覚えてあとは変換機能に任せればレガシーなJSのキツイところに向き合わなくて済みますよ？」みたいなイメージだとわかりやすいかな？ ==、!= 理由 暗黙の型変換が発生して、別の型の比較が真で扱われてしまう場合があるため。 解説 サンプルコードにも出ていますが言葉足らず
関数の仕様を正しく実装していることをどう保証するのか - $shibayu36->blog;
静的型チェックがあったらテストはあまり書かなくて良いのか - $shibayu36->blog; で静的型チェックがあったとしても、テストをあまり書かなくて良いわけではないという話を書いた。するとブコメでいろいろ意見をもらえた。これらの意見から、関数の仕様を正しく実装していることをどう保証するのかについてもう少し深く考えてみようと思い、その考えがまとまってきたので、ブログに書いておく。 一応前提として、今回の話は自分の経験とこれまでの本を読んだ知識を元に自分で考えたものであり、何かの理論に則って話しているわけではない。この部分が違うなどあれば突っ込みを受けたい。 今回考える仕様 このようなことを考える時、非常にシンプルに考えたほうが理解がしやすいので、以下の様な仕様を持つ関数addNaturalIntを考える。 関数addNaturalIntは正の整数を二つ受け取り、足しあわせて正の整数を
知ってる？Web開発者がJavaScriptでゲームを作るときのはじめの一歩
Web開発者が初めてゲームを作るときに戸惑うのが、「ゲームループ」という考え方。普通のWebアプリを作るのとどう違うのか、シンプルなゲームのプログラム構造に触れてみましょう。 「ゲームループ」は、時間をかけて状態を変化させることでアニメーションやゲームをレンダリングするために使う技術につけられた名前です。本来は、ユーザー入力を受け取り、経過時間の状態を更新してからフレームをできるだけ多くの回数描く関数です。 この短い記事では、基本的な技術がどう機能するかを説明します。基本的な技術が分かれば、ブラウザベースのゲームやアニメーションの制作を始められます。 ゲームループは、JavaScriptでは次のようになります。 function update(progress) { // Update the state of the world for the elapsed time since la
JavaScript中級TIPS - Qiita
文字列リテラル HTMLを含む文字列を生成する際に便利なため、囲む時はシングルクォート'hoge'がよい セミコロン 末尾にセミコロンをつけなくても解釈してくれるが、バグを生む可能性があるのでセミコロンはつけるように習慣化する ES6のclass記法のメソッド末尾にはセミコロン不要 同値比較 基本的に===をつかう。==だと寛容過ぎる解釈のため、バグを生むことがある。 短絡評価 hogeFuncの引数にtrue相当の値が入ってきた場合、 ||の右側は読まれない。 hogeFuncの引数にfalse相当の値が入ってきた場合、 （false, null, undefined, NaN, "", 0） ||の右側を読みにいく。
JavaScript で安定ソート - Qiita
// デフォルトの比較関数 function compare (a, b) { if (a === b) { return 0; } else if (a > b) { return 1; } else { return -1; } } function stableSort (array, fn) { if (fn == null) { fn = compare; } var i, len = array.length; if (len === 0) return array; // 値とインデックスのペアにする for (i = 0; i < len; i++) { array[i] = [array[i], i]; } array.sort(function (p1, p2) { var cmp = fn(p1[0], p2[0]); if (cmp !== 0) { // ペアの0
ElectronでWebviewの簡易ブラウザをつくってみたメモ - Qiita
var app = require('app'); var BrowserWindow = require('browser-window'); require('crash-reporter').start(); var mainWindow = null; app.on('window-all-closed', function () { //if (process.platform != 'darwin') app.quit(); }); app.on('ready', function () { // ブラウザ(Chromium)の起動, 初期画面のロード mainWindow = new BrowserWindow({ width: 1000, height: 600 }); mainWindow.loadUrl('file://' + __dirname + '/index.h
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScript: 通常の関数とアロー関数の違いは「書き方だけ」ではない。異なる性質が10個ほどある。 - Qiita
