M5StickC PLUSでミニゲームを動かそうとして久々にC言語と格闘 - ABAの日誌
JavaScriptのゲームライブラリcrisp-game-libで量産したミニゲームを、PCやスマホだけでなくて、何か小さなデバイスでも遊んでみたい。そう思って、移植性の高いC言語でライブラリを再実装してみている。 画面とボタンが付いていて入手が容易な小さなデバイスとして、まずはM5StickC PLUSで動かすことを目指してみた。いまのところ、まだ機能は限定的だが、いくつかのゲームが動くようになってきた。 SURVIVOR PIN CLIMB 小さなデバイス向けと言いながら、ブラウザでも遊べるようにしてある。C言語で書かれたゲーム本体やライブラリを、EmscriptenでビルドしてWebAssemblyファイルを生成し、JavaScriptのラッパを通じて動かしている。 デバイス依存で実装しなければいけない関数は、machineDependent.hに定義してある。M5StickC P
4KBのJavaScriptだけで動く可愛いアクションゲームを作ったのでソースと解説 - Qiita
年イチでちょっとしたブラウザゲームを作ってます（→ 去年）。今年はそこそこ遊べる可愛いアクションゲームを4KB以内で作ってみました。 🎉宣伝させてください！ 🐱今年も無事、猫の日ゲームができました！https://t.co/XnDD8AXx4k 今年は可愛さはそのまま、限界までコードを削って4KBにおさめました。PCの方はソース表示して見てみてね pic.twitter.com/j0QqH6iSSn — ゆき (@yuneco) February 20, 2022 作ったもの：ブラウザで動く4KBのゆるかわアクション URL： https://yuneco.github.io/mezashi-4kb/ ソース： https://github.com/yuneco/mezashi-4kb つまりどういう...コト？ index.htmlという名前のファイルを作って下のコードをコピペする
[React]ContextAPIのアンチパターン
ContextAPI と useState は本来組み合わせてはいけない ContextAPI の機能は、コンポーネントの階層を飛び越えてデータを配信することにあります。しかしここで気をつけなければならないのが、Provider に設定する値を useState で管理すると、Provider を持っているツリーが全て再レンダリングされることです。この書き方は最悪のアンチパターンです。 アンチパターン Provider に渡す値を更新をするのに上位のコンポーネントの useState のディスパッチャーが使用しています。どれか一つでも値を更新すると、全てのコンポーネントが再レンダリングされます。ContextAPI での解説などでこの方法をよく見かけます。しかし値一つの変更で全てを再レンダリングするなら、状態管理の必要性そのものが無くなってしまいます。これはやってはならない書き方です。 i
![[React]ContextAPIのアンチパターン](https://cdn-ak-scissors.b.st-hatena.com/image/square/272a515da385a1f469e3be36a2c50fa6ade78082/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--bZLUf-z---%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BReact%25255DContextAPI%2525E3%252581%2525AE%2525E3%252582%2525A2%2525E3%252583%2525B3%2525E3%252583%252581%2525E3%252583%252591%2525E3%252582%2525BF%2525E3%252583%2525BC%2525E3%252583%2525B3%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3A%2525E7%2525A9%2525BA%2525E9%25259B%2525B2%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2VlZTgzMDYyMDQuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
25 年に渡る JavaScript の歴史 | JetBrains: プロデベロッパーとチーム向けの開発ツール
SpaceX Dragon の発射により、JavaScript が宇宙へと旅立つ！Dragon 2 のフライトインターフェースは Chromium と JavaScript を使って構築された。フライトコンピューターには C++ が使用されている。 SpaceX Dragon の発射により、JavaScript が宇宙へと旅立つ！Dragon 2 のフライトインターフェースは Chromium と JavaScript を使って構築された。フライトコンピューターには C++ が使用されている。
RustではじめるWebAssembly入門～JavaScriptを超える高速なWebアプリ開発を実践しよう
本連載では、Webブラウザー上でJavaScriptとともに動作できるバイナリ形式のプログラムファイル「WebAssembly」を、Rustプログラミング言語で実装する方法について、順を追って説明していきます。初回となる今回は、WebAssemblyの概要を説明するとともに、Rustを利用した簡単なサンプルで、実装方法のイメージを紹介します。 はじめに 現在、Webフロントエンド開発においては、ページ構造を表すHTML、スタイルを表すCSSとともに、挙動を実装するためにJavaScriptが利用されます。JavaScriptの登場当初はWebページに動きをつける程度の扱いでしたが、その後の言語仕様の拡張や、WebブラウザーでのJavaScript実行速度の向上、Node.jsなどWebブラウザー以外でJavaScriptを動作させる環境の登場などにより、本格的なプログラミング言語としてその
JavaScript の Class Static Blocks について
この記事では現在 Stage 3 の Class Static Blocks について解説する。 なお、まだ現時点で Stage 3 であるため実装状況や細かい仕様は今後変更される可能性がある。 概要 Class Static Blocks プロポーザルは、クラス内でスタティックなメンバにアクセスできるブロックの構文を導入する。 次のコードの static { から始まるブロックが新たに導入される構文である。このとき、スタティックブロック内のthis.fooはスタティックなメンバである。 class C { static foo; static { this.foo = "foo"; } } スタティックブロックはクラスCが評価されるタイミングで実行される即時実行関数のようなものと見ることもできる。また、クラスは複数のスタティックブロックを持つことができ、その場合は上から順に実行される。
WebRTC を今から学ぶ人に向けて
この資料には宣伝が含まれます ライセンス Creative Commons — 表示 - 非営利 - 改変禁止 4.0 国際 — CC BY-NC-ND 4.0 内容 これから WebRTC を学ぶ人が何を学ぶべきで、何は学ばないべきなのかを書く。定期的に更新していく。 趣味で学びたい人はターゲットに入っていません、仕事で利用する場合のみがターゲット。 まとめ 急がば回れで、W3C の資料を理解できるまで読み込む。 下手にフレームワークに依存したりして簡単な仕組みを覚えてしまうと後からツライ。 Media Capture and Streams WebRTC 1.0: Real-Time Communication Between Browsers Identifiers for WebRTC's Statistics API 作って学ぶも良いが、まずは出てくる単語などの意味を理解できるの
Oracle Database 21c正式版が登場。データベース内でJavaScript実行可能、改ざんできないブロックチェーンテーブルなど新機能
Oracle Database 21c正式版が登場。データベース内でJavaScript実行可能、改ざんできないブロックチェーンテーブルなど新機能 米オラクルは、最新のデータベースソフトウェアとなる「Oracle Database 21c」正式版を発表しました。 Oracle Databaseのバージョン番号は、2017年に発表された「Oracle Database 18c」から西暦を基にしたバージョン番号となりました。つまり今回発表された「Oracle Database 21c」の21は来年2021年の21から、cはクラウドのcから取られています。 オラクルはOracle Databaseにおいて、マルチデータモデルへの対応やマルチテナントへの対応など、さまざまな機能を集約したコンバージドデータベース（Converged Database）と呼ばれる方針で開発を進めています。 すでにOL
webcomponents/proposals/DOM-Parts.md at gh-pages · WICG/webcomponents
The existing specifications that provide the ability to update DOM update after an initial render are limited. Frameworks can walk the DOM or query for nodes, and use JavaScript APIs to imperatively update attributes, text content, and other JavaScript properties of these nodes. However, the framework code that initially locates DOM that will need to be updated and repeatedly updates that DOM has
preact コードリーディング
preact なんとなく理解した記念ブログです。 もともと React を読むつもりが挫折したので慣れるために preact を読みました。 おかげで仮想 DOM の悲鳴が聞こえるようになりました。 preact とは React の軽量版・サブセットです。 公式では Fast 3kB React alternative with the same modern API. Components & Virtual DOM. と説明されています。 (p)react には、 状態を持て、書き換えも可能である 状態を書き換えるとそれに対応して HTML が書き換わる という特徴があります。 それがどのようにして実現されているのかを見ていきましょう。 前提となる知識 preact のコードリーディングを進める上では VNode というオブジェクトに慣れる必要があります。 これは JSX を仮想 D
C#でテキストエディタエンジンをフルスクラッチで実装してWebAssemblyで動かした話 - Qiita
デモ 以下のリンクから試せます。 https://crash.jp/apps/crash-editor/ 未圧縮版（5MB） https://crash.jp/apps/crash-editor-br/ Brotli圧縮版（2.1MB） 環境によっては表示まで数秒かかります。二回目以降はキャッシュから読み込まれるので、表示に時間はかかりません。 キャッシュはブラウザの開発ツールから削除可能です。以下はChromeの場合。 開発ツール > Applicationタブ > Cache > Cache Storage ※デモを何度か上げなおしているので、エラーになる場合にはキャッシュを削除してみてください 動作環境 WebAssemblyに対応したブラウザが必要ですが、最近のブラウザであればまず問題ないです。 自分で確認した環境 Windows 10 Pro, Chrome/新Edge/Fire
C#大統一理論 - Qiita
C#大統一理論とは CySharpのneueccさんが提唱している理論で、ザックリ言えば サーバーサイドもクライアントサイドもC#で完結できるとよくね？ という理論です。 そして現状サーバーサイドとクライアントサイドの両方で使える言語はC#を除くとJavaScriptくらいだと思います（なんかあったら教えてください） C#でクライアントサイドを作るにはXamarinやゲームエンジンのUnityが筆頭になります。 C#のよさ いろいろありますが、個人的に上げるなら 比較的言語が若く（C++と比較して）、LINQなどモダンな文法仕様が遂次追加されている（というかLINQは単独で良い）。 単純に.NET Coreがクラスプラットフォームで安定して動作する。マイクロソフトが本気を出してるからサーバーサイド、クライアントサイドから機械学習まで使える範囲がめちゃくちゃ広い。 decimalみたいな型ま
emoji selector - yutarobox
2018/9/25 コードブロックの頭とコードブロック中は動作しないようにupdate /foldrr/foldrr.iconさんが作ったものを反映させていただいた /foldrr/emoji-selector-i 不満が残るところの一つだったので非常に嬉しい ありがとうございます！ 導入方法参考 /shokai/UserScript :aaaa:を打つと絵文字（scrapbox上のアイコン）が入力できるようになるUserScript 入力した文字に曖昧マッチングした候補が下に出てくる 上下キーを押して選択しEnterを押すか、クリックすると絵文字の文字列[something.icon]に置換できる 選択 クリック :yutaro: => yutaro.icon 完全に入力すると、自動で置き換える :yuta + Enter => yutaro.icon 入力途中でEnterを押すと一番上
「ネイティブアプリ開発者は絶滅危惧種なのか？」への感想文 - ナカザンドットネット
ポジション MSがRNめっちゃ使ってるという話について Brownfield事例は実質的にネイティブの事例 Skypeの事例ならどうなのか ネイティブアプリ開発者の仕事は減るのか まとめ みんなの反応 Xamarin勢の反応 Cordova勢の反応 iOSネイティブアプリ開発者の反応 jp.techcrunch.com こちらの記事への雑な感想です。感想は私の主観であり、ポジショントークであり、所属する組織の意見とは無関係であることを先に述べておきます。 また「ネイティブ」という言葉に「C/C++などから作られた機械語」という本来の意味に加えて、「プラットフォームの標準言語（WindowsのC#, AndroidのJava, iOSのObj-C）や標準開発ツールである」というニュアンスを含めることをご容赦ください。 ポジション こんな感じのポジションの人です。 中小企業向けにBtoBでアプ
繋がりを可視化する グラフ理論入門｜es
個人的に、一番面白いデータ構造であり探索アルゴリズムです。 ここで言うグラフは円グラフや、棒グラフのことではないです。プログラミングで扱うのは、図のように、点と線を繋げたものです。 ズバリ、人と人の繋がりを表現できます。 今回もJavascriptで実装します。 グラフ理論は、SNSだったり、レコメンドだったり、地図の経路だったり ルーティングだったり、点と点の繋がりを可視化します。繋がりを表現するデータ構造です。 巨大なインターネットもそうです。 そいう意味で、すごく身近なアルゴリズムですよ。 グラフの基本は次の２点で構成されています。 ・ノード：node(vertex) - 点（人、物、場所） ・エッジ：edge - 辺(繋がり、経路) 上の図を見ると一目瞭然ですね。ノードを人だとしたら、エッジが関係性です。まずは、これだけ理解できれば大丈夫です。 ちなみに、方向がない辺を無向グラ
Vim を WebAssembly に移植した - はやくプログラムになりたい
久々のブログです． 6月ぐらいにWebAssembly の仕様をざっくり読んだので，なんか WebAssembly でやりたいなと思って，Vim を WebAssembly に移植してブラウザで動くようにしてみました，という話です． github.com 多分実物を見ていただくのが一番早いので，下記のリンクにアクセスしてみてください． デモページはこちら（下記の注意事項を先にお読みください） 注意 デスクトップ版の Chrome か Firefox か Safari か Edge を使ってください．どうやら macOS では Safari が一番動きが良いです． デモページは全部で1MBほどのリソースを fetch します．モバイルネットワークなどからアクセスする場合はお気をつけください． keydown でキー入力を取っているので，キー入力を横取りするブラウザ拡張などが有効になっていると
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
vite/packages/vite/CHANGELOG.md at v3.0.0 · vitejs/vite
https://twitter.com/yunyundetective/status/1505290944366534658
WebAssembly 1.0がW3C推奨としてブラウザ上でネイティブ動作する第４の言語に