JavaScript で then を使うのは避けよう（await / async の初級者まとめ）
JavaScript において、特に苦手とする人が多い印象のある Promise ですが、await と async の文法が導入されたことで、Promise の仕様を深く理解しなくても非同期処理を自然に書けるようになってきたのではないかと思います。 極論ですが、JavaScript の非同期処理は async await new Promise のみで、（ほぼ）全て表現可能です。特別な理由がない限り then を使わないようにしましょう、ということを周知するのがこの記事の目的です。 なお本記事では Promise の rejected の状態についてほとんど解説しておりません。基本を理解したら、別記事でぜひ学んでみてください。 Promise とは？ Promise は、少し乱暴に説明すると「実行が終わっていないかもしれない何らかの関数」を包んだオブジェクトです。 普通の関数とは違って、
setTimeout を完璧に理解する
setTimeout は、指定された時間以降に指定されたコードを実行する JavaScript の API です。ブラウザでも Node.js でも広く使われているのですが、実装はまちまちで、色々と特殊な条件も多く、挙動を完璧に理解している人は少ないと思います。この記事では、そんな setTimeout を可能な限り深堀りしてみようと思います。 先に書いておきますが、ものすごくニッチで細かい話ばかり並びます。突然私が、ただ純粋に setTimeout について調べたくなったので、その結果をまとめただけのものです。普通に開発している人には必要のない情報が多くなるでしょう。この記事は基礎から setTimeout を学ぼう、という方には全然向かないと思います。 また、JavaScript のイベントループについてある程度理解していることを前提とします。その詳しい理解には、@PADAone さん
YouTube チャンネル「ニコニコプログラミング」を開設しました
Twitter では告知しましたが、ちょうど 1 ヶ月前の 7 月 1 日に、YouTube チャンネル「ニコニコプログラミング」を開設しました。まさかの YouTuber デビューです。 Description のところにも書いているように プログラミングの楽しさを伝えるために、プログラミングにまつわる様々なことをしています。短い時間でプログラミングの実況をしながらゲームを作り上げる実況プログラミングシリーズをメインに展開していきます。 というチャンネルです。 2009年「テトリスを1時間強で作ってみた」を発表 私は昔から、気まぐれに動画投稿をしております。例えば YouTube に「Prince of Persia(PC9801) within 10 minutes」という RTA 作品（ゲームクリアのタイムアタック、この作品はエミュレータですが）を上げて 53 万再生されていたり、ニ
document.all の例外仕様を知っていますか
昨日、ツイッターで次のような JavaScript クイズを出しました。 久しぶりの JavaScript クイズ！ function hello(x) { if(typeof x === 'undefined') { alert(x.f()); } } この hello 関数で "Hello, World!" のアラートを表示させることが出来るか？ — Takuo Kihira (@tkihira) July 31, 2022 このブログ記事では、この問題について解説します。 解答 答えは「出来る」です。出題者の意図としては document.all を想定しておりました。 document.all は、ブラウザに存在する、非常に特殊なオブジェクトです。 document.all 自体は object 型である。console.log(document.all) とすると内容が確認出来る
正規表現の脆弱性 (ReDoS) を JavaScript で学ぶ
先日、このようなツイートを書いたところ、かなりの反響がありました。 JavaScript の正規表現の脆弱性の例でいうと、例えば /\s+$/ は脆弱性があると言える console.time(); /\s+$/.test(" ".repeat(65536) + "a"); console.timeEnd(); 結構時間がかかるのがわかる。でも /\s+$/ を見て「これは危険だな」と理解出来る人はそんなにいない。JavaScript に限らないけれど。 — Takuo Kihira (@tkihira) February 17, 2022 これは一般に ReDoS (Regular expression Denial of Service) と呼ばれる脆弱性です。正確に理解するのが難しい脆弱性なので、少し解説してみたいと思います。 結論 長い記事になるので、最初に「とりあえずこれだけ知っ
都会の星の撮り方本を出版しました。WebAssembly を使っています
先日、都会で撮る 星の軌跡の撮影術 〜はじめて撮る人から上級者まで比較明合成による撮影の完全ガイドという本を出版しました。 この本は、比較明合成という画像処理によって都会の星の軌跡の撮り方を紹介している本ですが、それを WebAssembly を用いてブラウザ内で実現する Web アプリ を作りました（そしてその使い方を本の中で解説しました）ので、この記事では WebAssembly による移植周りについて少し解説したいと思います。 なぜ WebAssembly が必要だったか 今回 WebAssembly を、LibRaw というオープンソースソフトウェアをブラウザ上で利用するために使いまいた。 比較明合成をわかりやすく説明すると、複数の画像を比較して、最も明るい点を選択する合成方法です。星は日周運動により地上からは動いているように見えますが、カメラを固定して連写で何百枚と写真を撮り、そ
JavaScript で parseInt / parseFloat を使わない方が良い理由
となるのが原因です。parseInt というのは、文字列を解析して整数値（int）を返すグローバル関数であり、引数をまず文字列に変換する仕様となっております。その段階で 0.0000005 が "5e-7" という文字列に変換されてしまい、その文字列の先頭の 5 だけが数字として解析されてしまったため、結果として parseInt(0.0000005) === 5 となりました。 なぜ String(0.000005) === "0.000005" に、String(0.0000005) === "5e-7" になるのかについては、この記事の最後で余談として説明します。 整数化には Math.trunc を使おう このように、parseInt は文字列を引数にすることを前提にしているため、速度の面でも可読性の面でも「小数値を整数値に変換したい」という場合に使うのは望ましくありません。最も望
JavaScript クイズ解説: NaN === NaN の結果はどうなる？
先日、このようなツイートを書きました。 久しぶりの JavaScript クイズ。 JavaScript において NaN === NaN の結果は次のうちどれになるでしょうか？ — Takuo Kihira (@tkihira) September 7, 2021 答えは 4 の「状況によって上記以外もありうる」です。でも、2 や 3 を選んだ方も、もはや正解だといって差し支えないと思います。 解説が長くなったので、ブログ記事にまとめました。 そもそも NaN とは NaN は “Not a Number” を意味する数値です。数値なのに「Not a Number」というのは違和感があるかもしれませんが、数値表現することが出来ない状態を保持するために便宜的に用意された数値、というようなものです。 NaN は、浮動小数点演算において数値では表現出来ない計算をしようとすると登場します。例えば
10 年前に JavaScript で Flash Player を開発し買収された話
この記事は、JavaScript で Flash Player の実現を頑張った（もしくは現在進行系で頑張っている）人たちの集う Flash Advent Calendar 2020 に参加しております。 私は過去に自分が設立した会社で ExGame という HTML5 実装の Flash Player（正確には Flash Runtime Engine）を開発し、その会社ごと DeNA に買収（M&A）されました。あまり出来ない体験であるのは間違いないので、Flash が終了を迎える今、改めて振り返ってみようと思います。 Flash Player の開発 今から 10 年前の 2010 年、ちょうど iPhone が普及し始めてきてガラケーのシェアが 8 割から 6 割くらいに落ちようとしていた時期に、私は Flash Player を JavaScript で実装していました。以前この
事業計画書の作り方、新規ビジネスの考え方
最近、起業を目指している方などから相談を受ける時に、「事業計画書ありますか？」と雑に聞き返すことが多くなってきました。一般的には「事業計画書に何を書けばいいのか？」をわからない人の方が多いでしょう。今回の記事で、事業計画書で重要な事項について解説します。 事業計画書は一般的に起業家が投資家に見せるために用意するものですが、誰に見せてもすぐにビジネスを理解してもらえることを目的に書くのが良いと思います。株の持ち分や個人情報などの機密情報もあるので公開されることはないですが、業界外の人がみても理解出来るように、かつ途中で飽きないように簡潔に書かれていると素晴らしいでしょう。 事業計画書で重要なことは、そのまま起業において大切なことに繋がります。わかりやすいように、なるべく具体的な例を出しながら解説したいと思います。 事業計画書に書かれているべきリスト まずは早速、事業計画書に書かれているべき項
トレタの増井さんに聞く、B2Bサービスのカスタマイズ
今日の夜、トレタの増井さん（@masuidrive）さんと会って晩御飯を食べました。下らない話や日本企業の海外進出の話などをする中で、B2Bサービスがカスタマイズを受け入れるというのがどういうことなのか、という話が大変面白かったので、許可を得た上でブログ記事にさせてもらいました。 B2Bとは、Business to Businessの略語であり、企業が主に企業に向かってサービスやプロダクトを提供するタイプのビジネスモデルを指す言葉です。対義語がB2C(Business to Consumer)で、企業が主に個人に向かってサービスやプロダクトを提供するタイプのビジネスモデルを指します。B2Bビジネスの場合は契約1口あたりの金額が大きくなる傾向があり、逆にB2Cビジネスは1口あたりの金額はさほど大きくないのが普通です。 自分も昔の会社でB2Bを経験したことがあるのですが、B2Bをやる上で1つ大
スタートアップに転職する時に最低限知っておくべき株の話
身の回りで大企業からスタートアップに転職するエンジニアの話をよく耳にするようになりましたが、転職に際して株に関して深く考えていない人がかなり多いことに気づきました。最低限この程度は知っておいたほうがいい、という点を自分の視点からまとめてみました。 スタートアップの金銭的な成功 スタートアップの株は「非公開株」です。非公開株というのは、東証などの証券取引所で取引されていない株全般のことを指します。おおっぴらに取引されていないので、非公開株を貰ったところで即座に現金化出来るわけではありません。特に外部から投資を受けるようなスタートアップ企業は、（例外はいくつかあるものの）この非公開株を現金化させることが一つのゴールになります。 非公開株を現金化させる方法は大きく2つあります。一つは株式公開（IPO）で、証券取引所の審査を経て自社株を自由に売買出来るようにすることです。いわゆるマザーズ上場、東証
生WebGL入門:初音ミクの美麗3Dモデルを表示する(前編)
Special Thanks to @hagat and @teehah for reviewing my articles! 近年、WebGLに流行の兆しが出てきました。WebGLとは、ブラウザに何らプラグインをインストールすることなく、JavaScriptよりGPUを使用した3Dの表示を可能とする技術です。プラグインのインストールが必要ないとはいえ今までは対応ブラウザが少なくあまり実用的ではありませんでしたが、先日のiOS8で正式に対応されたことでモバイルブラウザにおいて対応率が跳ね上がり、スマートフォンにおいてブラウザベースで3Dのゲーム等を作れる可能性が急激に高まりました。 今回WebGL Advent Calendarの一環として、生WebGLで3Dのオブジェクトを表示するところまで挑戦してみます。WebGLにはthree.jsを始めとして有用なライブラリがたくさんあり、大抵の場
DeNAを退職し、新しく会社を設立します » nmi.jp
2014年6月末にて、3年間勤めたDeNAを退職する運びとなりました。これから起業し、そちらに注力したいと思います。 私は、2011年7月に、自分の起業した会社が買収される形でDeNAに参加しました。前の会社ではiPhoneでインストールなくFlash Playerを動かす製品を作成し、それがDeNAに高く評価されて買収されました。以後、DeNAでは3年弱にわたり、HTML5総括という立場で社内外でHTML5に関わる様々な活動に参加しました。 ここ数年間の活動を振り返ると、今の日本のHTML5、特にモバイルHTML5の技術は世界で最も高いと実感しております。そのような恵まれた環境の中でDeNAでは最先端の研究開発をさせていただきました。力及ばずお蔵入りになったり成果が出なかったプロジェクトもあり多数の方々に迷惑をかけてしまいましたが、同僚にも恵まれ、やりたいことを存分に試すことを許していた
JavaScriptでアニメーションを書く初歩の初歩
JavaScriptを使ってアニメーションを書くときに有用なテクニックの、基本中の基本をご紹介します。おそらく、このブログを見ている人のほとんどにとっては釈迦に説法だと思います。今回、requestAnimationFrameの話すらしません。その点、ご留意ください。 まず、JavaScriptでアニメーションをする場合に気をつけないといけないのが、一度JavaScriptの実行（Context）を抜けないとブラウザに描画が反映されないということです。簡単に言うと、 <html><head><title>bad sample</title><script> onload = function() { var e = document.getElementById("e"); for(var i = 0; i <= 100; i += 5) { e.style.left = e.style.
JavaScript イディオム集
JavaScriptでは、初見の人にはさっぱりわからないけれども、ある程度慣れた人は当たり前に使うイディオムが結構たくさんあります。知ってしまえば何てことはないので、私の知っている限りのイディオムとその意味を解説します。 （7/3追記: twitter等で教えていただいた内容を追加しました） +v （数値化） var v = "123"; console.log(+v + 100) // 223 console.log(v + 100) // 123100 vを数値化する方法では最もメジャーです。parseFloat(v) に比べて高速なのに加えて、parseFloatとは細かい挙動が異なります（例えば空文字列の場合、parseFloatならば NaN になりますが、 +v の場合はゼロになります）。必ず数値になることが保証されており、文字列などで数値化出来ない場合はNaNが返ります。 v
JavaScriptの+演算子の謎挙動に迫る » nmi.jp
console.log(+[]); // 0 console.log(+[3]); // 3 console.log(+[null]); // 0 console.log(+[undefined]); // 0 console.log(+["3"]); // 3 console.log(+[1,2]); // NaN console.log(+[true]); // NaN console.log(+[false]); // NaN なぜこのような処理になるのか、JavaScriptの仕様書（ECMA Script Specification 5th）から説明してみましょう。 まず最初、単項+演算子（Unary + Operator）を評価する際に、ToNumberを呼び出すのは前述したとおりです。仕様書の（11.4.6）に書かれています。ではToNumberとはどのような処理でしょうか。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
