matter.jsでつくるタワーバトルゲーム
ちょってぃタワーバトル 弊社キャラクターの「ちょってぃ」を使ったタワーバトルゲームを作りました。(つみあげるだけです) ちょってぃタワーバトル matter.jsとは matter.jsはJavaScriptで扱える2Dの物理演算エンジンです。重力があったり物体の当り判定ができます。公式では多くのデモが紹介されています。 今回はこの物理演算を用いてタワーバトルを実装したときのTipsを紹介します。 実装時のTips 環境 Vite v4.4.9 matter.js v0.19.0 オブジェクトの生成 オブジェクトは重力によって下に落下します。 床のような固定されているオブジェクトを生成するときはisStaticをつけてあげます。
JavaScriptのES2023・ES2022の新機能まとめ - ICS MEDIA
JavaScriptの仕様であるECMAScriptはEcma Internationalによって定められています。ECMAScript 2015（ES6）の登場以降は、ECMAScript 2016、ECMAScript 2017･･･と、年次で仕様が更新されています。ECMAScript 2022（ES2022）は2022年6月22日のEcma InternationalのGA 123rd meetingにて、ECMAScript 2023（ES2023）は2023年6月27日のGA 125th meetingで承認されました。 ES2022とES2023はすでに多くのブラウザやNode.js環境で利用可能です。本記事では新仕様と使いどころを紹介します。 ES2023 - 配列の非破壊操作 ES2023では配列を非破壊で操作できるメソッドが追加されています。非破壊とは、元の配列を変更せ
【JavaScript】ES2023で導入された非破壊的メソッド - Qiita
ES2023で導入された非破壊的メソッドを紹介します toReversedメソッド toSortedメソッド toSplicedメソッド withメソッド toReversedメソッド reverseメソッドは破壊的に配列の要素を逆順にする toReversedメソッドは非破壊的に配列の要素を逆順にする // reverse const a = [1, 2, 3]; const b = a.reverse(); console.log(a); // [3, 2, 1] console.log(b); // [3, 2, 1] // toReversed 👍 const c = [1, 2, 3]; const d = c.toReversed(); console.log(c); // [1, 2, 3] console.log(d); // [3, 2, 1]
【JavaScript】ES2023の新機能が何故かいまさら追加されていた - Qiita
ES2023その2 / ES2023 / ES2022 / ES2021 先日ES2023では新機能が2個しかなかったという話をしましたが、どういうわけか2023/01/30になってからES2023が2個追加されました。 よくわかりませんが、どうやら1月までは前年のESになるみたいです。 なんで。 これらは2023/01/30に行われたTC39ミーティングで決定したようです。 他にIntl.NumberFormat V3もStage4への議題に上がったみたいですが、こちらは却下されたみたいです。 なんでそんなふわふわな言及なのかってまだアジェンダしかないから詳しいことがわからねえんだよ。 Finished Proposals Change Array by copy 配列を破壊せずに操作するメソッドを追加します。 既存の配列操作メソッドは、変更後の値を返すと同時に元の値も変更してしまいます
一瞬で理解！JavaScriptの`debounce`テクニックとその実装方法 - Qiita
あなたがウェブサイトやアプリケーションを開発しているとき、高頻度で発火するイベントにどう対応すればよいか考えたことはありますか？この記事では、その問題を解決するためのdebounceテクニックについて紹介します！ 目次 debounceとは？ debounceのメリット JavaScriptでのdebounceの実装 使用例と応用 まとめ 1. debounceとは？ debounceは、高頻度で発火するイベント（例: ウィンドウのリサイズ、キー入力など）を制御するためのテクニックの一つです。このテクニックを使うと、特定の時間間隔内に再度イベントが発火しなかった場合にのみ関数を実行することができます。 2. debounceのメリット パフォーマンスの向上: 不要な関数の実行を抑制することで、アプリケーションのパフォーマンスを向上させることができます。 APIのコスト削減: ユーザーの入力
You’ve Got Options for Removing Event Listeners
You’ve Got Options for Removing Event Listeners Reviewing some of the most common approaches available to remove event listeners in JavaScript. Cleaning up your code in runtime is a non-negotiable part of building efficient, predictable applications. One of the ways that’s done in JavaScript is by stewarding event listeners well — specifically, removing them when they’re no longer needed. There ar
意外と知られていないJavaScriptのnew Date()の使用方法
new Date()の使い方 指定した時刻を表す日付オブジェクトを生成する。何も指定されなかった場合は現在の（デバイスに）設定されている時刻を取得する。 日時を指定するときはYYYY/MM/DD HH:mm:ssまたはそれぞれをカンマで区切った形式で取得。 var d1 = new Date('2014/04/01 12:34:56'); console.log(d1); // => Tue Apr 01 2014 12:34:56 GMT+0900 var d2 = new Date(2014, 3, 1, 12, 34, 56); console.log(d2); // => Tue Apr 01 2014 12:34:56 GMT+0900 new Date()に年を入れる new Date("2013")でその年の1月1日GMT+9時間の日付を取得する var d2 = new D
TypeScript で"moduleResolution": "Node"は使わないほうがいい
はじめにタイトルは若干煽りですが、TS 5.0 でBundlerという設定値が追加されたため、Nodeを使う場面はほぼ無くなったと思います。 今回は Node.js と TypeScript のモジュール解決の仕組みについて、moduleResolutionというオプションの観点から解説します。 この記事を書くにあたって実際に動作確認は行っていますが、もしも間違っているところがあればご指摘いただけると幸いです。 なお、 Node.js LTS v18、TypeScript v5.0 時点での情報です。 今後のバージョンアップにて変更がある可能性があります。 TL;DR"moduleResolution": "Node"は使わないほうがいい おそらく求めているものはBundler tsc をビルドツールとして使用している場合はNode16 / NodeNextがベスト Nodeを使う場合でも
WEBLIFE（ウェブライフ）｜Shopify構築・運用支援やCMSを中心としたSaaS事業および映像/Web制作ディレクション
Shopifyを利用したECの構築・アプリ開発や、高セキュリティのホスティングサーバーを内包したCMSを提供。数多くの実績をベースとした運用支援やECのプランニングなど、進化し続けるWebに最適なソリューションを提案します。
D3 Tutorial Japanese D3チュートリアル日本語版
SUGIMOTO TatsuoD3 Tutorial Japanese D3チュートリアル日本語版PublicD3 Tutorial Japanese D3チュートリアル日本語版Showing all 18 listings1.D3 チュートリアル 日本語版SUGIMOTO TatsuoMay 18, 2021• 62.D3 チュートリアル 01 : このチュートリアルについてSUGIMOTO TatsuoOct 29, 20183.D3 チュートリアル 02 : 基礎編SUGIMOTO TatsuoOct 15, 2018• 14.D3 チュートリアル 04 : 要素の追加SUGIMOTO TatsuoNov 12, 20185.D3 チュートリアル 05: メソッドのチェインSUGIMOTO TatsuoNov 12, 20186.D3 チュートリアル 06 : データのバインディング
こわくない関数型プログラミング
関数型プログラミングは全部理解しようとすると難しいですが、簡単な部分の中にも有用な知見がたくさんあります。 関数型プログラミングにまだ親しんでいない人向けに、明日からのプログラミングにすぐ役に立つ考え方をできるだけわかりやすく伝えます。
SvelteKit + microCMS のブログ作成チュートリアル
待望のSvelteKit 1.0がリリースされましたね！ https://svelte.dev/blog/announcing-sveltekit-1.0 早速、microCMSとの連携を試してみたいと思います。 Svelteとはビューを生成するライブラリです。 ReactやVueと異なる点は、ライブラリのコードをほとんど含まないVanilla JSに近い形でコンパイルされるという点です。 そのためコンパイル後のJSファイルのサイズが小さく、高いパフォーマンスが期待できます。 「ライブラリのコードをほとんど含まない」ことを実現するために、SvelteではVirtual DOMを敢えて採用せず、代わりにコンポーネントを非常に効率的な命令型コードに変換して、DOMをピンポイントに更新します。 SvelteKitとはSvelteと組み合わせて使うアプリケーションフレームワークです。 NextやN
【SvelteKit入門】初めてSvelteKitを使い始めた人のための基礎講座 | アールエフェクト
SvelteKitという名前を聞く機会が増えているのでSvelteKitを学習してみたいという人を対象にSvelteKitを使いこなす上で必須となる基本機能について解説を行っています。 SvelteKitについて SvelteKitはSvelte(ユーザインターフェイス(UI)を担当)にRouting、SSR(Sever Side Rendering)やTypeScriptなどの機能が追加され効率的にWEBアプリケーションを構築することができるフルスタックのJavaScriptフレームワークの一つです。SvelteKitと比較されるフルスタックフレームワークにはReactのNext.js、Remix、Vue.jsのNuxtなどがあります。ReactとNext.js、Vue.jsとNuxtでは開発者は異なりますが、SvelteとSvelteKitは同じ開発者によって開発が行われているというこ
【SvelteKit入門】SvelteKit + Prismaによる掲示板アプリ作成 - RAKUS Developers Blog | ラクス エンジニアブログ
こんにちは！ラクス１年目のkoki_matsuraです。 今回は掲示板アプリ作成を通して、SvelteKitの基礎的な部分をご紹介させていただきます。 目次は下記のようになっています。 はじめに Svelteとは SvelteKitとは 掲示板アプリ作成 アプリの概要 環境構築 SvelteKit データベース Prisma テーブル作成 ルーティング作成 新規登録画面 ログイン画面 スレッド投稿画面 スレッド一覧画面 スレッド詳細画面 ログアウト機能 エラー画面 終わりに はじめに Svelteとは WebアプリケーションやUIを構築するためのJavaScriptフレームワークです。有名なものでは「React」や「Vue」が挙げられます。 Svelteにはこれらのフレームワークと比べて下記のような特徴があります。 仮想DOMを用いない こちらが最も大きな特徴となります。 まず、仮想DOM
SvelteKit + Svelte を1年間くらい使ってみた知見など
前置きと自己紹介 今回はKINTOテクノロジーズでフロントエンドを担当しているイケダがお送り致します。最近はKINTO ONEの開発運用や新規サービス・プロジェクトの立ち上げなどをしています。 自己紹介もそこそこに前置きへ。 前置き 昨今、React / Vue.js / AngularJS / Preact / Ember など様々なJSフレームワークが台頭しています。ここ最近ですとSvelteとSolidの勢いがありますね。(個人的にMithril.jsにもっと伸びてほしい)もっと知りたい方はこちらへ https://mithril.js.org/ その中でも今回はKINTOのコーポレートサイト、KINTOテクノロジーズのコーポレートサイト、そして現在進行しているプロダクトでも採用しているSvelteを使用してみての所感、そして簡単なSGまでのコードを紹介したいと思います。 本記事で紹
AppleやNetflixなどの大企業も使用するオープンソースライブラリ「core-js」をたった1人で維持する開発者が「もう限界だ」と支援を求める
オープンソースのJavaScriptライブラリである「core-js」は、古いブラウザでもJavaScriptの最新機能を使えるようにするPolyfill(ポリフィル)として強い人気を誇り、オープンソースのJavaScriptトランスコンパイラであるBabelにも組み込まれています。AppleやNetflix、Spotify、Pornhubといった大企業を含む多くのウェブサイトに利用されている「core-js」のメンテナンスをたった1人で行う開発者のDenis Pushkarev(zloirock)氏が、ついに家族を養えなくなったとして支援を求める記事をGitHubで公開しました。 core-js/2023-02-14-so-whats-next.md at master · zloirock/core-js · GitHub https://github.com/zloirock/cor
[JavaScript] 全角⇔半角の変換を行う（英数字、カタカナ） - YoheiM .NET
数字、アルファベット、カタカナの全角半角変換は、JavaScriptで簡単に実現できます。今日はその実装方法をブログに書きたいと思います。 目次 全角 → 半角（英数字） function hankaku2Zenkaku(str) { return str.replace(/[Ａ-Ｚａ-ｚ０-９]/g, function(s) { return String.fromCharCode(s.charCodeAt(0) - 0xFEE0); }); } // 使用例 hankaku2Zenkaku('１２３ａｂＣ'); // '123abC' 文字コード上で、全角英数字から65248引くと半角英数字になります。 また、処理範囲を正規表現で[Ａ-Ｚａ-ｚ０-９]と指定していますが、例えば[０-９]とすれば、変換対象を全角数字に限定できます。 半角 → 全角（英数字） function zenka
![[JavaScript] 全角⇔半角の変換を行う（英数字、カタカナ） - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/dbec39511484605c4f0be7445cdfbc5af43b3c85/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2Fme.jpg)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
オブジェクトのクローンにJSON化を使う時代は終わった！【JavaScript】 - Qiita
const Hoge: React.FC<Props>=()=>って書いてたら思考停止系と言われたので調べた
こんな文章を書き始めた理由｜こわくない関数型プログラミング