JavaScriptにおける継承のパターン4種類の概要と対比 | POSTD
JavaScriptはとても強力な言語です。強力がゆえ、実はプロトタイプをデザインしたり、オブジェクトのインスタンスを生成したりするのに何種類もやり方があります。それぞれの方法には長所も短所もあります。そこでJavaScript初心者の皆さんのために私がそのあたりを整理して説明したいと思います。今回の投稿は、以前私が書いた 「JavaScriptを分類するな」 の続編です。前回の投稿でたくさんのコメントをいただき、コードの例を出してほしいをいう反応をいただいたので、今回はそれらにお応えします。 JavaScriptはプロトタイプを使って継承 つまり、JavaScriptでは、オブジェクトは別のオブジェクトを継承することができます。 { } 波括弧を使って生成されるJavaScriptの基本的なオブジェクトは、唯一のプロトタイプとして Object.prototype をプロトタイプに持ちま
var, let, constの使い分けについて｜もっこりJavaScript｜ANALOGIC（アナロジック）
とりあえず結論から ES5時代のスコープ ES2015からlet, constが使えるように 巻き上げ（ホイスティング）について 非strictモードでの挙動 参考リンク まだまだBabelにお世話になりつつも、ES2015ベースでコードを書くことが確実に増えて来ていますね。 ES2015では変数の宣言に let, const という新しいシンタックスが使えるようになりました。 早速これらを使うようにしてみたのですが、let/constについては「letはブロックスコープ」「constは定数」程度の認識だったので、私の書いたコードには var, let, constが入り混じるというよくわからない状態になりました。 そのような状況を経て、まず最初に思ったのが「これ、var 要らなくね？」というもの。 基本的に、変数の有効範囲（スコープ）は可能な限り局所的にすべきという考えだったので、それで
【Jest】SpyOnで関数のMock化ができない場合の対処 - echo("備忘録");
概要 JavaScriptのソースを単体テストする際、Jestを使っている人も多いと思います。 jestjs.io で、ある関数のテストをする際に、その関数が呼ぶ別の関数を一時的にmock関数にしたい場合があります。 Jestでは、それをspyOn()というメソッドを使うことで実現できます。 // 例：例えばこのvideo.play()関数自身はtrueを返すけど... const video = { play() { return true; }, }; module.exports = video; const video = require('./video'); test('plays video', () => { // こんな感じでspyOn()してあげることで、mock関数化して、 // そのふるまいを自由に定義できる。 // ここではfalseを返すように変更している co
【JavaScript】Function.prototype.bind() とthis束縛の歴史 - estie inside blog
この記事は JavaScript Advent Calendar 2020 の 8 日目の記事です。 今回は、最近 JavaScript を書き始めた初心者の方や、ES6 以降の JavaScript しか触っていない方などに向けて、 Function.prototype.bind() と this 束縛の歴史 について紹介していきたいと思います。 Function.prototype.bind() って何 🤔 Function.prototype.bind() は、関数が呼び出される時に、そのふるまいが依存してしまう実行コンテキストを指定するための関数です。 かつては現在ほど簡単ではなかった実行コンテキスト、あるいはthis の扱いを、ぐっと容易にしたとても便利な関数です。 現在はアロー関数の登場により使う機会はほぼなくなっているものの、その機能にとても面白みを感じ、今回紹介することに
hands-on three.js - end0tknr's kipple - web写経開発
hands-on three.js + cannon.js - end0tknr's kipple - web写経開発 の更に前段です。 目次 1. cubeのグルーピング 2. 様々な形状の表示 3. 音声の可視化 4. 音声の可視化 その2 1. cubeのグルーピング 以下の実際の動作は、github pagesをご覧ください。 https://end0tknr.github.io/sandbox/threejs_cannonjs_misc/test_threejs.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/109/three.min.js"></script> <scr
右クリック禁止のサイトへ対策するシンプルな方法。 - それマグで！
アフィサイトごときが、右クリック禁止をするなんておこがましい。 銀行サイトごときが、残高表示の金額を選択させないなんて、バカにしてんのか。 ドメイン購入サイトごときが、戻るだけで決済されてませんって、フザケンナと。 というわけで、一瞬にして対策できるシンプルなコードを 右クリック禁止の対応。 ` selectstart contextmenu dragstart mousedown copy cut paste mousedown mouseup beforeunload beforeprint `.split(/\s/).filter(String).forEach((e, i) => { window["on"+e] &&( window["on"+e] = null ); document["on"+e] && (document["on"+e] = null); window.ad
【javascript】配列ライクなオブジェクトでforEachどうやるのか調べた話【querySelectorAll】 - すこしふしぎ．
こんばんは．1000chです． 先日，思い出のマーニーをみてきました． facebookで友人の評価がよかったので期待してたんですが，ほんと良かったです． 最後(´;ω;`)ってなりました． この夏，引きこもってる人はぜひ見に行くと良いと思います． アクティブといえば，コミケ３日目西きー16bあの人の研究所にて配布される研究論文集が気になってます． 有名大学の方々が，盛大に素敵に才能を無駄遣いした自由研究の論文集で，なかなかカオスで面白そうです． さて脈絡もないですが，今回はjavascriptをつかって配列ライクなオブジェクトをforEachする処理を学んだのでメモっときます． いきさつ そもそもの課題はコレ． ページ内のa要素が持つテキストを全て出力して下さい． ふむ．簡単じゃん．ということでまず回答． obj_ls = $("a") for(var i=0; i<obj_ls.len
【翻訳】Date and Times in JavaScript - from scratch
この記事は littledan から依頼を受けて、翻訳しています。広く Date and Times の JS プロポーザルについて意見がほしいとのことです。 意見は以下の場所にポストできます。 docs.google.com 原文: blogs.igalia.com tl;dr: Temporal のプロポーザルについてフィードバックを求めています。 Polyfill を試したら、サーベイの回答を送ってください、ただしまだ本番環境では使わないでもらいたいです。 JavaScript の Date クラスは壊れています、しかし Breaking the Web を起こさずに修正する方法はありません。風のうわさでは、 Date クラスは 10 日で作られた JS Engine のhackに含まれたもので、 java.util.Date に基づいたものと言われています。しかも java.uti
本当に倒すべきだったのは jQuery ではなくテンプレートエンジンだった - fsubal
そうはっきり言ったほうが良かった。いや言わなくても伝わる現場は良かったんだけど、伝わらないままごく一部だけをコンポーネントに移行、それ以外はただ生 DOM API に変えて終わり（あるいは他は jQuery のまま）みたいな「モダン化」で済ます余地を与えたのは発信の失敗だった……という10年代の振り返り。 テンプレートエンジンはなぜ倒された方が（…といって悪ければ、変わったほうが）良いのかは端的に指摘できて、それは初回レンダリングしか考慮してないからだということになる。 Web の UI には状態変化がつきもの（になったのは実は最近の話）だが、テンプレートエンジンは1回目のレンダリングだけを担当し、変化した後の2回目以降の見え方は JavaScript が担当するというパラダイムを構成する。
Javascriptにおける、Object.createと new の間のオブジェクト継承 - それマグで！
Javascript普通に書いてたら、DOMいじることが多く、ガッツリとオブジェクトを書くことが少ない。ちょっと再帰処理をやろうとおもったら、嵌まり込みそうになった。 最近のJavascriptにおける継承と制御についてまとめておいた。 昔からあるJavascriptのnew var Cat = function(name){ this.name = name; this.say = function(){ console.log("My name is "+this.name+" Nya Nyan") } } a_cat = new Cat("みー") a_cat.say() // => "My name is みー Nya Nyan" これは、昔からあるjavascript の書き方で、今でも動くし、これで十分なことが多い。 ここでは、 コンストラクタ関数の定義、new 演算子、プロパ
[JavaScript]初心者が初見で必ずthinking顔になるもの特集 - Qiita
初心者が見た瞬間になるもの特集です。 小テクだったり、省略記法だったり、、 実際私も出会ってになりました！ 追記 即時関数のところで説明にある 他には、+や-等でも動きます。 の"等"が気になった方に朗報です。こちらの記事で"等"を知ることができます！！ [JavaScript] "!function() {}()"以外の即時関数を紹介するぜ よろしければ覗いてみてください！ !! is 何 booleanへの型変換。 例 const obj = { hoge: "hoge" } function hasHoge() { return !!obj.hoge // => true } 論理否定（！）を二つ繋げて、boolean への型変換をしています。 !の結果を!で評価しているんですね〜。 JSON.parse(JSON.stringify(obj)) is 何 ディープコピー。 例
![[JavaScript]初心者が初見で必ずthinking顔になるもの特集 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/7f41f8fc8f5c58150b8766676dfe5b1c5bfeb140/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCSmF2YVNjcmlwdCU1RCVFNSU4OCU5RCVFNSVCRiU4MyVFOCU4MCU4NSVFMyU4MSU4QyVFNSU4OCU5RCVFOCVBNiU4QiVFMyU4MSVBNyVFNSVCRiU4NSVFMyU4MSU5QXRoaW5raW5nJUU5JUExJTk0JUUzJTgxJUFCJUUzJTgxJUFBJUUzJTgyJThCJUUzJTgyJTgyJUUzJTgxJUFFJUU3JTg5JUI5JUU5JTlCJTg2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz0zYmU5ODdjNjUyZjg2NDdkODA2NDVmN2QwNDI4NDhiNA%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBrb3p6enomdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWFhMTA4ZTQ0M2JiMmI1NTI2NDc2ZmQzNzI5YzQ0NDI3%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Da816bfb051a3a0d8f1e62c8fc6a915b0)
JavaScriptのnewって何？一体何なの？という話 - 愛と勇気と缶ビール
マクラ JavaScriptを使っている人なら知っていることだろうけど、JavaScriptはプロトタイプベースのオブジェクト指向を採用しているので「クラス」がない。オブジェクトしかない。 でも、組み込みの演算子としてnewがあって、それを使って var obj = new Object(); とか書けちゃう。クラスってものはJavaScriptにはないはずなのに、new ClassName();と書くとあたかもClassNameクラスのオブジェクトのインスタンスが生成され、それが返ってくるかのような挙動をしている。 これは気持ち悪い。言語仕様としてはクラスは本来存在しないのに、クラスのようなものが導入されている。まともな神経を持った人間なら、一体new演算子って何なの？という疑問を持つのが当たり前である。「{}はnew Object()のシンタックスシュガーです」とか言ってふんぞり返って
TypeScriptでknockout.jsを使う・その2～基本的な使い方～ - SourceChord
前回の手順で、knockout.jsをTypeScriptから使う準備ができました。 今回は、knockoutの機能を使って、様々なデータバインディングを行ってみたいと思います。 knockout.jsで中心となるクラス/メソッドなど knockout.jsで頻繁に使うクラスをXAML系言語と比較してみました。 以下の表のような対応関係になるかと思います。 knockout.jsとWPFの型/メソッドなどの比較 knockout.jsの型/メソッド WPFで似た役割のもの KnockoutObservalbe<T>型 BindableBase/NotificationObjectなどといった、INotifyPropertyChangedを実装する任意のクラス KnockoutObservableArray<T>型 ObservableCollection<T>型 KnockoutCompu
JavaScriptでクラスを実現する方法
JavaScriptはクラスをサポートしないため、ここで解説するのは正確な意味でのクラスとは異なります。 クラス定義 (functionキーワード) functionキーワードを用いて定義します。これは通常の関数を定義する構文と同一です。 // クラス (コンストラクタ) function Func() { // プロパティ this.x = 10; } このように定義したクラスは、new演算子でインスタンス化できます。 var func = new Func(); メソッド (prototypeプロパティ) クラスのprototypeプロパティに、関数リテラルの構文で定義します。ちなみにこのprototypeプロパティは、Objectクラスから継承されるものです。prototype - JavaScript | MDN function Func() {} Func.prototype.
JavaScriptのprototypeを勉強した。 - takanamitoのブログ
jsのprototypeの話 jsはクラスベースじゃなくてprototypeベースのオブジェクト指向だよ。 的なことは前から知ってて、いつかちゃんと勉強しようと思いながらずるずると伸びてた。 バイトでちゃんと勉強しろって指摘されたので、この機会に勉強してその結果をまとめてみる。 prototypeって？ jsでオブジェクトを生成した時に、生成されたオブジェクトの親になってるオブジェクト。 基本的に全てのオブジェクトはprototypeを継承する。 継承するprototypeは自分で選んだり、自分で作ることもできる。 利点 継承関係を作りやすい メモリを節約できる どういう時に使うか jsでクラスを作る時ってこんな感じでできる。 var Human = function (name){ this.name = name; this.say = function() { return ("My
現代フロントエンドに欠かせないwebpackとBabelを理解しよう
Transcript ݱϑϩϯτΤϯυʹ͔ܽͤͳ͍ XFCQBDLͱ#BCFMΛཧղ͠Α͏ʂ� CVJMEFSTDPO�UPLZP����� /BNF� ����4BLJUP�.VLBJ� 5XJUUFS ����!@@TBLJUP@@� $PNQBOZ� ����$ZCP[V�JOD� ����'SPOUFOE�&YQFSU�5FBN "CPVU�NF w#BCFMͷલʹݱࡏͷ+BWB4DSJQUʹ͍ͭͯ� w#BCFMʹ͍ͭͯ� wXFCQBDLʹ͍ͭͯ� wXFCQBDL #BCFMͰ෦࣮Λ͍ͬͯ͘ "HFOEB #BCFMͷલʹݱࡏͷ+BWB4DSJQUʹ͍ͭͯ &$."4DSJQUͱ5$�� w+BWB4DSJQUʹ&$."4DSJQUͱ͍͏ݴޠ༷͕͋Δ� w͜ͷݴޠ༷ΛܾΊ͍ͯΔҕһձ͕5$�� 5FDIOJDBM�$PNNJUUFF��� � w&4��
【2019年4月版】JavaScriptのconsoleがすごいことになってた。 - Qiita
JavaScript の console がすごいことになっているらしい。 本日、以下の記事を見つけました。 Getting creative with the Console API! この記事で紹介されている console のメソッド全然知らなかったのでビックリしましたが、実際にどう表示されるのか載っていなかったのでChromeのコンソールでスクショを取ってみました。 console.log() 本文によるとlogメソッド内のテキストリテラルは以下の書式で値のフォーマットと置換ができるそうです。 %o / %O - for objects; %d / %i - for integers; %s - for strings; %f - for floating-point numbers; マジすか・・・ そんなわけで以下のコード console.log("Object value:
JavaScript 今更の async / await - かもメモ
async function は Promose を返す returnすると返される値がPromise.resolveされる throwすると値や例外がPromise.rejectされる 何も返さないと関数終了時にundefinedがreturn(resolove)される // return = Promise.resolve() async function resolveFunc() { return 'this resolve'; } resolveFunc() .then((res) => console.log(res)) .catch((err)=> console.log(`ERROR ${err}`)); // => this resolve // throw = Promise.reject() async function rejectErrorFunc() { thr
React+jQuery+RailsのSPAをサーバサイドレンダリングに移行した件（その1：概要編） - ぱろっと・すたじお
先日、「チェンクロパーティーシミュレーター」（以下「ccps」）をアップデートしまして、 サーバサイドレンダリング（いわゆる「SSR」）に対応しましたヽ(`･ω･´)ノ ccpts.parrot-studio.com github.com 過去の経緯はこちらを見ていただきたいのですが・・・ parrot.hatenadiary.jp ・・・すでに「React+jQuery」で動いており、「TypeScript」で書かれたSPAでございます しかし、SPAであるがゆえに、大きな問題を抱えておりまして、 それは「とにかく初期表示が遅い」ということです(´-ω-) これを解決するのが「サーバサイドレンダリング（SSR）」なのですが、 いろいろ検索してみると、わりと否定的な意見が多くあります やってみた上で、私もどちらかといえば否定的なのですが、 要は「どこで使うべきものなのか？」が重要だと思うの
や...やっと理解できた！JavaScriptのプロトタイプチェーン - maeharinの日記
JavaScriptのプロトタイプチェーンについて理解しようとしたのだけど、prototypeとか__proto__とかごちゃごちゃになって、色んなブログを読んでもなかなか理解しきれなくて悶々としていたのだが、図を書いたらパッと理解できた！以下、情報ソースはなるべくECMAScript仕様書（3rd）を元にするようにして書きました なぜ分かりづらいのか？ そもそも、なぜJavaScriptのプロトタイプチェーンは自分にとってこうも分かりづらかったのだろうか？自分なりに分析してみると、まず、「似ているが違う用語が沢山ある」という点がある。ざっとあげただけでも、「prototypeと__proto__」「__proto__と[[Prototype]]」「FunctionとFunctionオブジェクト」などがある。そして次に、「入り組んだ構造が動的に変化する」という点がある。上記のように似たよう
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
