WebGPUがついに利用可能に - WebGL以上の高速な描画と、計算処理への可能性 - ICS MEDIA
2023年5月にリリースされたGoogle Chrome 113で、次世代WebグラフィックスのJavaScript APIであるWebGPU（ウェブジーピーユー）がデフォルトで利用できるようになりました。ICS MEDIAでは2018年にWebGPUについて紹介していましたが、当時はSafariで開発者向けのフラグを有効にした場合にのみお試しできる実験的機能でした。 デスクトップChrome限定ではありますが、WebGPUが一般ユーザーの環境でも動作できるようになったいま、オリジナルのデモを交えてあらためてWebGPUを紹介します。 この記事で紹介すること WebGPUがChrome 113で標準で利用可能になった WebGPUはモダンな3D APIに直接アクセスすることで、WebGLより高い性能が得られる WebGPUだとドローコールの最適化をしなくても十分に高速 WebGPUはコンピ
TypeScript Deep DiveでTypeScriptに入門する | DevelopersIO
TypeScript Deep Dive とは TypeScript Deep Diveとは、TypeScriptはもちろん、JavaScript（ES6）/ サーバーサイドJavaScript（Node.js）/ Reactなどで使うJSX など、TypeScript周辺技術を包括的に学ぶことができるTypeScriptの入門サイトです。 TypeScript Deep Dive TypeScript Deep Dive 日本語版 GitHub TypeScript Deep Dive 日本語版 TypeScript環境構築 TypeScript Deep Diveで勉強を始めるための、環境構築を行なっていきます。 環境 項目 バージョン 1. Node.jsのインストール HomeBrewを使って、nodebrewをインストールします。 $ brew install nodebrew
WSH JScript Chakra を使用した ES2015(ES6) 対応 （ スクリプトエンジン まとめ ） - イネマルのプログラミング備忘録
はじめに WSH JScript (wscript cscript) で使用できる スクリプトエンジン まとめです。 JavaScript限定、プリインストールされている物だけなので注意。 ツールとして独立しているChakraCoreや、その他サードパーティーは含みません。 各 JavaScript エンジン について JScript (JavaScript) だけでも、4種類ほどスクリプトエンジンがあるようです。 以下、それぞれバッチファイルから cscript で実行する際のサンプルコマンドです。 JScript JScript を使用する際、一般的に指定されるスクリプトエンジンです。 バージョンは、環境によって異なりますが、 現時点のOSサポートを考慮すれば、5.7 か 5.8 でしょう。 rem jscript.dll %windir%\System32\cscript.exe /
ES2015(ES6)な時代だからこそ、ES5を改めて調べたJavaScript初級者のメモ - Qiita
はじめに ECMAScript2015(第6版、通称ES6)が承認され、Babelも登場し、世はまさにES2015時代。なのだけど、JavaScript初級者としてはES5自体をちゃんと把握していなかったりするので、今さらながら調べてみることにした。 間違っている所があれば、ご指摘いただけると大変助かります。 ECMAScript5で追加されたもの ECMAScript5 compatibility tableにて、ES5で追加された機能がどのブラウザに対応しているかが分かる。また、es5-shimというライブラリが、古いブラウザでES5の一部の機能が実装可能になる。 基本的には、IE9以上／iOS7以上、それ以外はモダンなブラウザであれば大抵対応している。 use strict スクリプトの先頭、もしくは関数内の先頭に記載することでstrict modeで実行される。自分が書いているもの
WindowsでExcelをいじるコードを書く最適解 - Qiita
WindowsでExcelをいじくり倒すコードを書く最適解を探す旅路 複数エクセルの大量データをプログラムでいじくる。 要件 WindowsでExcelはじめとする様々な操作を行いたい。 Excelで数百-数千行の配列をいくつも扱いたい windowsで、exeとしてまとまった形で実行したい GUIがほしい 実行中にその動作を監視したいが、プロセスがとられて動かなくなるのはもちろん嫌だ。 要するにExcelなどのコントロールを行いながら、 「ぱっとみ普通のアプリケーションにしたい」 という要件を叶えるためにgoogleさんにお世話になりまくったが、どこにも最適解だと思われるものは載っておらず、大変だったのでメモっておく。 僕のやり方が本当に最適解か、というのはわからないけど、こういったテキストで助かる人がいればと思い、せめて。 解法1 VBA VBAとはExcelに付属のマクロで、Visu
マンガで分かる JavaScriptプログラミング講座
はじめに 「マンガでわかるJavaScript」は、難しそうに思えるプログラムを、簡単そうに見えるマンガで解説するという初心者向けの入門講座です。 架空の高校生たちに教える形式で、プログラムの基礎から応用を、解説していきます。一通りのマンガを読めば、かなり実践的なところまで、プログラムを書けるようにしていきます。 （マンガは、左上から右下へと読みます） プログラムというと、けっこう大変そうに思えますが、この講座のテーマは「面倒くさいことを楽にする」です。面倒臭がりで、手抜き大好きの女子高生を主人公にして、楽しくプログラムを学んでいくことにします。 主な対象読者は「これからプログラムを学んでみたい人」「Webの世界に関わっていてJavaScriptを学んでみたい人」「昔JavaScriptを触っていたけど最新のトレンドが分からないので改めて学んでみたい人」などです。初心者だけでなく、Webデ
TypeScript再入門 ― 「がんばらないTypeScript」で、JavaScriptを“柔らかい”静的型付き言語に｜ハイクラス転職・求人情報サイト AMBI（アンビ）
TypeScript再入門 ― 「がんばらないTypeScript」で、JavaScriptを“柔らかい”静的型付き言語に JavaScriptプロジェクトでTypeScriptを導入する際には、“柔らかい”静的型付き言語とするのがおすすめです。藤吾郎（gfx）さんがまとめた「がんばらないTypeScript」のガイドラインです。 TypeScriptは、すべてのJavaScriptプロジェクトで採用する価値のある技術です。TypeScriptとこれに対応したエディタを導入することで、補完や型ベースの整合性のチェックにより、すべてのプロジェクトで生産性が上がります。またリファクタリングも容易になるので、長期あるいは大規模なプロジェクトでも品質を保ちやすくなります。 この記事では、TypeScriptについて最低限の知識とともに、サクッと（どちらかというと既存のプロジェクトに）導入するための
Promiseとasync-awaitの例外処理を完全に理解しよう - Qiita
はじめに JavaScriptは非同期処理との闘いです。 人類が非同期処理を倒すために、Promiseやasync-awaitという最終兵器を生み出して、劇的にクリーンで平和な世界が生まれたという話は以前しました => (もしかして： JavaScriptは如何にしてAsync/Awaitを獲得したのか Qiita版) しかあぁし！！！ 甘い、甘いのですよ！！！！！ 人類を苦しめ続ける非同期処理が、そんな簡単に完全に倒せるわけがないのですよ。 非同期処理の本当にヤバイ深淵、それが「例外処理」です。 みなさんはPromiseで開発していて、 「なんか途中までうまく行ってたんだけど気づいたら例外が外側に飛ばなくなった…なんでだ…」 「助けて！Promiseにcatch書いてるのに何故か例外がcatch出来ないの！！！」 という経験はないでしょうか。私は何度もあります。 この記事では、具体的に何
爆速でわかるjQuery.Deferred超入門
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog Yahoo!デベロッパーネットワークの中野(@Hiraku)です。これまで、JavaScriptで非同期処理を書く上での問題として、コールバック地獄やエラー処理に例外が使えないことなどを解説してきました。 これらの問題に対処するライブラリの1つであるjQuery.Deferredに関して、もう少し丁寧に解説いたします。なお、jQueryのバージョンは記事執筆時点の最新である、1.9.1を想定しています。 jQuery.Deferredとは jQuery.DeferredとはjQueryのバージョン1.5から導入された、非同期処理をうまく扱うための標準モジュールです。使いこなすことで、以下のような効果が見込めます。 非同期処理を連結
hifive - HTML5企業Webシステムのための開発プラットフォーム
サーバーとの通信、HTML5のAPIを使ったアプリケーションの開発に必要不可欠な「非同期処理」について学びましょう。 非同期処理とは背景処理の「非同期」化サーバーとの通信を例に考えてみようPromiseパターン基本的な考え方コードの基本形(1)呼び出した関数がPromiseパターンに従っている場合(2)自分で作成する関数でPromiseパターンを利用したい場合非同期処理の「失敗」の扱い方(1)呼び出した関数の失敗通知を受け取る(2)自分が作成する非同期処理関数で失敗を通知する複数の非同期処理をつなげて順番に行う複数の非同期処理を並列に実行して、全てが完了したら最終処理を行う非同期処理とは背景Webブラウザは基本的に、JavaScriptコードを実行するとき、コードを上から順に1行ずつ実行します。 また、関数を呼び出すと、その関数の実行が終了するまで（return文によって呼び出し元の関数に
JavaScriptで将棋盤 まとめ - 56将棋開発ブログ
どうも、ただのあほです。 JavaScriptで将棋盤ですが、成／不成の選択ウインドウを変更しました。 このウインドウのどちらかの駒の画像をクリックすると、 成／不成を選択することができます。 YouTubeに動画をアップしてみたのでごらんください。 プログラミング初心者がJavaScriptで将棋盤をつくってみた その２ - YouTube ソースコードですが、ちょっと長いので記事の最後に貼っておきます。 これでひとまず、ただ動かせるだけの将棋盤は完成です。 （まだマイナーチェンジはするかもしれませんが） なんとなくまとめ記事っぽく、最初から振り返ってみましょう。 感謝の意味をこめて、何度でもリンクを貼りますが、 将棋盤をつくる前に最初にみたのがこの動画でした。 しかし、HTMLってなんですか？というレベルだったので、さっぱり理解できません。 とりあえずHTMLの基礎の基礎を学習し、つく
JavaScriptのクロージャは内部でどう機能するのか | POSTD
もうだいぶ前からすでに私はクロージャを使っています。使い方を学びましたが、実際にクロージャがどう機能するのか、また、使うと隠れたところで実際に何が起きるのかを明確に理解しているとは言えませんでした。そもそも、クロージャとは一体何なのでしょうか。 ウィキペディア はあまり役に立ちません。クロージャはいつ生成され、いつ削除されるのでしょうか。どのように実装されるべきなのでしょうか。 "use strict"; var myClosure = (function outerFunction() { var hidden = 1; return { inc: function innerFunction() { return hidden++; } }; }()); myClosure.inc(); // returns 1 myClosure.inc(); // returns 2 myClos
Reactive Programming in JavaScript
- + 最近の小学校では、「お父さん・お母さんの名前をグーグルで検索してみましょう」という、世にも恐ろしい授業があるらしい。・・・。 — 丹 洋介 (@yosuke_tan) January 25, 2015
ECMAScript7を見据えた、JavaScript(TypeScript)で使えるFRPライブラリの比較調査 - Qiita
各ライブラリの特徴 RxJS RxJSはC#発祥のReactive Extensionsのjs移植。基本的に他言語でも統一された仕様に従っている。 RxJS = Observables + Operators + Scheduler ということになっている。 ObservableにはHotとColdという注意すべき特性があり、とくに型で区別している訳でもなく、メソッドで判別しなければいけないので難しい。 Rxからほとんどのメソッドを導入しているので、メソッドが非常に多いが、機能の少ないlite版もある。 Bacon.js Bacon.jsはRxJSが非オープンソースでドキュメントが少ない時代に作られ始めたらしい。（reactive-baconが前身っぽい） 設計思想的にはRxJSより一貫性があるとされる。 RxJSのHot, Coldという特性の違いが気に入らず、Coldを廃したような挙動
React.jsについてのリソース、そして締め - Qiita
メリークリスマス！ いよいよ最終日です！ ここまでReact.jsについて紹介してきましたが少しでも参考になって使ってみようと思ってもらえると幸いです。 React.jsはfacebook、instagramやGitHubのAtomEditorもちろん、↓を見てもらえればわかる通り「AirBnB」、「Atlassian」、「Netflix」、「Reddit」、「The New York Times」、「Yahoo」など多くのところで使われているようです。 また、来年の1月後半にはReact.js Confがあるので色々な知見が出てますます盛り上がっていくと思うので来年も楽しみです！ React.jsについての情報は、公式のブログでも色々紹介されますし、#reactjsのハッシュタグ追ってると色々情報集めることが出来ます。 このAdvent Calendar読んで興味を持ったら是非↓のリンク
小さく始める isomorphic module pattern - Qiita
せっかく window や node/io の標準モジュールに依存していないロジックであれば、 ブラウザでも node/io で動くようにしておくと色々嬉しい。が軽視されている感がある。 俗に isomorphic な JavaScript と呼ばれている。 それを npm と bower で公開するのであれば、問題はモジュールシステムだ。 最小の isomorphic module pattern 一番シンプルで負荷の少ない方法。 まず、ライブラリを以下のように書く。 // lib.js function Lib() { // 変数は外に出さない } Lib.prototype.foo = function(){ return "foo"; }; this.Lib = Lib; // point
小さく始める JavaScript のテスト - Qiita
書かないと怒られるし、書きたいとは思っているが、書くまでの敷居がやたらと高くなってしまった気がしている人へ。 最小のテスト 本質的にテストを書くのにフレームワークはいらない。 assertion だけあればいい。 isomorphic にしたいなら、 node の assert モジュールすら使わず console.assert だけで書ける。 // assert function assert(actual, expected) { console.log('.'); console.assert(actual === expected, '\nact: ' + actual + '\nexp: ' + expected); } function TestSum() { assert(1+2, 3); } // exec TestSum(); あとは普通にこのスクリプトを node/io
【個人メモ】React Tutorialをちょこっとやってみた - Qiita
Reactが最近騒がれてるので、 よくわからないからReactjs tutorialを少しこなしてみた。 Reactとは ぐぐるとmizchiさんのブログエントリが出てくる。 Facebook製リアクティブプログラミングライブラリ React を試してみた + 感想 VirtualDOMという技術を使っているようだ。 [JavaScript] 仮想DOMを提供する『React』について少し調べてみた VirutalDOMだけ切り出した成果物も存在する。 https://github.com/Matt-Esch/virtual-dom Virtual DOMのアルゴリズムが知りたくてvirtual-domのコードを読んだ話 react-toolsのインストール React、type=“text/jsx” なコンテンツについてXHRで取りに行くようだ。 Chromeで開発することが多い、という
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The Mandelbrot Set in HTML5 Canvas & JavaScript
JavaScript Promiseの本
