はじめての副業コース Web制作の副業に必要なスキルが学べる 確実にお仕事をはじめられる5万円案件保証手厚いサポートで副業を最短でスタート
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? この記事はGitHubに掲載した記事 https://github.com/wowowo142/c96 の転載となります。 記事更新情報(全部読んでからまた来た人向け) (2022/04/20) Spriteの元となる画像ファイルなど、リソースの読み込みに関してすごく分かりやすく詳細に解説されている記事がありました。 ローダー(PIXI.Loader)の使い方は筆者の能力と気力不足により本記事では解説できなかったので、 Pixiをちゃんと使いたい方はぜひ読みましょう。超オススメ。 PixiJS の Sprite 調べてみた (2020/
みなさんこんにちは!Kotonoです。 今回はJavaScriptにおける「名前空間」について解説していきたいと思います。 この記事では ・名前空間とは ・名前空間を使用するメリット などといった基本的な内容から ・名前空間とスコープの違いについて ・名前空間の書き方 ・名前空間を階層化する方法 などといったより発展的な内容に関しても、分かりやすく説明していきたいと思います。 名前空間とは みなさんは「名前空間」とは何か知っていますか? 名前空間は、英語ではNamespace(ネームスペース)と言い、プログラミングにおける概念のひとつです。 「名前空間」という概念は、名前の衝突を避けるために存在します。 その「空間」の中に、同じ名前のものが複数存在しないように仕分ける仕組みのことを指します。 空間とは一種の容器のようなものです。 例えば、「太郎」という名前は複数の人を指す可能性がありますが
はじめに JavaScript のasync/awaitに関する備忘録になります。 「今まで$.Deferred()やPromiseなどで非同期処理は書いたことがあるが、async/awaitはわからない」 「$.Deferred()やPromiseなどの書き方より、もっと簡潔に非同期処理を書きたい」 「今までの非同期処理の書き方と比べて何が良いのかわからない」 といった人達向けの記事です。 $.Deferred()やPromiseなどで非同期処理を書いたことがある前提のため、非同期処理自体に関する説明は記載しておりません。 記載しているコードは Chrome のコンソール上で動くため、コンソール上で実行して動作を確認してみると理解が深まりやすいと思います。 本記事で用いている用語 Promiseを返す Promiseオブジェクトを返すこと。
引数 callbackFn 配列のそれぞれの要素に対して実行する関数。その返値は、新しい配列の単一の要素として追加されます。この関数は、以下の引数で呼び出されます。 element 配列内で現在処理中の要素です。 index 現在処理中の要素の配列内における添字です。 array map() が呼び出された配列です。 thisArg 省略可 callbackFn を実行するときに this として使う値です。反復処理メソッドを参照してください。 返値 与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列です。 解説 map() メソッドは反復処理メソッドです。指定された関数 callbackFn を配列に含まれる各要素に対して一度ずつ呼び出し、その結果から新しい配列を構築します。これらのメソッドが一般的にどのように動作するのかについての詳細は、反復処理メソッドの節
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月. Learn more See full compatibility Report feedback Promise.all() は静的メソッドで、入力としてプロミスの集合の反復可能オブジェクトを取り、単一の Promise を返します。この返却されたプロミスは、入力されたプロミスがすべて履行されたとき(空のイテレーターが渡されたときを含む)、その履行された値の配列で、履行されます。入力されたプロミスのいずれかが拒否されると、その最初の拒否理由とともに拒否されます。
JavaScriptに限った話ではないのですが、reduce関数を持つプログラミング言語がいくつかあります。 JavaScriptに関しては、一応、ECMAScript5の仕様に登場するようで、将来的にはどのブラウザでも使えるようになりそうな気配はあります。 Standard ECMA-262 また、MDCではreduceのアルゴリズムが掲載されているので、これを利用すれば現時点でもどのブラウザでもreduce関数を利用することができます。 reduce関数とは? MDCに掲載されている文章を引用します。 配列の(左から右へ) 2 つの値に対して同時に関数を適用し、単一の値にします。 JavaScriptのreduceは、配列のメソッドです。左ら右へとありますが、右から左へ関数を適用するreduceRightという関数もあります。*1 どういう時に使えるか 元となる配列があって、それを累積
こんにちは!エンジニアの中沢です。 JavaScriptにはメッセージを表示するためのダイアログがあります。 ダイアログではユーザーの入力を受け付けることもできるので、上手く活用してください。 この記事では、 ・ダイアログとは ・alertでダイアログ(メッセージボックス)を表示する方法 という基本的な内容から、 ・confirmで「はい」「いいえ」のダイアログを出す方法 ・promptでユーザーの入力を受け付ける方法 などの応用的な使い方に関しても解説していきます。 今回はこれらの方法を覚えるために、ダイアログのさまざまな使い方をわかりやすく解説します! JavaScriptのダイアログを使いこなすことで、ユーザーとのインタラクションをより豊かにすることができます。しかし、技術の進化は速く、特に生成AIの活用が進む今、Web制作における新たなスキルを身につけることが重要です。もし「自分の
window.requestAnimationFrame() メソッドは、アニメーションを実行したいことをブラウザーに指示します。 このメソッドは、次回の再描画の前に、ユーザーが指定したコールバック関数を呼び出すようブラウザーに要求します。 コールバック関数への呼び出し頻度は、通常、ディスプレイのリフレッシュレートと一致します。 最も一般的なリフレッシュレートは 60Hz(60 サイクル/フレーム毎秒)ですが、75Hz、120Hz、144Hz も広く使用されています。 パフォーマンスとバッテリー駆動時間の向上のため、ほとんどのブラウザーでは、バックグラウンドのタブや非表示の <iframe> 内で実行されている場合、requestAnimationFrame() の呼び出しは一時停止されます。
JavaScriptにもクラスがやってきた!JavaScriptの新しいclass構文をマスターしよう 高津戸壮(株式会社ピクセルグリッド) ECMAScript 2015(ECMAScript 6)で新たに追加された待望のclass構文について、その概要をサンプルコードを交えて紹介します。 これまでのJavaScriptにおけるクラス 多くのプログラミング言語はクラスを作れる機能を持っていますが、JavaScriptにその機能は用意されていませんでした。しかし、JavaScriptにはprototypeという柔軟な仕組みが存在しており、このprototypeを利用することで、他の言語で表現されている「クラス」と似たような振る舞いを再現することが可能でした。 それは例えば、こんなふうにです。 /* Cat雛形の作成 */ function Cat(name) { this.setName(
例から始めましょう。 このハンドラは <div> へ割り当てられますが、<em> や <code> のような任意のネストされたタグをクリックしたときにも実行されます: <div onclick="alert('The handler!')"> <em>If you click on <code>EM</code>, the handler on <code>DIV</code> runs.</em> </div> 不思議ですよね?実際にクリックしたのは <em> でしたが、 <div> のハンドラが実行されるのはなぜでしょう? バブリング(Bubbling)バブリングの原理はシンプルです。 要素上でイベントが発生すると、最初にその要素上のハンドラが実行され、次にその親要素のハンドラが実行され、さらに他の祖先を実行します。 たとえば、3つのネストされた要素 FORM > DIV > P があ
プロトタイプチェーンと継承 プロパティの継承 JavaScript のオブジェクトはプロパティ(自身のプロパティを指す)の動的な「袋」です。 JavaScript のオブジェクトは、プロトタイプオブジェクトへのリンクを持っています。あるオブジェクトのプロパティにアクセスしようとすると、オブジェクトだけでなく、オブジェクトのプロトタイプ、プロトタイプのプロトタイプへと、一致する名前のプロパティが得られるか、プロトタイプチェーンの終端に到達するまで、プロパティの探索が行われます。 メモ: ECMAScript 標準に従い、 someObject.[[Prototype]] という表記を someObject のプロトタイプを示すのに使用しています。内部スロット [[Prototype]] には Object.getPrototypeOf() と Object.setPrototypeOf()
HTML5のゲーム開発向けフレームワークの乱立 昨今、HTML5のCanvas, WebGL, WebAudioAPiなど、Webフロントエンド技術でのゲーム開発に向いた技術が増えて、Webブラウザ向けのゲーム開発界隈が盛り上がりを見せています。 それに合わせて、JavaScriptによるゲーム開発向けフレームワークも広がりを見せ、どれを選べばいいか迷ってしまうほど、多くのフレームワークが登場しています。 習熟の道 しかし、HTML5ゲームの開発をする際にそういったフレームワークを使用することを選択した場合、CanvasやWebGLなどの特性を学ぶ他、そのフレームワークの使用方法や設計理念も学ぶ必要があり、目の前に登場する大きな要塞に立ちくらみを覚える人も居るかと思います。 「フロー体験」という考え方があり、技術の習熟においては、自分の現在の習熟レベルに合わせて技術を学習する必要があります
モバイルアプリに最適化した軽量JavaScriptエンジン「Hermes」、Facebookがオープンソースで公開。低スペックのスマートフォンでの実行速度を重視 Webアプリとして構築されているモバイルアプリケーションは、現在では非常に複雑で大規模なものになりつつあります。 これは同時に、アプリケーションのロードや起動にかかる時間が増大することに直結しており、特に発展途上国などで広く使われている低スペックなスマートフォンにおいてはその影響が顕著です。 Facebookがこうした大規模するモバイル向けWebアプリケーションの課題を取り除くべく調査したところ、JavaScriptエンジンを改善する必要があることを認識し、Hermesを開発することにしたと説明しています。(追記:ただし後述のようにHermesは現時点ではWebアプリケーション用ではなくReact Nativeのオプションとなって
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く