ウェブアプリケーションの高度化に伴い、セキュリティに対する関心も年々高まりつつあります。特にXSS（クロスサイトスクリプティング）と呼ばれる脆弱性は簡単ながらも大きな被害をもたらします。アプリケーションの開発者は当然セキュリティを意識した開発を行うべきですが、人間の注意は万能ではなく、時に不注意から脆弱なアプリケーションを作成してしまいます。 こういった状況を改善するために、Trusted Typesという提案がなされています。Trusted Typesはよりセキュアなウェブアプリケーションを作る手段を提供し、安全性を高める補助をしてくれます。 Trusted Types HTMLやJavaScriptは非常に柔軟な仕組みを有しており、要素を動的に組み立てることが可能です。例えば以下の例を見てみましょう： const { username, email } = await api.getU

Reactはどちらかというと非同期処理が苦手な部類でした。今まではReduxのmiddlewareを駆使したり、Hooksを上手く使ったりして乗り切っていました。 そこで以前よりSuspenseという機能の実装が進んでいます。Suspenseはまだ世間に浸透しきっていない機能ですが、Reactの世界を大きく変える可能性があります。そんなSuspenseについて、軽く覗いてみましょう。 Suspenseの世界 Reactで非同期処理を綺麗に扱うのは簡単なことではありません。redux-sagaを使うにせよ、useEffectを使うにせよ、大きな痛みを伴います。 そもそもReactはアプリケーションのUI層を担当するライブリラリです。本来果たすべき責務に注力できず非同期処理のような些事に気を取られ、あろうことか非同期処理がReactアプリケーションの設計に大きな影響力を持ち始めるというのは、望

フロントエンドの世界も随分と様変わりしました。便利なツールが多数導入され、高度なフレームワークが整備され、言語には静的型検査が付き、より本格的なアプリケーションの制作に集中できるようになりました。 しかしそれらの環境は業務には適していても、必ずしも個人開発に適しているとは言えません。過剰な抽象化がほどこされ、混乱を招くこともあります。 そんな中で、最近話題のフレームワークとしてSvelteというものがあります。Svelteはシンプルかつ十分な機能を提供します。 対象とする読者 この記事は以下の読者を対象としています： HTML/CSSはある程度わかるJavaScriptはちょっと書いたことがあるReact/Vue/Angularは自分には難しすぎたでもフロントエンドで遊んでみたい フロントエンドの参入障壁 フロントエンドと言えば、かつてはちょっと頑張れば誰にでもできるような平和な分野でした

経緯や理由はわかりませんが、日本のビデオゲームとポーカーミニゲームは切っても切り離せない関係にあります。RPGのカジノコーナーに行けば、多くの場合はポーカーと出会うことができるでしょう。 さてそんなポーカーですが、自分で作ってみたくなったことはありませんか？今回は、JavaScriptを使って、簡単なポーカーを作ってみましょう。 ビデオゲームポーカー 日本におけるポーカーは、一般的に古典的で素朴なポーカーが採用されることがほとんどです。テキサス・ホールデムも有名ですが、特にビデオゲーム内のミニゲームにおいては、多くの場合、最もシンプルなものが採用され、対戦相手はおらず、1人で役を作って遊ぶものに仕上がっています。 ルールとしては、プレイヤーにカードが5枚配られ、プレイヤーは保持したいカードを複数選びます。1度きりの交換後、手札の役を見て、強い役ほど報酬が多くもらえる、という作りになっていま

こんにちは、古都ことです。今月の頭ぐらいに「転職したいエントリ」を書いてそこそこバズりました。 おかげさまで無事に転職先も見つかったので、その体験をある程度共有しておこうと思います。 転職しました（します） こんな記事を書いているということは転職先が決まっているということですよね。というわけで8月からは株式会社トップゲートの大阪オフィスでわちゃわちゃすることになります。トップゲートの方々はよろしくお願いいたします。 トップゲートといえばGoogleプロダクトでなんやかんやするところで有名ですが、正直GCPとか1ミリも触ったことないし、Angularもようわからん、という状況です。それでも、新しい領域に挑戦できるというのはとても嬉しいので、頑張っていきます。 この記事は長いです この記事は長いよ！そして別に方向性があるわけでもなくだらだらと書きなぐっているだけなので、必要そうなところだけ拾っ

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秒でも遅れるとストレスを感じます。しかし時間がかかるものはかかるのです。この問題は一見どうしようもないように思えます。 そこで登場するのが「データを細切れにして処理する」というコンピュータにおける万能の薬です。細切れにして逐次処理すれば、少しずつデータを処理することができ、素早いレスポンスを実現するこ

グランブルーファンタジー（グラブル）も今年で4周年を迎えました。いろいろ問題もありましたが、なんとかサービスも続いています。 2018年の今となっては、リッチなブラウザゲームというものは普通になりましたが、グラブルには4年前当時としてはわりと珍しい技術が使われています。 自分が遊んでいるゲームはどんな技術で動いているのだろう？と気になる人も多いと思います。そこで、この記事では、グラブルを取り巻く技術について簡単に解説したいと思います。 グラブルというゲーム みなさん元気にグラブってますか？私は最近になって団アルバハHLに参加できるようになり、オメガ武器を作ることができました！4周年アップデートでやることもどんどん増えてきて、最近楽しいです。マグナ2の武器は全く出ずに苦労していますが、ちまちま6連戦を繰り返して頑張って集めようとしています。そして次に待つのは光有利古戦場ですね。一緒に頑張りま

とりあえず動けばいい、の精神でコードを書ける個人開発とは違い、仕事やオープンソースプロジェクトにおけるコーディングでは、「他人が読むコード」を意識して書く必要があります。 他人が読むのですから、もちろんわかりやすいコードでなくてはなりません。でも、「わかりやすい」とは何でしょう。どうしたら実現できるのでしょう。 この記事では、他人が読む可能性があるコードを書くときに気をつけていた方がいい事項について、いくつか紹介します。 まえがき 私が社会人になって数ヶ月が経ちました。会社では自分でコードを書くのはもちろん、他人の書いたコードをいじるという、今まであまり経験していない作業をすることもあります。 そしてその中で使われている言語にはJavaScriptも含まれます。JavaScriptは平易な言語であり、クライアントサイドでもサーバサイドでも採用できるので、様々な場面で使用されています。 さす

JavaScriptは昔からあるプログラミング言語ですが、特に近年ではウェブ技術の盛り上がりにともない、JavaScriptの人気も上昇しています。 JavaScriptを学ぼうとすると、数多くの書籍・記事を見つけることができます。しかしながら、それらの多くはすでに他の言語でプログラミングを学習している人向けであったり、JavaScriptをもうすでに使っている人向けの小さなアドバイスであったりします。よってプログラミング初心者がJavaScriptを学ぼうとすると、様々な困難に直面します。特に、体系的にまとまった初心者向けの文献を探すのは、骨が折れます。 そこで、この連載記事では、いままでプログラミングを学んだことがない人を対象に、JavaScriptによるプログラミングを習得してもらうことを目標にしています。プログラミングの楽しさを、ぜひ体験してください。 連載目次 基礎と文法（この記

ゲームなどのコンテンツにおいて、「当たり判定」から逃れることはできません。オブジェクトとオブジェクトが衝突したかどうかという判定は、インタラクティブコンテンツにおいて最も重要な部分になるからです。 当たり判定の実装自体は難しくありません。ですが、素朴な実装ですと、対象となるオブジェクトが大量である場合に、十分なパフォーマンスが出ません。これはオブジェクトの多い、現代的なゲームでしたり、弾幕シューティングなどを作るときに大きな障害となります。 この記事では、大量のオブジェクトの当たり判定を処理する、効率的な方法について紹介します。 まずは素朴に実装してみる 当たり判定の処理を語るには、ある程度ゲームの骨組みのようなものが必要になってきます。もちろんクラスなどを使わないベタ書きでもよいのですが、大変読みにくくなってしまいます。ですので、今回は、まず簡易的なゲームエンジンのようなものを作って、そ

Rustのターゲットにwasm32-unknown-unknownが追加され、Rust単体でのWebAssemblyのコンパイルが可能になりました。 この記事では、RustのみでWebAssemblyをコンパイルする手順を説明します。 EmscriptenなしでのWebAssemblyのコンパイル WebAssemblyを使ってRustのコードをブラウザ上で実行するでは、Emscriptenを使用したWebAssemblyの利用方法を紹介しました。 しかしEmscriptenという外部ツールを利用することと、大量のグルーコードが必要になり、純粋にWebAssemblyを利用するという面では、あまり効率的とは言えませんでした。 しかし今回Rustのターゲットにwasm32-unknown-unknownが追加されたことで、Emscripten無しでのWebAssemblyの利用が可能になりま

VR元年が謳われた2016年から1年が経ち、2017年になりました。つまり、私がHTC Viveを購入してから1年経つということでもあります。 半年前、私は「半年間VRゲームを体験した感想とオススメのVRゲーム」という記事を書きました。VRの体験記事はいまだ貴重なようで、多くの方に読まれています。 さて、それから半年。VRを取り巻く環境は、全く変わらない部分もあれば、大きく変わった部分もあります。私自身も、あれから多くのタイトルに触れて、意見が変わったところもあります。今回はそのあたりのことにも触れつつ、この1年間でVRに抱いた雑多な感想などを書いていきたいと思います。 VR体験とすぐに解ける魔法 ヘッドマウントディスプレイ（HMD）、モーショントラッキングコントローラ、ルームスケール、これまでゲームの世界には積極的に持ち込まれてこなかった技術が、VRでは利用されています。そのうちどれもが

JavaScriptの3つある変数宣言、varとletとconstは、よく混乱を生みます。どれも変数を宣言することに変わりはないので、違いがわかりにくいのです。このことが初学者を混乱させている場面をたびたび目にしますし、プログラミングに慣れ親しんだ人でも役割を意識しないまま書いていることがあります。 そこでこの記事では、3つの変数宣言の役割とその使い分けについて、それぞれ簡単に紹介してみます。 3種類の変数宣言とその使い分け var – 変数を宣言する varは、JavaScriptにおいて変数を宣言する上で、最も基本的な方法になります。varで宣言された変数は関数スコープとなり、宣言のスコープ先頭への巻き上げ（Hoisting）が行われます。（※変数のスコープおよび巻き上げについてはここでは解説しません。） var x = 10; x = 20; もともと、JavaScriptの変数宣言

JavaScriptにおける非同期処理は一種の悪夢です。非同期処理は容易にコードを複雑化させ、品質の低下を招きます。そこでこの問題を解決するため、非同期処理を簡単に扱うことができる、Promiseやasync/awaitという機能が導入されました。この記事では、Promiseとasync/awaitを用いた非同期コードの単純化について簡単な解説をします。 実行順序がコード通りにはならない非同期処理 非同期処理とは何でしょうか。非同期な処理は、コードの順番通りには実行されません。どういうことか、簡単な例を見てみましょう。 setTimeout(() => console.log('hello'), 500); console.log('world!'); このコードでは500ミリ秒後に「hello」と表示し、その後に「world」を表示しようとしています。ですが、実際には「world」の後に

「イミュータブル（immutable）」という言葉を聞いたことがあるでしょうか。イミュータブルは「不変」「変わらない」という意味の単語で、プログラミング界隈で盛り上がりつつある概念です。 ですが、そもそもプログラムとは基本的に値を変化させて何かを実現することがほとんどで、「イミュータブル」とは程遠いように思われます。 プログラミングにイミュータブルを導入するとはどういうことでしょう？どんなメリットが得られるのでしょう？ イミュータブルって？ プログラミングにおいてイミュータブルとは、オブジェクトの状態が変わらないことを指します。 オブジェクトの状態、と言ってもいまいちピンとこないかもしれません。わかりやすい例としては配列の状態があります。以下のコードを見てください： const array = [1, 2, 3]; for(let i = 0; i < array.length; i++)

もはやReactにHooksのない生活は考えられず、私たちのReactコードの中には多数のHooksが使われています。 一方でその弊害として、使われているHooksが多すぎてコードが散らかり始めた人も多いと思います。Hooksは便利ですが粒度は小さく、プログラムの規模によっては多用しなければなりません。 そこでカスタムHooksの使用を勧めます。カスタムHooksを使うことでコードの見通しを良くすることができます。 カスタムHooksをカジュアルに使っていく カスタムHooksというと、どちらかというとReactの中では難しい部類に入ります。主に「使い方がわからない」「公式ドキュメントが不親切」「ネットの解説が難しい」あたりが問題になるでしょう。しかし難しい機能だからと言って難しく使う必要はなく、自分の使える範囲で自由に使えばいいのではないかと思います。 カスタムHooksは一般にロジック

Reactのhooks、すごいですよね。関数コンポーネントの自由度があがって色々実現できそうです。 私はReactについては2年ぐらい知識止まってるので、かなり衝撃的でした。ContextとかSuspenseとかいろいろ増えてて今更追いつくのは難しいけど、hooksはちょっと使ってみたいなーと感じました。 そんなhooksですが、使い方はそこそこわかるけど動作原理がさっぱりわからなかったので、ちょっと調べてみました。 そもそもHooksってなに hooksは関数コンポーネントからReactのいろいろな機能をフックでき、自分で汚く実装するんじゃなくてReactが面倒見てくれるよーってやつです。useStateで状態を持たせることができ、useEffectでcomponentDidMountみたいなことを実現、あとほかにもuseXXX系がいろいろ、という感じです。 useStateを例に見てみ

近年のフロントエンドの盛り上がりはすごいですね。プログラミング初心者がJavaScript（最近ではTypeScriptも）から学び始めるなんて昔ではなかなか考えられなかったことです。 そんな世界中で大人気のJavaScriptですが、プログラミングに慣れていても困惑する部分が結構あります。特に初心者にとっては、非同期処理、this、コールバック関数、あたりが難しいのではないかと思います。 非同期処理については前に解説しましたし、thisの解説はネットに大量に転がってるので、今回はコールバック関数について解説します。 コールバック関数ってなんなんだ コールバック関数というとsetTimeoutなんかで使われるアレですね。Node.jsでもたくさん使われます。setTimeoutだと以下のような使い方になります： setTimeout(function() { console.log('He