[B! js] bleu-bleutのブックマーク

RxJS入門 | 第1回 RxJSとは

RxJS入門第1回 RxJSとは RxJSは、リアクティブプログラミングという考え方のもとに構築されているライブラリです。﹁いつ起こるかわからない処理﹂の扱いを、一貫性を持って書くことができます。まずはコード例で、その感触をつかんでみてください。はじめに今シリーズではRxJSを紹介します。RxJSとは、端的にいうとJavaScriptでのイベントのハンドリングや非同期処理をラップし、扱いやすくするためのライブラリです。このライブラリは、もともと2009年にマイクロソフト社によってC#用に開発されたRx.NETというライブラリのJavaScript向けの移植で、他にもRxの名を冠するライブラリがさまざまな言語向けに移植されています。そのため、RxJSを学ぶと他の言語向けのRx利用者とも同じ土俵で会話ができるという、おもしろい背景を持っています。いつ起こるかわからない処理 Java

bleu-bleut 2021/12/14

パラダイムとしてのリアクティブプログラミングのためのライブラリ

リンク

window.location Cheatsheet | SamanthaMing.com

# window.location Cheatsheet Looking for a site's URL information, then the window.location object is for you! Use its properties to get information on the current page address or use its methods to do some page redirect or refresh 💫 https://www.samanthaming.com/tidb its/?filter=JS#2 window.location.origin → 'https://www.samanthaming.com' .protocol → 'https:' .host → 'www.samanthaming.com' .hostna

bleu-bleut 2020/05/17

リンク

JavaScriptとオブジェクト指向プログラミング | POSTD

本稿は、オブジェクト指向プログラミング︵OOP︶について予備知識のないJavaScriptの学習者向けに書かれています。OOP の中でJavaScriptに関連する部分にのみ焦点を当て、OOPの概要については説明しません。ポリモーフィズムについては、静的型付け言語の方が適しているため省きます。なぜOOPを知る必要があるか？あなたは初めてのプログラム言語にJavaScriptを選びましたか？　あなたはコードが10万行以上にわたる巨大企業のシステムを扱う腕利きの開発者になりたいですか？オブジェクト指向プログラミングを最大限活用できるように学ばなければ、到底無理でしょう。様々な考え方サッカーでは、安全に守りを固めることもできますし、サイドからの高いボールに飛びつくこともできます。また、先など考えずに攻撃することも可能です。これらの戦略は全て同じ目的を持っています。それは試合に勝つことで

bleu-bleut 2019/03/12

リンク

JavaScriptはなぜトレンドが毎年変わると思われていたのか - Qiita

JavaScriptはなぜトレンドが毎年変わると思われていたのか JavaScriptのエンジニャーは口を開くたびに出てくるツール名が違う、いつも環境設定をしている、みたいな話をよく聞きます。実際、それを揶揄するようなエントリーが人気だったりします。とはいえ、JavaScriptを実際に使い込んでいる人は別にそんなに大きな変化だと思っていない節があって、台風は外周部ほど風速が速い、みたいな印象を感じます。カンブリア紀のJavaScript ウェブサイトをパカパカ動かすための言語でした。DHTMLです。FireBugが出る前のJavaScriptを開発していた人類は、念力デバッグを駆使していました。あるいはalert()。三畳紀のJavaScript prototype.js、jQuery、Closure Compiler、YUI、mochikit、Ext.jsなどの時代。JavaSc

bleu-bleut 2017/02/16

台風は外周部ほど風速が早い。

リンク

一から始めるJavaScriptユニットテスト - Hatena Developer Blog

この記事は、はてなエンジニアアドベントカレンダー2016の5日目の記事です。こんにちは、はてなでアプリケーションエンジニアをしている id:shiba_yu36 です。先日、buildersconにおいて、現在所属しているプロジェクトでJavaScriptのユニットテストを導入した知見について、﹁一から始めるJavaScriptユニットテスト﹂というタイトルで発表しました。 speakerdeck.com この発表は、実際にJavaScriptのユニットテスト環境を作ってみると非常にハードルが高いと感じたので、そのハードルを少しでも下げられればという思いで、非常にシンプルな例で一から環境を作る例を紹介しました。アジェンダは次のとおりでした。カクヨムのJS環境JSのテストツールを整理する通常の関数のユニットテスト DOM操作する機能のユニットテストカクヨムのJS環境や、JSのテスト

bleu-bleut 2016/12/14

関数のテストとかDOM操作のテストとか。

リンク

JavaScript だけで EXIF を読む 2 – アカベコマイリ

先週、JavaScript だけで EXIF を読むという記事を書いたのだが、万里小路さんのコメントにより、サンプルとして公開していたスクリプトにバグがあることが判明した。具体的には、文字列値として埋め込まれているデータをそのまま読み込むため、NULL 文字などが入っていると文字化けが発生する。スクリプトの元ネタである Jacob Seidelin 氏のスクリプトでもこの部分の処理は一緒なので、同じ問題が起きると思う。問題の処理は binaryajax.js にあり、以下のように実装されている。 this.getStringAt = function( offset, length ) { var value = []; for( var i = offset, j = 0; i < offset + length; ++i, ++j ) { value[ j ] = String.f

bleu-bleut 2016/08/14

リンク

JavaScript だけで EXIF を読む – アカベコマイリ

bleu-bleut 2016/08/14

修正版が「JavaScriptだけでEXIFを読み込む2」

リンク

Webブラウザで高速な演算を可能にする低水準言語asm.jsと、WebAssembly詳解ーJavaScript が動く仕組み

Webブラウザで高速な演算を可能にする低水準言語asm.jsと、WebAssembly詳解ーJavaScript が動く仕組み清水智公︵Mozilla︶ Webブラウザの上で動作するアプリを書くための言語、といえば何が想起されるでしょうか。Flash、Sliverlight、Java、さまざまな言語が利用されてきましたが、やはり今のメインストリームはJavaScriptでしょう。 JavaScriptはさまざまな言語の特徴を併せ持つ動的言語で、Web技術の発展とAPIの整備の結果、Virtual Reality(VR)や画像認識、DAW(Desktop Audio Workstation)といった、少し前まではネイティブでの実装しかありえなかった種類のアプリケーションもWebブラウザをランタイムとするJavaScripで実装されるようになってきました。そのようなアプリの代表例がゲームで

bleu-bleut 2016/07/09

「asm.jsはJavaScriptのサブセットに低水準言語」「SpiderMonkey、Chakra、V8はインタプリタ」「webブラウザをランタイムとして動作するJavaScript」

Article
js

リンク

ssig33.com - JavaScript を最下段で読み込むのがあまり有効ではない理由

この辺主観も混ってくるところではあるんですが。 JavaScript を上の方で読み込んだ場合 JavaScript の読み込みが終わるまでレンダリングされない JavaScript を下の方で読み込んだ場合 JavaScript の読み込み前にレンダリングは終わるが、 JavaScript が読み込まれるまでウオッなんかスクロールガクガクする！！スクロールできねえ！！！みたいになりがちスクロールしなくてもコンテンツが表示されるようなサイトでは下で読み込むアプローチは有効でしょう。しかしながらユーザーがレイアウトを変えられるようなサイトだったり長文コンテンツが沢山出るような可能性が高いサイト︵具体的にははてなブログ︶などで﹁スクロールしないとコンテンツが出てこない可能性が十分に高い﹂場合はかえってユーザビリティを阻害する可能性があります。ユーザーは経験的に数秒待てばコンテンツが表示され

bleu-bleut 2016/05/16

スクロールしないとコンテンツが表示されないページではユーザビリティをかえって損なう。

リンク

TypeScriptを使った方がいいケースとは？ | POSTD

去年の夏、私たちは大量のコードベース︵18,000行以上のコード行数︶をJavaScriptからTypeScriptへと変更しました。この移行作業を通じて、両者の相違点や類似点について大いに学び、TypeScriptの優れたユースケースや、TypeScriptを使うべきではないケースなどについて考えてみました。型システムとは補助輪のようなものです。転倒防止してくれる代わりに、遅くなり、操作性が制限されます。 TypeScriptのユースケースコードサイズ ‥ソースコードが膨大である場合、また複数の人がプロジェクトに従事している場合、型システムは明らかなエラーを防ぐのに役立ちます。特に SPA の場合は当てはまります。誰かが変更したコードが他の人のコードを破損させてしまう可能性があるなら、何らかの安全機構を持つ方がいいでしょう。TypeScriptのトランスパイラは明白な誤りを

bleu-bleut 2016/04/22

型システムは大量のコードを大人数で処理するときにすこしは保守性が高くなるよ、、、で、TypeScriptとC#は同じ作者。 ●Article ●js

リンク

[JS]スマホ・タブレット・デスクトップ時代のクロスブラウザ対策にかなり役立つ便利なスクリプト -Feature.js

スマホ・タブレット・デスクトップのブラウザがさまざまな機能︵WebGL, Canvas, remunit, async属性、タッチイベントなど︶に対応しているか判別し、その判定を利用することができる超軽量︵1kb︶スクリプトを紹介します。 ModernizrはHTMLとCSSの機能で判別を行っていましたが、それを更に拡張した感じです。 Feature.js Feature.js -GitHub Feature.jsの特徴 Feature.jsの使い方 Feature.jsの特徴 Feature.jsは、ユーザーが利用するスマホ・タブレット・デスクトップのブラウザの機能を判別し、利用することができます。 WebGL, Canvasをはじめ、単位にremが使えるか、async属性は利用できるか、といった実用的なものが多数揃っています。また、いくつか補足事項があります。 touch タッチイベ

bleu-bleut 2016/01/13

リンク

JavaScriptのデバッグのコツと技 | POSTD

以前の記事で、 Webアプリケーションのデバッグの仕組みについて触れました。今回は実践的なJavaScriptのデバッグについて掘り下げていきたいと思います。ブラウザデベロッパツール私の個人的なお気に入りはChromeデベロッパツールです。SafariやFirefoxはChromeほどの高水準に達していません。しかし、徐々に改善されてきています。FirefoxにはFirebugと改良されたFirefoxデベロッパツールが組み合わされた機能が備わっています。もし、Firefoxチームがビルトインされているデベロッパツールの改良の中で素晴らしい仕事をし続けたとしたら、Firebugはいつか、すたれるかもしれません。個人的な好みにかかわらず、ターゲットとするあらゆるブラウザで、全てのコードのテストやデバッグができるようにすべきです。”あらゆるブラウザ”には、かの有名なInternetE

bleu-bleut 2015/09/06

行番号のブレークポイントの印を右クリックでブレークポイントを編集 /

リンク

JavaScript のイテレータを極める！ - Qiita

ECMAScript 6︵2015年6月に公開され、今もなお比較的新しい JavaScript︶の大目玉であるイテレータとジェネレータ。なかなかに複雑で巨大な仕組みになっていてややこしいです。そこで今回はイテレータを、順を追って理解できるように解説したいと思います。Qiita: JavaScript のイテレータを極める！︵この記事︶Qiita: JavaScript のジェネレータを極める！また、実用的なサンプルを﹁3. 実用サンプル﹂に示しました。初めにこちらを見て、何ができるのかを知ってから読み始めるのもオススメです。︵2017年3月現在、オープンなページでの使用はまだ避けたほうがいいかもしれませんが、実装は確実に進んでいます。ECMAScript 6 compatibility table︶ 1. ことばの定義 1.1. イテレータ (Iterator

bleu-bleut 2015/08/24

var itr = obj[Symbol.iterator]();

リンク

JavaScript のジェネレータを極める！ - Qiita

ECMAScript 6︵2015年6月に公開され、今もなお比較的新しい JavaScript︶の大目玉であるイテレータとジェネレータ。なかなかに複雑で巨大な仕組みになっていてややこしいです。そこで今回はジェネレータを、順を追って理解できるように解説したいと思います。Qiita: JavaScript のイテレータを極める！ ←こちらから読むのがオススメですQiita: JavaScript のジェネレータを極める！︵この記事︶また、実用的なサンプルを﹁3. 実用サンプル﹂に示しました。初めにこちらを見て、何ができるのかを知ってから読み始めるのもオススメです。︵2017年3月現在、オープンなページでの使用はまだ避けたほうがいいかもしれませんが、実装は確実に進んでいます。ECMAScript 6 compatibility table︶ 1. ジェネレータ、ジェ

bleu-bleut 2015/08/24

function*って一体なんだ？

リンク

優秀なJavaScriptの開発者になるための5か条 | POSTD

(注記‥7/15、いただいた翻訳フィードバックを元に記事を修正いたしました。) 子供の頃、私の興味は互いに関係性のない様々な分野に及んでいました。数学も歴史も大好きでした。ルネッサンスマン、つまり博学者と言う、複数の分野に秀でた人になりたいと思っていました。これはとても難しい課題で、私は突如として、器用貧乏な人になってしまう危機に直面したのです。私は特定の分野に特化しなくては、と考え始めました。そうすればたとえルネッサンスマンにはなれなくても、少なくとも、器用貧乏にならなくても済むと思ったのです。どうしたらソフトウェア開発をするのに必要な広い知識を保ちながら、1つの分野で専門性を高めることができるのでしょうか。この記事では、過去5年間、私が良いJavaScript開発者になるために使ったテクニックとリソースの概要をお伝えしようと思います。最近の多くのWeb開発者は、ある共通の

bleu-bleut 2015/07/16

本を読む、ライブラリに学ぶ、言語を学ぶ、標準規格を学ぶ、良質なWEBのリソースに学ぶ。 ●Article ●js ●programming

リンク

JavaScriptでDOMに挑戦：初心者のためのJavaScript入門（7） - ＠IT

HTMLをドキュメントオブジェクトとして扱うための約束事「DOM」を、JavaScriptを通して使うことで、HTMLの好きな部分を読み書きすることができます。連載の前回、「第6回配列とオブジェクトでデータをまとめる」では、配列とオブジェクトの基本的な扱い方を説明しました。扱うデータの量が少ないうちは、普通の変数だけでなんとかなってしまいますが、データの量が増えれば増えるほど、配列やオブジェクトのありがたみが分かります。特に、配列に入れたデータを、ループで一気に処理する快感が分かるようになれば、初心者卒業といってもいいでしょう。それでは、前回の課題の答え合わせをしてみましょう。平均点の求め方は、配列のサンプルでやっていたので簡単すぎたでしょうか。解答サンプルでは、成績の一覧と平均点を同時に表示するようにしてみました。 <html> <body> <script type="text

bleu-bleut 2015/07/10

ページ2にページの画像を回転させるブックマークレット。

リンク

TechCrunch | Startup and Technology News

Boeing’s Starliner spacecraft has successfully delivered two astronauts to the International Space Station, a key milestone in the aerospace giant’s quest to certify the capsule for regular crewed missions. Starliner…

bleu-bleut 2015/06/21

JSを補完するMSのTypeScriptやMozillaのasm.jsがWebAssemblyとしてまとまるプロジェクト。C、C++からコンパイルしてJavaScriptエンジンで動作可能。

Article
js

リンク

JavaScriptが20周年。開発者のBrendan Eich氏が過去と未来についてのスライドを公開

JavaScriptが20周年。開発者のBrendan Eich氏が過去と未来についてのスライドを公開今月、2015年5月はJavaScriptが登場してからちょうど20年にあたります。20年前にJavaScriptを開発し、現在Mozillaに所属するBrendan Eich︵ブレンダン・アイク︶氏が、JavaScriptの過去を振り返り、未来について触れているスライドを公開しました。このスライドの公開を知らせるBrendan Eich氏のツイートには﹁#modernweb2015﹂のタグが付いています。 JavaScript at 20 - http://t.co/CPXEnl5Dcp #modernweb2015 — BrendanEich (@BrendanEich) 2015, 5月15このタグは2015年5月15日に台湾の中央研究院人文社會科學館が開催したイベント﹁Mo

bleu-bleut 2015/05/21

Article
js

リンク

es6 - arrow function の引数は括弧で囲っておいた方が良さそうな件 - Qiita

ES6 クイズの答え ES6 クイズは、俺自身が﹁いずれ引っかかりそうだな﹂と思ったもの。﹁そう見えるのは俺だけかも。。﹂と思って何人かにクイズとして出してみたら、意外と引っかかったので俺だけじゃなさそうと思って書いた。クイズ1 var a = 1; if (a =>2) { console.log('bigger'); } else { console.log('smaller') }; // bigger

bleu-bleut 2015/05/10

（function式）var a1=a.map(function(s){return s.length;}); （アロー関数式）var b1=b.map(s=>s.length); 参照:MDNアロー関数

Article
js

リンク

スマホの傾きでページスクロール出来るようにする「Interdimensional」:phpspot開発日誌

Interdimensional スマホの傾きでページスクロール出来るようにする「Interdimensional」こちらのライブラリを実装すれば、スマホを傾ければコンテンツをスクロールさせることができ、指を使わない面白いUIが実装できそう。関連エントリページスクロールに応じて要素を様々にCSSアニメーションしつつ表示できる「Story Box」スクロールを上に移動でバー表示ができるjQueryプラグイン「scroll-up-bar」スクロールに応じて奥行きのある3Dアニメーション表現ができる「Space.js」ブロック要素の下部をスクロールに応じ曲げてカッコよくするサンプル「Curved Cut」

bleu-bleut 2015/05/02

リンク

はてなブックマーク

タグ

関連タグで絞り込む (96)

jsに関するbleu-bleutのブックマーク (308)

お知らせ

今週のはてなブックマーク数ランキング（2024年7月第2週）

はてなブックマーク透明性レポート（2024年 2月-2024年4月）

今週のはてなブックマーク数ランキング（2024年7月第1週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス