これは何？ javascript の async/await を使いこなすために必要な事柄について、私なりに説明したものです。 書いてあること ステップ１）await 使えば待ってくれる 必要最小限の async/await、及び、エラーの catch の話 ステップ２）promise というもの promise の中には「正常データ = resolve」と「エラー = reject」のいずれかを保管できるという話 どうすれば、promise から、正常データ(resolve)を取り出せるか？ どうすれば、promise から、エラー(reject)を取り出せるか？ Promise.all の話 ステップ３）promiseを作る方法 callbackスタイルの関数を、promiseスタイルとして使う方法 setTimeout() を promiseスタイルにする async で promi

Angular2を使っていればjQueryを使う必要はほぼありません。 でももしかしたら業務上しかたなく過去の遺産であるjQueryPluginを使うかもしれません。 そんな時のために簡単にAngular2とjQueryを共存させる方法をまとめておきます。 jQueryの読み込みはimportでもいいし、下記のようにhtmlにscriptタグを貼ってでも大丈夫です。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 次にjQueryの型定義ファイルをnpmでインストールします。 npm install --save @types/jquery よくわからない人は使いたいcomponent.tsの1番上に下記のアンビエント宣言を入れておいてください。 declare

［CSS］jquery.cluetip.css ［JS］jquery.js v1.2.6、jquery.dimensions.js、jquery.hoverIntent.js、jquery.cluetip.js HEAD <!-- JS --> <script src="jquery-1.2.6.min.js" type="text/javascript" charset="utf-8"></script> <script src="jquery.dimensions.js" type="text/javascript"></script> <script src="jquery.hoverIntent.js" type="text/javascript"></script> <!-- optional --> <script src="jquery.cluetip.js" type="t

風邪ひいてたりなんだりで全然ブログ更新してませんでしたー。っと。 Angular2とASP.NET MVC"4"をお仕事でいじることになりました。 Angular2 + VisualStudio(ASP.NET MVC"4") + VisualBasic.net ニッチすぎて参考文献が少なく、VS上で動かすまでに色々と面倒くさかったのでメモ残します。 使用環境 VisualStudio2015(Update2) TypeScript(1.8.29.0) 先に参考 www.mithunvp.com dotnetspeak.com Angular2 with TypeScript using Visual Studio 2015 - CodeProject Angular2 Typescript in ASP.NET MVC Visual Studio 2015 – Russell Canfi

-- この記事は2016/11/22(Tue)現在の情報に基づいています -- この記事をざっくり言うと ASP.NET MVC プロジェクト上に webpack を使った Angular 2 の ビルド環境を構築する ビルドの実行は NPM Task runner を使うといい という話です。 準備する環境 Visual Studio 2015 Update 3 Node.js v6.9.1 npm v3.10.8 ASP.NET MVC 5 プロジェクト NPM Task runner NPM Task runner は npm-scripts(package.json の scripts に記述されたコマンド)を Visual Studio 2015 上で実行できる拡張機能です。いちいちコマンドを手入力する必要がなく、マウス操作のみで実行できます。 さらに、プロジェクトを開いたタイミ

HTML、CSSの勉強法を以前書きました。 www.yukihy.com この記事を書いたあと、jQueryに挑戦をして、まだまだ完璧ではないものの実際にこのはてなブログを通して、いろんなブログパーツのようなものを作ることができました。 そこで、jQueryを勉強するとき、効率良く身につけられる方法を書いていきたいと思います。 僕自身いろんな本やツールに手を出しながら進めてきたので、実際に下の通りに行ったわけではありませんが、もう一度勉強しなおすとしたらこういったようにやるなといった感じです。 それではレッツゴー！ jQueryを身につけるための最短ステップ ステップ１　Progateで手を動かしながら学ぶ ステップ２　平行してWebデザインレシピの記事を読む ステップ３　ドットインストールで総復習&補完 ステップ４　書籍を参考に実際に作ってみる 作りながら学ぶjQueryデザインの教科書

バッチのまとめTOPへ WSHでプログラムの「再利用」をしたい場合，下記の３つの方法がある。 単にコピペする。　　←面倒 文字列として読み込んで eval() する。　　←制限がある※後述 WSF形式にする。　　←これがベスト ※後述 WSHと同じくWSF（Windows Script File）形式のバッチも，ダブルクリックするだけで実行できる。 しかし，なぜ eval() を使う方法ではだめなのか。 バッチをライブラリ化したい 自分が作った .js ファイルを，次からWSHのライブラリとして使い回せたら便利だ。 JScript.NET だったら import で名前空間を作れるのだが，WSHにはそういった文が無い。 JScript.NET　名前空間とライブラリ http://homepage3.nifty.com/aya_js/JSc... このため，「外部の js ファイルを文字列と

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

(English article is here.) こんにちは、吉岡([twitter:@yoshiokatsuneo])です。 ウェブ開発に欠かせないJavaScriptフレームワークですが、日々発展しておりReact.js, Ractive.js, Aurelia.js, AngularJS2.0など次々と新しいフレームワークが出てきています。 一体どれを使えばいいのか？何が違うのか？何から調べていいのか迷うことがあります。 そこで、現時点で事実上全てとなる、９大主要フレームワークについて、実際に使ってみて比較を行います。 Backbone.js Ember.js Knockout.js AngularJS(1.x) React.js Ractive.js vue.js Aurelia.js AngularJS2.0(アルファ版) これらのフレームワークでは、以下のような機能が実現さ

概要 待ち焦がれた人も多いことだろう。ES2015の一番の目玉機能とも言えるクラス構文が、ついにV8でサポートされた。 Class構文は、『関数（コンストラクタ）定義』＋『.prototypeへのメソッド定義』の糖衣構文である。 JSで今まで様々に工夫されてきたクラスの書き方を、綺麗に統一してくれる可能性を秘めている。 クラスを作る 従来、Catクラスを作ろうとした場合このように書いてきた。 function Cat(name) { this.name = name } Cat.prototype.meow = function () { alert( this.name + 'はミャオと鳴きました' ) } しかしこの書き方だとどうしても、コンストラクタとメソッドの定義が分離されているため、クラスとしてまとまりがなく分かりづらく感じる。 メソッドが増えてきた時も、Cat.prototyp

映画「マトリックス」の非常に有名な上から漢字やらカタカナやら平仮名やらが滝のようにぞろぞろ流れ落ちてくるあの超有名なシーンを1KB以下のコードで完全再現したものが「Matrix Canvas Code」です。 Matrix Canvas Code | CSSDeck http://cssdeck.com/labs/the-matrix 元となっているのはシーンは以下のような感じでマトリックス3部作の最初のイントロで上から滝のように流れ落ちてくるのが印象的なものとなっており、実際には縦書きの裏返った半角カナや注音符号なども出てきます。このような妙な文字が混じっている理由は、「日本のPCでは縦書きでプログラミングしている」と監督が誰かから吹き込まれたため。 Intro Matrix Reloaded - YouTube matrix intro - YouTube [HD] The Matri

JavaScriptのプロトタイプチェーンについて理解しようとしたのだけど、prototypeとか__proto__とかごちゃごちゃになって、色んなブログを読んでもなかなか理解しきれなくて悶々としていたのだが、図を書いたらパッと理解できた！以下、情報ソースはなるべくECMAScript仕様書（3rd）を元にするようにして書きました なぜ分かりづらいのか？ そもそも、なぜJavaScriptのプロトタイプチェーンは自分にとってこうも分かりづらかったのだろうか？自分なりに分析してみると、まず、「似ているが違う用語が沢山ある」という点がある。ざっとあげただけでも、「prototypeと__proto__」「__proto__と[[Prototype]]」「FunctionとFunctionオブジェクト」などがある。そして次に、「入り組んだ構造が動的に変化する」という点がある。上記のように似たよう

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

フォームから別ウィンドウを開くためのTipsをまとめました。 １．はじめに フォームから別ウィンドウを開く場合、 別ウィンドウで起動されるCGIにフォームデータを渡したい フォームボタンを複数回クリックしたときに別ウィンドウを1枚しか開きたくない フォームボタンを複数回クリックしたときに別ウィンドウを複数枚開けるようにしたい と、色々なケースがあります。 業務で使うCGIを開発するときにこれらのことをネットで色々調べたのですが、FAQサイトなどに個別の情報が散在しているだけでしたので、このエントリーで一挙にまとめてみました。 ここではjQueryを使わないオーソドックスなコードで解説します。コード内に使われているCGI（new_window.cgi）は６項に掲載しています。サンプルを実行する場合、すべての資材を同じディレクトリに配置して実行してください。 ２．基本動作 フォームから別ウィン

http://d.hatena.ne.jp/babydaemons/20080520/1211278047 でファイルをアップロードするときにenctypeに"multipart/form-data"を指定することを書いたが、逆にアップロードしない場合はクラシックASPのRequest.Formでフォームの情報が読めなくなるので、"multipart/form-data"をenctypeに指定できない。 では、アップロードするときにのみenctypeを再設定するようにすれば良いはずだが、IEでは再設定されていないような振る舞いだった。 function upload() { var myForm = document.getElementById("myForm"); myForm.enctype = "multipart/form-data"; // これで良いはずなんだけど… myFo

なぜ「速い」のか、について JSX 開発者の立場から。 たとえば、シューティングゲームで一番重たい処理は何か。言うまでもなく衝突判定。多数の弾や敵機の衝突判定を毎フレームごとに行う必要があり、この演算が重たい。 JSX に同梱されている web/example/shooting.jsx には衝突判定のコードが複数あるが、一番重たいのは Bullet#update 関数で、その処理は以下のようになっている*1。 for (var rockKey in st.rocks) { var rock = st.rocks[rockKey]; if (this.detectCollision(rock)) { if (rock.hp == 0) return false; inDisplay = false; if (--rock.hp == 0) { st.score = Math.min(st.s