サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
災害への備え
sbfl.net
昔はお遊び程度の使われ方をしていたJavaScriptも、本格的な開発に使われるようになってからだいぶ経ちました。 開発の規模が大きくなってくると、どうしても「テスト」という考え方からは逃れられません。そこで、JavaScriptの開発でもテストを導入してみましょう。 この記事では、「JavaScriptのテストってどうするの」という方や「そもそもテストって何」という方に向けて、JavaScriptにおけるテストについて紹介します。 テストってなんだろう 個人で普通にプログラミングしていると「テスト」という単語にはなかなか触れる機会がないと思います。ですが、プロジェクトがそこそこの規模になってくるとテストは非常に重要になってきます。 まずはテストとはなんなのか、どういった効果があるのかについて説明します。 単体テスト(ユニットテスト) プログラミングにおいて、特に小さな規模の開発においては
従来のJavaScriptではWorker間でのデータ共有はできませんでしたが、SharedArrayBufferとAtomics APIを用いればそれが実現できるようになりました。 WorkerはJavaScirptでマルチスレッドを実現するための仕組みです。詳しくは「Web Workersを用いてJavaScriptをマルチスレッド化する」をご覧ください。 Workerは元来メッセージのやりとりのみでデータを共有し、同じメモリの値を共有することはできませんでした。しかし近年になって導入されたSharedArrayBufferで、Worker間のメモリ共有が可能になりました。 SharedArrayBufferは固定長のTypedArrayです。使用するには、単にバイト長を指定してnewするだけです。 // SharedArrayBufferを作成する。 // SharedArrayBu
音楽作る人ってすごいですよね。私も何度かGaragebandを開いて挑戦したことがあるのですが、これがなかなか難しくて。できる人は尊敬します。 音屋さんの動画って必ず音に合わせて動くバーがついてますよね。あの棒グラフみたいなやつ。あれかっこいいですよね。作りたくありません?作りましょう。 音屋のアレ 音屋さんのアレ、かっこいいですよね。音に合わせて動くバー。 オーディオスペクトラムとか言うらしいですね。これJavaScriptで作っちゃいましょう。 今回のソースコード一式 https://github.com/subterraneanflowerblog/audio-spectrum デモ ここをクリックでデモを開く まずは普通の棒グラフ まずは普通の棒グラフスタイルのスペクトラムバーを作りましょう。 まずHTMLからですね。canvasとファイル選択ボタンを置きましょう。 <!DOCTY
あけましておめでとうございます。2019年がやってきましたね。新しい年というのは無意味にワクワクするものです。 1月というと私が就職した月になります。去年2018年の1月、社会人になりました。 初めてのことなので、いろいろ不安もありましたし、楽しいこともたくさんありました。良い1年だったと思います。 社会人ともなると「大人!」というのが求められるようになり、何も装備しないで挑むのはなかなか心細いです。私も当時は、就職体験談とか、業界人の仕事論とか、いろいろかき集めていた記憶があります。 私の社会人1年生としての体験も、ここに記しておきたいと思います。学生が就職するときの参考になるかどうかはわかりませんが、ひとりでも多くの人の不安を取り除けたらな、と思います。 あ、これ退職エントリではないですよ。普通の感想文です! じぶんのはなし まずは自分のはなしをしましょうか! 私は小さい頃からPCが好
配列(Array)は我々プログラマにとって馴染み深い要素のひとつです。配列はどんな入門書にも登場し、どんな高度なプログラムにおいても大活躍します。そしてJavaScritpに限らず、他の言語でも配列(あるいはリスト)は登場します。 こんなにも身近な配列ですが、「なんとなく」で使っていて「配列とはなんなのか」「何ができるのか」をあまり把握できていない方も多いと思います(もちろん私もそうです!)。 そこで、配列についてもう一度調べ上げ、情報をまとめてみることにしました。 JavaScriptにおけるArray 一般に配列(Array)とは、複数の値を管理するためのデータ構造です。JavaScriptにおいてもそれは同じで、Arrayは複数の値を持つことができます。 配列の作成 配列の作成には括弧を使ったリテラル記法か、new演算子を使います。 // 配列は複数の値を格納できる // リテラル
JavaScriptは非常に簡単な言語です。たとえ初心者であっても、魔法のようにさまざまなことが実現できます。しかしその仕様は複雑で、「悪用」すれば多くの人がびっくりするようなコードを書くことができます。 今回は、JavaScriptを悪用して難解プログラミングに挑んでみましょう。 JavaScriptと難解プログラミング 難解プログラミング言語というのは、わざと人間が理解できないように作られたプログラミング言語のことです。難解プログラミング言語としてはBrainf*ckやWhitespaceなどが有名です。これらの存在はほぼジョークであり、実用するわけではありません。 JavaScriptは難解プログラミング言語からは程遠いように思えます。しかし仕様をちょっと悪用すれば、非常に難解なプログラミング言語として活用することができます。 例えば、以下のコードは驚くべきことにJavaScript
「イミュータブル(immutable)」という言葉を聞いたことがあるでしょうか。イミュータブルは「不変」「変わらない」という意味の単語で、プログラミング界隈で盛り上がりつつある概念です。 ですが、そもそもプログラムとは基本的に値を変化させて何かを実現することがほとんどで、「イミュータブル」とは程遠いように思われます。 プログラミングにイミュータブルを導入するとはどういうことでしょう?どんなメリットが得られるのでしょう? イミュータブルって? プログラミングにおいてイミュータブルとは、オブジェクトの状態が変わらないことを指します。 オブジェクトの状態、と言ってもいまいちピンとこないかもしれません。わかりやすい例としては配列の状態があります。以下のコードを見てください: const array = [1, 2, 3]; for(let i = 0; i < array.length; i++)
GoogleやAmazon、Twitterなどの会社は、自社サービスのAPIを公開しており、だれでも自由に使えるようになっています。APIを通すことでそのサービスの機能にアクセスでき、プログラムからの操作が可能になります。 ウェブサービスのプログラミングをしていると、ときにはAPIを利用する側ではなく、APIを作る側に回ることがあります。しかし、APIを作るのに慣れ親しんでいる人は、あまりいないと思います。 そこでこの記事では、Node.jsとExpressで簡単なWeb APIを作ってみて、「どんな感じなんだろう」「どうすればいいんだろう」といったことを掴んでもらいたいと思います。 Web APIとは APIってなんだろう Web APIを作る前に、そもそもWeb APIとはなんでしょうか。「Web」の「API」ということはわかりますが、「API」を具体的に説明しろと言われると、ちょっと
アニメーションにおいて三角関数を使うと、面白い動きを作ることができます。JavaScriptを使って、三角関数とcanvasで円運動アニメーションを作ってみましょう。 三角比・三角関数のおさらい アニメーションにおいて、三角関数を使うと、様々な複雑な動きを表現することができます。 しかし、数学的な物事を扱うには、ある程度の知識が必要です。まずは三角比・三角関数について、軽くおさらいしておきましょう。 直角三角形と比 三角比・三角関数について知るには、まず直角三角形について知る必要があります。直角三角形って覚えてますか?ひとつの角の角度が90度の、あれです。あいつです。 直角三角形には面白い性質があります。それは次のようなものです: 角度が決まると、辺の比も決まる。 これは本当でしょうか? 実際に確かめてみる 幾何学的に込み入った話にもできますが、今回はカジュアルに行きましょう。実際に測って
Nintendo Switchの発売から1年以上が経ちました。徐々に発売ソフトも増えてきて、ポケモンなどの大型タイトルも発表されるようになってきました。 Switchはとてもお手軽なハードで、私も次々とソフトを購入してしまいます。そして、そんなこんなしてるうちに購入ソフトがちょうど50本行ってました。 VRゲームのときも50本で感想記事を書いたので、Switchでも50本で感想書き散らしたいと思います。今度は全部のソフトについて。 Nintendo Switch自体について ソフトの話に入る前に、Switch本体についてもサクっと感想を書いてみたいと思います。 スペックについて まずはスペック面。任天堂がハイスペックを目指したハードって、なかなかクセのつよいじゃじゃ馬が多いと思うんですが(スーパーファミコン、64、ゲームキューブなど……)、Switchはめちゃくちゃ素直なハードです。PSP
ゲームのバグって面白いですよね。進行不可能バグはもちろん論外ですが、ちょっとした不思議なバグはなかなかに楽しめます。 さて、今回話題になったのはWii版(バーチャルコンソール)のマリオ64で、「長時間たつと足場がどんどん浮き上がる」というものです。オリジナル版では起こらず、バーチャルコンソール版だけで起こるというのがミソです。 この摩訶不思議なバグがいったいどうやって起きているのか、確かめていきましょう。 話題のバグ:時間が経つと足場が浮かぶ Automatonなどで記事になった「『スーパーマリオ64』を研究するプレイヤーたちは、Aボタンを押さずステージクリアするために3日間待ち続ける」がゲーマーの間で話題になっています。 このバグは、炎の海から顔を出したり沈んだりするだけの足場が、時間が経つにつれほんの少しずつ炎の海から浮遊するというものです。ゲームを起動したまま3日間放置すると、足場が
近年、PCに搭載されるメモリは爆発的に増えました。16GBや32GBのメモリが搭載されているのが当たり前の時代です。性能の制限が強いスマートフォンですら4GBほど搭載していることがあります。ストレージの読み書き速度もどんどん加速し、昔では扱えなかったようなデータ量をリアルタイムで処理できます。インターネット回線も同様に大量のデータを扱えるようになりました。 しかし現実的な大きさのデータを一度に扱おうとすると、現代でもそれなりに処理時間がかかります。ユーザはレスポンスに対して敏感で、反応が0.1秒でも遅れるとストレスを感じます。しかし時間がかかるものはかかるのです。この問題は一見どうしようもないように思えます。 そこで登場するのが「データを細切れにして処理する」というコンピュータにおける万能の薬です。細切れにして逐次処理すれば、少しずつデータを処理することができ、素早いレスポンスを実現するこ
インターネットを利用する上で常について回るのがセキュリティの話です。特にパスワードに関するセキュリティの話題は毎日尽きません。私たちは「このパスワードで大丈夫か」「破られはしないか」という不安を抱きながら、眠れない夜を過ごすことになります。 そこでちょっと気分転換をしてみましょう。今日だけはパスワードを破られる側ではなく、破る側に回ってみるのです。いろいろなことが学べますし、きっと楽しいはずです。 パスワードの保存形式 パスワードがどういう形式で保存されているかご存知でしょうか?パスワードは、一般的にはハッシュという形で保存されています。元のパスワードは保存せずに、ハッシュ関数というものを用いて、パスワードからハッシュへと変換してから保存します。 しかし、いったいなぜそんなことをするのでしょう? 03ac674216f3e15c761ee1a5e255f067953623c8b388b44
グランブルーファンタジー(グラブル)も今年で4周年を迎えました。いろいろ問題もありましたが、なんとかサービスも続いています。 2018年の今となっては、リッチなブラウザゲームというものは普通になりましたが、グラブルには4年前当時としてはわりと珍しい技術が使われています。 自分が遊んでいるゲームはどんな技術で動いているのだろう?と気になる人も多いと思います。そこで、この記事では、グラブルを取り巻く技術について簡単に解説したいと思います。 グラブルというゲーム みなさん元気にグラブってますか?私は最近になって団アルバハHLに参加できるようになり、オメガ武器を作ることができました!4周年アップデートでやることもどんどん増えてきて、最近楽しいです。マグナ2の武器は全く出ずに苦労していますが、ちまちま6連戦を繰り返して頑張って集めようとしています。そして次に待つのは光有利古戦場ですね。一緒に頑張りま
アプリケーションにおけるパフォーマンスの重要性は、昔も今も変わりません。優れた体験を実現するため、多くの技術者が日夜汗を流しています。 パフォーマンスの改善には計測が必須です。「推測するな、計測せよ」という言葉の通り、実際に計測してみないことには、何もわかりません。 JavaScriptにも、パフォーマンスを計測するためのいくつかの方法が存在します。今回はそれらを紹介してみたいと思います。 さまざまなパフォーマンス計測方法 Date.now()を使った方法(非推奨) 最初に紹介するこの方法は、レガシーで、とてもお勧めできないものです。ですが、一種のアンチパターンとして、ここに掲載しておきます。 Date.now()はシステムにおける現在の日時を、ミリ秒で返すメソッドです。処理開始前の時間と、処理終了後の時間を取得し、引き算することで、処理にかかった時間を計測することができます。 const
とりあえず動けばいい、の精神でコードを書ける個人開発とは違い、仕事やオープンソースプロジェクトにおけるコーディングでは、「他人が読むコード」を意識して書く必要があります。 他人が読むのですから、もちろんわかりやすいコードでなくてはなりません。でも、「わかりやすい」とは何でしょう。どうしたら実現できるのでしょう。 この記事では、他人が読む可能性があるコードを書くときに気をつけていた方がいい事項について、いくつか紹介します。 まえがき 私が社会人になって数ヶ月が経ちました。会社では自分でコードを書くのはもちろん、他人の書いたコードをいじるという、今まであまり経験していない作業をすることもあります。 そしてその中で使われている言語にはJavaScriptも含まれます。JavaScriptは平易な言語であり、クライアントサイドでもサーバサイドでも採用できるので、様々な場面で使用されています。 さす
Dartについて書かれている記事は少ない。WebGLについて書かれている記事も少ない。両方となると……? 2DグラフィックスにおけるWebGLのパフォーマンスの記事ではDartを使ってプログラムを記述していたものの、何の説明もしないというのは少しマズいのではないかと感じたので、DartからWebGLを利用する方法について簡単に解説することにした。 ただ、あくまでWebGLの利用方法に焦点を当てたいので、3Dグラフィックスの仕組みや線形代数については取り扱わない。 基礎編(この記事) 3D編 アニメーション編 テクスチャ編 WebGLとは WebGLはブラウザ上で3DCGを扱うための標準規格である。OpenGL ES 2.0がベースとなっており、全体としての仕様もそれに準拠する。GPUの恩恵を受けた高速な処理が可能で、レンダリングはcanvas要素に対して行われる。 現状で正式サポートしてい
JavaScriptからのクリップボードの操作は、長いあいだ開発者たちに切望されていました。かつてはFlashを使って実現するハックなどがありましたが、各ブラウザがexecCommandによるクリップボード操作を実装したことで、現在は落ち着きつつあります。 ただ、APIが綺麗に整備されているとは言いにくく、あまり現代的ではありません。そこで、スマートかつ現代的にクリップボードを扱うことができる、Async Clipboard APIの実装が進みつつあります。 Async Clipboard APIはその名の通り非同期でクリップボードを扱うAPIです。Async Clipboard APIはPromiseを返すので、直感的に扱えるようになっています。 従来のAPIでも、execCommandを用いることによってクリップボードを操作することができました。しかし、バグが多くブラウザ間の整合性が取
HTML5になってから、canvas要素というものが追加されました。canvas要素はJavaScriptから好きなグラフィックを描くことができ、使い方次第で様々な表現を実現できます。 やり方次第では、canvas要素にアニメーションを描画することもできます。そこで、この記事では、javaScriptとcanvas要素を使って、アニメーションを作る方法を紹介します。 canvas要素の扱い方 ここではcanvas要素の扱い方は、詳しくは紹介しません。「javascript canvas」や「html canvas」などでググってください。 canvas要素の大まかな使い方は以下の通りです: canvas要素を取得する canvas要素のコンテキストを取得する コンテキストを通して描画する まずは静止画 いきなりアニメーションというのも難しいでしょう。まずは静止画を描画するところを目標にして
WebGL、大変ですよね。OpenGLベースなのでC言語っぽいAPIと付き合っていかなければならず、JavaScriptの文化とはなかなか馴染みません。 そこでWebGLをオブジェクト指向っぽく触れるように、WebGL2用のラッパーライブラリであるXenoGLを開発・公開しました。 経緯 WebGLのAPIはなかなか難しいです。昔ながらの低級言語向け(この程度で低級って言ってると怒られるかもしれませんが……)のAPIで、今風のオブジェクト指向などとは全く異なる文化を持っていると言えます。 自分で触るだけならまだしも、他人にオススメしようとすると、大抵ドン引きされます。状態管理などが難しく、「今どんな状態で、何をしなければいけないのか」を把握するのに、ものすごく時間がかかります。 なので現代では、WebGLを触るときはThree.jsなどのライブラリを使うのが一般的です。しかしThree.j
WebGLを扱う際には行列計算というのがどうしても必要になってきます。だいたいは既存のライブラリを使ってなんとかしたりするのですが、現状あまり選択肢は多くありません。そこで新しいライブラリであるMatrixGLを作って公開しました。 経緯 私はたまにWebGLをいじるのですが、やっぱりどうしても行列計算が面倒です。WebGL用の行列計算ライブラリというと、glMatrixという有名なライブラリがあるのですが、昔ながらのC言語的なAPIで、どうしてもJavaScriptでは使いにくく感じていました。OpenGL自体とは相性いいAPIだとは思うんですけどね。 「まあ誰かがそのうちJavaScript的な使いやすいの作ってくれるだろう」とずーーーーっと待っていたのですが、待てど暮らせど全く出てこないという状況でした。みんなglMatrixで満足してるのか、それかThree.jsとか使ってるから特
Houdiniというプロジェクトをご存知ですか?HoudiniはJavaScirptからアクセスできるCSSの機能を広げ、プログラマブルなCSSを実現するためのものです。Houdiniが実現すれば、まるでハリー・フーディーニのように物事を自在に操れるようになること間違いなしです! そんなHoudiniの中で、CSS Paint API(CSS Painting API)がChrome 65で実装予定です。 CSS Paint APIを使って、ブラウザの上の魔術であるHoudiniを体験してみましょう。 CSS Paint APIは、CSSで用いる画像をJavaScriptから動的に生成するためのAPIです。生成した画像は、background-imageやborder-imageで利用可能です。今までcanvas要素で無理やり実現していた複雑な背景なども、CSSの枠組みの中で実現することが
WebGL2ではTransformFeedbackという機能が使えるようになりました。TransformFeedbackがあればGPUでの計算結果をバッファに書き出すことができるようになります。これを使えば、なかなか面白いことができるようになります。 この記事では、TransformFeedbackを利用したGPGPUと、パーティクル描画について解説します。 前提知識 この記事では、WebGL2について、基礎的な知識を持っていることを前提としています。まだWebGL2に慣れ親しんでいない人は、以下の記事を参考にしてください。 WebGL2入門 基礎編 また、WebGL1/WebGL2について、@h_doxas様がwgld.orgという解説サイトを開いています。そちらも参考にしてください。 wgld.org ソースコード この記事で使われているプログラムの完全なコードはGithubに置いてあ
ウェブにおいて、ある要素が他の要素と重なっているかどうか判定したいことは、よくあります。代表的な例としては画像の遅延読み込みがあります。画像が画面内に入ってきてから読み込むことで、負荷を抑えるテクニックです。しかし従来の方法は、パフォーマンスへの悪影響や、コードの複雑化など、様々な問題を含んでいました。 そこで、近年になって新しく導入されたIntersectionObserverを使えば、パフォーマンスへの影響を気にすることなく、要素の交差判定を簡単に実装することができます。 要素と要素の交差判定 画像の遅延読み込みやスクロールアニメーションを実装する際、「要素が画面内に入ってきたか」という情報が重要になります。これは「要素と他の要素(画面の場合はviewport)の交差判定」と言い換えることもできます。 要素の交差判定は、scrollイベントを監視し、scrollTopなどのプロパティを
JavaScriptは昔からあるプログラミング言語ですが、特に近年ではウェブ技術の盛り上がりにともない、JavaScriptの人気も上昇しています。 JavaScriptを学ぼうとすると、数多くの書籍・記事を見つけることができます。しかしながら、それらの多くはすでに他の言語でプログラミングを学習している人向けであったり、JavaScriptをもうすでに使っている人向けの小さなアドバイスであったりします。よってプログラミング初心者がJavaScriptを学ぼうとすると、様々な困難に直面します。特に、体系的にまとまった初心者向けの文献を探すのは、骨が折れます。 そこで、この連載記事では、いままでプログラミングを学んだことがない人を対象に、JavaScriptによるプログラミングを習得してもらうことを目標にしています。プログラミングの楽しさを、ぜひ体験してください。 連載目次 基礎と文法(この記
JavaScriptはオブジェクト指向言語の一種です。オブジェクト指向を意識してコードを書くことで、より効率的なプログラムを書くことができるようになります。 しかし一方で、オブジェクト指向というものは複雑で、簡単には会得できません。そこで、この記事では要点だけをかいつまんで、オブジェクト指向について説明したいと思います。JavaScriptを使って、オブジェクト指向を学んでみましょう。 オブジェクト指向って難しい? オブジェクト指向の深い世界 「オブジェクト指向」。名前だけはよく聞きますし、プログラミングの技術であることだけはわかっています。ですが、その謎を解くためにGoogleで検索してみたり、Wikipediaのページを見てみたりしても、なかなか小難しいことが書いてあり、哲学書を読んでいるときと同じような眠さに襲われます。 ウェブだけでなく、書籍についても同様です。例えば、今、この記事
ちょっといつもと毛色の違う記事書きますね。 Twitterアカウントの乗っ取りは昔から問題にはなっているのですが、いまいち纏まった対策法が書いているところが少ないなーと思っていました。最近になってまた…
ゲームなどのコンテンツにおいて、「当たり判定」から逃れることはできません。オブジェクトとオブジェクトが衝突したかどうかという判定は、インタラクティブコンテンツにおいて最も重要な部分になるからです。 当たり判定の実装自体は難しくありません。ですが、素朴な実装ですと、対象となるオブジェクトが大量である場合に、十分なパフォーマンスが出ません。これはオブジェクトの多い、現代的なゲームでしたり、弾幕シューティングなどを作るときに大きな障害となります。 この記事では、大量のオブジェクトの当たり判定を処理する、効率的な方法について紹介します。 まずは素朴に実装してみる 当たり判定の処理を語るには、ある程度ゲームの骨組みのようなものが必要になってきます。もちろんクラスなどを使わないベタ書きでもよいのですが、大変読みにくくなってしまいます。ですので、今回は、まず簡易的なゲームエンジンのようなものを作って、そ
次のページ
このページを最初にブックマークしてみませんか?
『Subterranean Flower』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く