Web屋がJavaScriptでゲームを作ってSteamで配信するまでの道のり - Qiita
そもそもなぜSteamで公開するのか この記事ではSteamにフォーカスしましたが、実際はこのゲームはWeb上から直接遊べるし、WebViewでラッピングしてGooglePlayにも公開しています。 SteamとGooglePlayに出した最初の理由は、大きなプラットフォームの力を借りて集客するためです。 LPだけオープンして待っていたとこで誰も遊びに来てはくれないわけです。 なので正直、「Webブラウザで遊べるのに、集客のためだけにわざわざダウンロードしてもらうなんてアホくさいな」、と思っていました。 しかし今となっては、むしろSteam経由で遊んでもらいたい思いのほうが強いです。 Steamのストアに並ぶことは思っていたよりも嬉しくて、 例えるなら、小説を書いたとして、今まではコピー用紙に印刷してホチキスで止めたものを皆に配っていましたが、 今回はちゃんと本になって、カバーがついて、書
CSS Modulesの歴史、現在、これから - Hatena Developer Blog
マンガメディア開発チームの id:mizdra です。半年ほど前から「フロントエンドエキスパート」という肩書きをもらい、社内でフロントエンドの啓蒙活動をしています。具体的にどんな活動をしているかについては、社内のポッドキャストで少し話しましたので、興味があれば聞いてみてください。 developer.hatenastaff.com 最近、私はReactを採用する社内プロダクトでのCSSの書き方を検討していました。最終的にそのプロダクトでは、CSS Modulesを採用するに至りました。しかしその過程で、CSS Modulesのメンテナンス体制に対して懸念があり、将来的な存続を危ぶむ声が界隈にあることを知りました。 ただし、実際にメンテナンス体制について調べてみたところ、万全ではないものの引き続きメンテナンスがされていて、使用もできることが分かりました。そこで、今回はCSS Modulesに
GSAP入門 - アニメーション制作のための高機能なJSライブラリ（前編） - ICS MEDIA
JavaScriptライブラリの「GSAPジーサップ」はウェブサイトのモーション制作に役立ちます。GSAPは高機能であり、実行性能が良好で、互換性も高い利点があります。 始点と終点の間を補間することでモーションを実現することは「トゥイーン」と呼ばれます（Betweenが語源のFlash用語）。トゥイーンの機能を提供するJSライブラリは多くの種類が存在しますが、その中でもGSAPは評判が高く、機能の多さでは群を抜いています。当サイトの記事『トゥイーンライブラリの比較検証』でも、類似のライブラリに比べて性能が高いことを確認しています。 旧TweenMax時代から数えてGSAP利用歴15年の筆者が、GSAPのおさえておくべき最低限の使い方から、現場で役立つテクニックを紹介します。 ▼GSAP公式サイト GSAP入門は前後編の2回にわたり解説します。前編では基本的なGSAPの使い方を中心に説明しま
msw で handler の mock や spy をする - mizdra's blog
元々「ServiceWorker をベースにした技術をわざわざテストに持ち込む意味とは?」と思って、msw をテスト環境で使う意義について懐疑的だったのですが、いざ使ってみるとすごく便利ですね。ServiceWorker 云々以前に、ネットワークリクエストの mock ライブラリとして、インターフェイスがとても使いやすいです。 zenn.dev 特に handler の mock や spy が簡単にできるのが嬉しいです。Jest と組み合わせた時の例だと、以下のようなイメージ。 // jest.setup.ts import { server } from './src/test-utils/msw'; beforeAll(() => server.listen()); afterEach(() => server.resetHandlers()); afterAll(() => ser
ep.128『SolidJSを踏まえて見つめ直すUIフレームワーク』 | UIT INSIDE
@G4RDS が、 @uhyo_ と @AlanGDavalos に、SolidJSの登場を踏まえたUIライブラリの考え方について、話を聞いてみました。 https://www.solidjs.com/ Virtual DOMのないUIライブラリ コンポーネントの記述方法がReactのFunction Componentに似ている Type Narrowingについて https://www.solidjs.com/guides/typescript#control-flow-narrowing @uhyo_ のベンチマークについて Reactに有利なベンチマークを作ってみた https://qiita.com/uhyo/items/35cb243557df5e1a87fc React脳によるUIライブラリ書きやすさランキング https://qiita.com/uhyo/items/ff
Why React Re-Renders • Josh W. Comeau
Filed underReactoninAugust 16th, 2022.Aug 2022.Last updatedoninJanuary 28th, 2025.Jan 2025. IntroductionSo, I'll be honest. I had been working professionally with React for years without really understanding how React's re-rendering process worked. 😅 I think this is true for lots of React developers. We understand enough to get by, but if you ask a group of React developers a question like “What
SPA認証トークンはlocalStorageでもCookieでもない、Auth0方式はいいねというお話 - @mizumotokのブログ
SPA認証トークンをどこに保存するかは論争が絶えません。localStorageやCookieがよく使われますが、Auth0は違う方法を採用しています。この記事では、Auth0のトークン管理の方式を理解でき、トークン管理上のセキュリティへの理解を深めることができます。 SPAの認証トークンをどこに保存するか ブラウザでトークンを保存できる場所 保存場所の比較 メリット・デメリット Auth0のアプローチ トークンはインメモリに保存 OpenID Connect準拠とトークン取得のUI/UXの悪化回避を両立 Auth0のjsライブラリ ログイン アクセストークンの（再）取得 図解 ログイン アクセストークンの（再）取得 自サービス内の認証だけのもっと簡易な構成 ログイン IDトークン取得 まとめ SPAの認証トークンをどこに保存するか React やVueで認証付きSPA（Single Pa
JSでのスクロール連動エフェクトにはIntersection Observerが便利 - ICS MEDIA
ウェブのリッチな表現としてスクロールに応じたエフェクトがあります。これまでJavaScriptのscrollイベントで実装していましたが、Intersection Observer APIを使うとより効率的に実装できます。ブラウザーのサポートも拡充し、今後は標準となる技術でしょう。 ▼スクロールで目次の色が変わるエフェクト 本記事ではIntersection Observer APIの使い方と実践例を解説します。 特定の位置で発火する従来の手法 これまで、特定の位置で発火するイベントにはscrollイベントを使う必要がありました。以下のコードは、あらかじめページ上部からの距離を取得し、スクロール量が規定に達したところで発火させる手法です。 window.addEventListener("scroll", () => { const srollVal = window.pageYOffse
rollup が求めてたものだったかもしれない : (*x).b=z->a+y/c
rollup 使ってみたあるライブラリのコードを見ていて すごく規則的ではあるんだけど無駄が多くて こんなこと手動でするかなぁ？と思うのがありました いかにも機械的って感じですが webpack みたいなバンドルされたものって感じでもなく普通に書いたようなコードです それでも global$1 と global$2 とか人が書かないような部分も多く気になってました その後色々あって rollup がもしかしたらこれかもと思うことがあって 試してみたら正解でした webpack や parcel と違って rollup はライブラリ向いてるとか聞いたことはありましたがその意味はよくわかってませんでした ですが バンドル結果をみればその理由は明らかでした rollup の良いところwebpack や parcel は元のファイルの import/export 処理だけを書き換えてそれぞれを関数
JS のビルドサイズを極限まで絞るための TIPS 集
ビルドサイズ限界まで絞りたい人向け。 あらゆる環境で実践するものではないが、知ってたら簡単に避けることができるのもあるので知っておくと便利なTIPS書いていく。 基本ポリシー 未使用コードはビルド時に全部落とす。 何が未使用コードで、何が定数かわかるようなインターフェースを人間が心がける。 用語 Dead Code Ellimination(DCE) Rollup や Terser で、未使用コードを削除すること
マウスカーソルに反発する!?リペリングエフェクトを取り入れたコードスニペット9選 - Workship MAGAZINE(ワークシップマガジン)
インタラクティブなエフェクトにもさまざまな種類があります。今回ご紹介するのは、マウスカーソルから粒子や線が逃げ出すような動きをする「リペリング（反発）エフェクト」。 この記事では、リペリングエフェクトを作品として落とし込んだコードスニペット9選をご紹介します。 1. Repeling Lines 一見するとギターの弦のようですが、カーソルをあわせるとその部分の線が曲がり、円形の空白ができます。 ぜひ右側のオプションパネルから、エフェクトを調整してみてください。円の半径や線の数、線の間隔などが変更可能です。自然な動きが実現されていますね。 See the Pen Repeling Lines by Daniel Velasquez (@Anemolo) on CodePen. Repeling Lines 2. 30,000 Particles 3万個もの粒子がぎっしりと詰まった、象徴的なス
React手抜きテクニック集
formやinputを非制御で最も簡単に使う方法 useStateやuseRefを使わずに、最小限の記述でフォームに入力したデータをとることが出来ます Reactの公式ではvalueプロパティを使って制御する形を推奨しています しかしvalueに対応するsetStateが上位の層にいると、テキストを入力するごとに下位コンポーネントの再評価が行われ重力地獄に落ちることがあるので、特段の理由が無ければ私は非制御を推奨します 重力地獄はmemo化で対処は出来るといえば出来るのですが、それなら最初から余計な動きをさせないのが一番です また、リアルタイムなバリデーションチェックはsetStateに関係なく、onChangeイベントで入力内容のチェックが可能です const Form = ({ onSubmit }: { onSubmit: (value: string) => void }) =>
JSで西暦1年1月1日が何曜日か求める
この記事はCybozu Advent Calendar 2021の21日目の記事になります。 Cybozuにも関係なければなかなかニッチな内容の記事ですが、アドベントカレンダーということでカレンダーにまつわるテーマにしました。 ということで果たして需要があるのかは謎ですが、古い日付の曜日を正しく取得する方法について考えていきます。 突然ですが、西暦1年1月1日が何曜日かJSで求めるにはどうしたら良いでしょうか？ 忙しい人のためのまとめ 西暦1年1月1日は日曜日です。 ポイントは 改暦を考慮してユリウス暦で求める ツェラーの公式を使うと簡単に求められる さらに、閏年のミスを考慮に入れる ... getDay まずはシンプルにDate.prototype.getDay()を使って求めてみます。 const firstDay = new Date(1,0,1); const day = firs
Reactで超簡単な画像ビューアを作る - FileReader - Qiita
import React, { Component } from 'react' import { render } from 'react-dom' class App extends Component { state = { file: "", imagePreviewUrl: "" } handleFileChange = (e) => { e.preventDefault() let reader = new FileReader() let file = e.target.files[0] reader.onloadend = () => { this.setState({ file: file, imagePreviewUrl: reader.result }); } reader.readAsDataURL(file) } render() { console.log("i
JavaScript FileAPIについて学ぶ - Qiita
FileAPIとは？ ローカル（自分のパソコン内）にあるファイルを、JavaScriptを用いて操作することのできるAPI。例えば、自分のパソコンの中にある画像をブラウザ上(ChromeやSafariなど）に表示させたり、そのブラウザ上で画像を編集できたり、またそれをダウンロードしたりすることも可能。 FileAPIの使用方法 １HTMLでファイル選択ボタンを作成する まず、以下のようなファイルを選択するためのボタンを用意する。 そのためには、inputタグを用意し、typeを「file」に設定する。複数の画像を選択できるようにするには、追加で、「multiple」 属性を追加する。 <!-- 画像を選択するボタン --> <input id="input-file" type="file"> <!-- 複数画像を選択可能にする場合 --> <input id="input-file" t
Geoライブラリ | GeoDjangoではじめる地理空間情報
* OSGeo財団 (The Open Source Geospatial Foundation) * https://www.osgeo.jp/地理技術及び地理データの共有化を推進する非営利の非政府 地図表示するためのJavaScriptのオープンソースライブラリとして「OpenLayers」と「Leaflet.js」が代表的である。 Google Maps JavaScript APIも地図表示するためのJavaScriptのライブラリである。
JavaScriptで動画を撮影する方法【デモ動画あり】
この記事について この記事ではJavaScriptから MediaStream Recording API を利用して動画を撮影する方法について紹介します。この記事の関連リソースを下記に示します。 デモ デモ動画 ソースコード おおまかな手順 おおまかな手順を下記に示します。 コーディングの準備 コーディング 動作確認 コーディングの準備 下記のコマンドを実行してコーディングの準備をします。 コーディング index.html エディタでindex.htmlを開き、下記の内容を入力します。 main.js エディタでmain.jsを開き、下記の内容を入力します。 ポイントを下記に示します。 動画を取り込むためのメディアストリームを取得します。 video/webm形式での録音が可能かどうかを確認します。 メディアレコーダーを作成します。 mediaRecorder.startメソッドを呼び
All the user-facing states
I find myself needing a reference like this more often than not lately. So, here’s a blog acting as augmented memory—I’ll update it as I encounter more user-facing states in the wild. What user-facing state is User-facing state is what someone experiences when they interact with (or try to interact with) an element in some capacity. It is reactive, helping to communicate the ways in which somethin
Unhandled Rejection の考え方 - from scratch
はじめに twitter 上で議論になっていたネタを本人の許可を得て記載しています。 Node.js でだけ発生する非同期関連の謎現象を発見した🤔 複数回連続で、非同期処理を挟んだ関数から返した非同期関数を、非同期に実行すると allSettled で待ち受けされずにその場で例外が発生する。 これはバグなのかな...https://t.co/w5C9wKEAOA pic.twitter.com/y3pz4ajndF— shqld🦭 (@shqld) January 4, 2022 実はこの話は会社の中でも一回議論になったネタなんですよね。僕も microtask と呼ばれる Promise キューイングの仕組みとイベントループでタスクをハンドリングする仕組みの両方が組み合わさった時に Unhandled Rejection が起きる理由がわかりにくくなるなーと思っています。誤解していた
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptにセミコロンは入れるのか？入れないのか？ - Qiita
