昔、中学生の頃、BASICでプログラミングの勉強をしていて、何の本かは忘れてしまったんですが、たった1行でじゃんけんの勝敗判定ができる計算式というのが載っていました。「たった1行で勝敗判定ができるなんてすげー！」と思ったものです。どんな計算式だったかは正確には覚えていないのですが、とても短い式でした。 やってる内容もよくわからないままその式を組み込んでじゃんけんゲームを作りました。キーボードからグー・チョキ・パーに対応する数字を入力して、コンピュータには乱数発生させて、その式で勝敗判定、結果を表示するというだけのものでしたが。「なんでこれで判定できるんだろう？」って不思議に思ったことを覚えています。僕にとって「プログラミングって面白いなあ」って思った出来事のうちのひとつでして、未だに思い出すことがよくあります。 ただ、じゃんけんの判定なんてものはそうそう使う機会はないので、ふと「そういえば

おひさしぶりです。この記事はクソアプリ Advent Calendar 2021の13日目です 突然ですが皆さんは「スクロールに合わせてふわっと出てくるwebページ」ってどう思います？　最近多いですよね、あれ。 確かにオシャレだし楽しいしゲームとか作家さんのギャラリーサイトとかなら全然OK。でも情報が欲しくてアクセスしてるページで「ふわっ」ってされるとちょっとイラッとする。 ちょっと？...イラッと？...いや、 許さない、絶対 よろしい、ならば粉砕だ よそ様のサイトを粉砕する都合上、今回の実装はChrome機能拡張です。機能拡張はViteにChrome機能拡張用のプラグインvite-plugin-chrome-extensionを入れて作りました。今回は解説しないけど、これ超楽。フレームワークは無し、言語はTypeScriptです。 とは言え、クソアプリのためにChromeに機能拡張をイ

ちょってぃタワーバトル 弊社キャラクターの「ちょってぃ」を使ったタワーバトルゲームを作りました。(つみあげるだけです) ちょってぃタワーバトル matter.jsとは matter.jsはJavaScriptで扱える2Dの物理演算エンジンです。重力があったり物体の当り判定ができます。公式では多くのデモが紹介されています。 今回はこの物理演算を用いてタワーバトルを実装したときのTipsを紹介します。 実装時のTips 環境 Vite v4.4.9 matter.js v0.19.0 オブジェクトの生成 オブジェクトは重力によって下に落下します。 床のような固定されているオブジェクトを生成するときはisStaticをつけてあげます。

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では配列を非破壊で操作できるメソッドが追加されています。非破壊とは、元の配列を変更せ

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]

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 配列を破壊せずに操作するメソッドを追加します。 既存の配列操作メソッドは、変更後の値を返すと同時に元の値も変更してしまいます

あなたがウェブサイトやアプリケーションを開発しているとき、高頻度で発火するイベントにどう対応すればよいか考えたことはありますか？この記事では、その問題を解決するためのdebounceテクニックについて紹介します！ 目次 debounceとは？ debounceのメリット JavaScriptでのdebounceの実装 使用例と応用 まとめ 1. debounceとは？ debounceは、高頻度で発火するイベント（例: ウィンドウのリサイズ、キー入力など）を制御するためのテクニックの一つです。このテクニックを使うと、特定の時間間隔内に再度イベントが発火しなかった場合にのみ関数を実行することができます。 2. debounceのメリット パフォーマンスの向上: 不要な関数の実行を抑制することで、アプリケーションのパフォーマンスを向上させることができます。 APIのコスト削減: ユーザーの入力

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

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

はじめにタイトルは若干煽りですが、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を使う場合でも

const obj = { hoge: [new Date(2023, 3, 12), 1], fuga: 'foo' }; const objClone = structuredClone(obj); // ディープコピー obj.hoge[1] = 10; console.log(objClone.hoge[1]); // 1 objClone.hoge[0].setFullYear(2050); console.log(obj.hoge[0].getFullYear()); // 2023

Shopifyを利用したECの構築・アプリ開発や、高セキュリティのホスティングサーバーを内包したCMSを提供。数多くの実績をベースとした運用支援やECのプランニングなど、進化し続けるWebに最適なソリューションを提案します。

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 : データのバインディング

VTeacher所属のSatokoです。 QAエンジニアとフロントエンドエンジニアを兼任しています。 2006年、まだホリエモン率いるライブドア(現LINE)のモバイルチーム(現LINE出澤社長がリーダー)に配属も、同年1月にライブドアショックがあって出社0日で失職。その後、サイバーエージェントやGREEなどを転々としてきたITバブルの残党(ナイスミドル系エンジニア)です😅 1.久しぶりにReactのプロジェクトに参加 リズミカルにキーボードを　タタンッ！　として、

関数型プログラミングは全部理解しようとすると難しいですが、簡単な部分の中にも有用な知見がたくさんあります。 関数型プログラミングにまだ親しんでいない人向けに、明日からのプログラミングにすぐ役に立つ考え方をできるだけわかりやすく伝えます。

待望の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は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は同じ開発者によって開発が行われているというこ

こんにちは！ラクス１年目のkoki_matsuraです。 今回は掲示板アプリ作成を通して、SvelteKitの基礎的な部分をご紹介させていただきます。 目次は下記のようになっています。 はじめに Svelteとは SvelteKitとは 掲示板アプリ作成 アプリの概要 環境構築 SvelteKit データベース Prisma テーブル作成 ルーティング作成 新規登録画面 ログイン画面 スレッド投稿画面 スレッド一覧画面 スレッド詳細画面 ログアウト機能 エラー画面 終わりに はじめに Svelteとは WebアプリケーションやUIを構築するためのJavaScriptフレームワークです。有名なものでは「React」や「Vue」が挙げられます。 Svelteにはこれらのフレームワークと比べて下記のような特徴があります。 仮想DOMを用いない こちらが最も大きな特徴となります。 まず、仮想DOM