[B! blog][js] moritataのブックマーク

moritata id:moritata

blogとjsに関するmoritataのブックマーク (17)

モバイルアプリ上の WebAssembly 製ライブゲームで発生した例外を捕捉して計測する - Mirrativ Tech Blog
こんにちは、エンジニアのちぎら(@_naru_jpn)です。ミラティブでは、配信中のゲームに視聴者が介入できるゲームとライブ配信が融合した次世代のゲーム体験を提供しており、この体験をライブゲーミングと呼んでいます。ライブゲーミングは、Unity から WebGL 向けにビルドされた WebAssembly 製のゲームを、アプリに配置したウェブブラウザ上で動作させることによって実現しています。*1 今回は UnityでモバイルWebGLゲーム開発を頑張る話の﹁メモリリークによって発生するクラッシュ﹂にも書かれているような、捕捉は難しいがユーザー影響があるような例外の発生を捕捉して、計測をするための仕組み作りについて解説をします。ライブゲームが動作する仕組み例外を捕捉することを考える前に、ライブゲームがどのように動作しているのかを知る必要があります。 Unity の WebGL 向
moritata 2024/03/18
android

IOS

blog

Unity

js
リンク
Next.js Conf 2022で最も感動したライブラリ、vercel/satoriについて紹介させてください。 - Commune Engineer Blog
はじめまして。コミューンでサーバーサイドエンジニアとして働いています、あのちっくと申します。突然ですが皆様は昨年10月に開催されたNext.js Conf 2022はご覧になられましたでしょうか。 Next.js Conf は Next.js の開発・メンテナンスを行っている Vercel 社が主催する、Next.js とその周辺技術に関するカンファレンスです。コミューンでもメインプロダクト commmune の Web フロントフレームワークとして Next.js を採用しており、私個人としてもとても興味深くオンラインから視聴をしていました。特に話題になったのは、React Server Components をサポートしたルーティング・レイアウトシステム"app directory"などの新機能を新たに追加したNext.js13と、"Webpack の後継"を謳う Rust
moritata 2023/01/25
ライブラリ

画像

blog

js

engineer
リンク
XMLHttpRequest とはなんだったのか | blog.jxck.io
Intro FetchAPI の実装が広まり、IEもリタイアを迎えたことで、今後忘れ去られていくことになるだろう XMLHttpRequest について。どのように始まり、どのように広まり、どのように使われなくなっていくのか。その間に残した多大な功績を残す。 XMLHttpRequest の始まりこの名前は非常に長いため、通常 XHR と略される。この API は、現在の Web API のように W3C/WHATWG による標準化を経て策定された API ではない。 Microsoft によるいわゆる独自実装の API として始まり、後追いで標準化される。したがって、 Web API の中でもかなり異質な命名である XHR が、 XmlHttpRequest でも XMLHTTPRequest でもなく XMLHttpRequest である理由も、 Microsoft の命
moritata 2022/10/02
ajax

blog

js

ブラウザ

web
リンク
hi18n (i18nライブラリ) の紹介 (1) 設計思想と基本方針 | Wantedly Engineer Blog
hi18nとはhi18n は現在Wantedlyで開発中の、TypeScript/JavaScript向け翻訳テキスト管理ライブラリ (i18nライブラリの一種) です。本記事ではhi18nの重要な設計上の判断やその背景について説明します。 GitHub - wantedly/hi18n: message internationalization meets immutability and type-safety Installation: npm install @hi18n/core @hi18n/react-context @hi18n/react npm install -D @hi18n/cli # Or: yarn add @hi18n/core @hi18n/react-context @hi18n/react yarn add -D @hi18n/cli Put the
moritata 2022/05/24
ライブラリ

blog

engineer

javascript

設計

js

i18n

react
リンク
個人的 Web フロントエンドスキルの獲得方法 - mizdra's blog
ここ2年くらいの話なのですが、仕事で﹁フロントエンド会﹂というチーム内委員会のようなものを立ち上げて運営しています。元々1人の Web フロントエンド職人がプロダクトの Web フロントエンドの面倒を見ていたのですが、その方が異動されることになったので、残った人で面倒を見ていける体制を作りましょう、というモチベーションで発足した会でした。この話については以前イベントで発表したので、詳しくはこのスライドをご覧下さい。 speakerdeck.com Web フロントエンド職人の異動とともに入社した id:mizdra が Web フロントエンドが得意だったので、ペアプロやペアオペ、定例会などを通じてどんどんスキルや知見を配っていく、という戦略で運営していました。実際に2年経過してみてメンバーも徐々にキャッチアップしていって、ちょっとしたパフォーマンス改善をやってみたり、最近 Gulp や
moritata 2021/12/31
web

情報

blog

js
リンク
フロントエンド強化月間 - 開発する上で知っておくべき知見を共有しよう結果発表🚀 - Qiita Blog
こんにちは、Qiita運営スタッフです。4月26日︵月︶より開催中の記事投稿イベントフロントエンド強化月間 – 開発する上で知っておくべき知見を共有しようへのたくさんのご参加、誠にありがとうございます！今回のイベントでは、合計169名の方にご参加いただき、69本もの記事が投稿されました！ご投稿いただき誠にありがとうございます🎉 フロントエンドライブラリの紹介や、パフォーマンス向上テクニックなど、開発体験、ユーザー体験を向上させるような記事を多数ご投稿いただくことができました。今回はご投稿記事の紹介とLGTM数ランキングを発表いたします！Qiita運営ピックアップ記事たくさんのご投稿の中から、Qiita運営がおすすめ記事をピックアップしました！まだ記事を確認できていない方はご参考にしてみてください！ざっくり、フロントエンド開発のためのバックエンドサービスを整理するby
moritata 2021/06/10
Qiita

開発

note

blog

js

css

development
リンク
AngularJSからVueへの置き換えを8ヶ月やってみて得られたこと - ANDPAD Tech Blog
開発部の横溝です。昨年、弊社ANDPADの機能﹁施工管理﹂をNuxt化するプロジェクトが始動し、停止しました。﹁停止﹂というと残念な感じがするので、充電期間に入ったと言い直しておきます。﹁Nuxt化するプロジェクト﹂とは？背景改めて、この記事についてNuxt化が始動して、停止した話まず、エンジニアがそれを﹁やりたかった﹂Nuxt化のはじまり停止いま、Nuxt化のリポジトリはどうなっているかプロジェクトの恩恵残された課題さいごに追記(2021.03.12) ﹁Nuxt化するプロジェクト﹂とは？ 2020年3月~2020年11月に実施した、レガシーコードをリプレイスするプロジェクトです。前述の﹁施工管理﹂は、社内でも特に昔からある機能なのですが、フロントエンドに、主にRubyonRails︵slimテンプレート︶+ AngularJSを利用しています。それを、
moritata 2021/03/11
js

rails

開発

blog
リンク
Pythonスキーマバリデーションライブラリ比較 (pydantic, marshmallow, attrs, cerberus) - Attsun blog
Pythonスキーマバリデーションライブラリ比較 (pydantic, marshmallow, attrs, cerberus) ウェブAPIの作成など、外部からやってくるデータを安全に捌く上で、スキーマ定義とバリデーションは非常に重要です。また、特にPythonのような動的型付け言語において、内部でもレイヤをまたぐ場合はきちんと定義されたデータモデルを利用することで、知らない間にデータモデルが変わっていた、というようなケースを防ぐことができます。 Pythonには標準でスキーマバリデーションライブラリがないため3rdパーティのものを使うことになりますが、様々なライブラリがあるので比較してみました。比較対象のライブラリ概要※Pythonバージョンは3.9.0を利用します。 lib versionGithub Star (2020/1/5)memo
moritata 2021/01/17
python

ライブラリ

blog

api

js
リンク
2020年やったこと、考えたこと、触った技術のまとめ - mizchi's blog
今年の本業は、 3rd party script で、そこから呼ぶウィジェットを最適化するコンパイラを書く、その仕様を考えて、実装するという感じだった。要は Google Analytics と、最適化コンパイラ付き GTM みたいなものを作っていた。その内容は以下に書いた。サードパーティスクリプトの極限環境向け Svelte パフォーマンス改善に Core WebVitals という大義名分を得た今年は、パフォーマンスのエンジニアをやっていた、と思う。サードパーティスクリプトの配信を生業にする会社のエンジニアとしては、来年の Core WebVitals というパフォーマンス関連の大きな変化で、波にのってやりたいことがやれたと思う。 Core WebVitals の導入で実際にどれぐらいの影響がでるか不明だが、パフォーマンスが SEO に影響する、というのは、若干やりすぎと思いつ
moritata 2020/12/29
技術

まとめ

blog

js

エンジニア
リンク
自作コンパイラをブラウザ上で動かす | κeenのHappy Hacκing Blog
このエントリは言語実装 Advent Calendar 2020の1日目の記事です。次はsisshiki1969さんで﹁RustでつくるRuby、その後の進捗﹂です。 κeenです。昔からちまちま作ってるSML処理系をブラウザ上で動かすことができたのでその進捗報告です。ちまちま作ってるSML処理系とはこれのことです。 KeenS/webml: A Standard ML Compiler for the Web 今回実装したオンラインコンパイラは以下で試すことができます‥ WebML Online Compiler まあ、ブラウザで動くのでここに貼ることもできるんですけどね。こういうのどうやって作ったの？っていうのを話していけたらなと思います。設計そもそもの話、WebMLはブラウザで動かすために設計、実装されています。スタートから違うじゃんと思うかもしれませんが、スタートから
moritata 2020/12/07
ブラウザ

ライブラリ

blog

browser

js

rust
リンク
Vuex ストアに TypeScript の型を付ける（2020年12月版） - STORES Product Blog
業務委託で STORES の開発をしている @inouetakuya です。下記の記事︵2020/09/14︶にあるように、STORES では TypeScript の導入を進めています。プロダクトに途中から TypeScript を導入した話 - STORES Tech Blog現状、新規に記述するコードについては TypeScript で書いていっているのですが、既存のコードではまだ JavaScript のままになっているものも残っています。今回の記事ではそれらの既存のコードのうち、Vuexストアに関するコードをどのように TypeScript で書き換えていったかをお伝えしたいと思います。環境対象とした環境は下記のとおりです。 TypeScript v3.9.7 NuxtJS v2.14.5 Vue.js v2.6.12 Vuex v3.5.1 Vuex Type H
moritata 2020/12/02
さ

ライブラリ

blog

tech

js
リンク
Next.js + esa.io + VercelでJAMStackな爆速ブログを構築する - パンダのプログラミングブログ
追記: 本記事がesa.ioの公式Twitterに取り上げられました！ esaに書いた記事をNext.jsで公開する Next.jsのバージョン9.3から、ビルド時に外部ソースからデータを取得するgetStaticPropsというAPIが公開されました。ブログは静的なコンテンツです。ブログの内容はユーザーに応じて動的に変わるということはありません。そして、getStaticPropsは静的なページを構築するために最適なAPIです。そこで、esaにmarkdownで書いた記事をNext.jsで表示するサイトを構築しました。実際にサイトにアクセスして記事を開いてみてください。爆速で遷移するのが体験できます。Lighthouseの成績もバツグンです。︵blog-starterをベースに利用したため、コンテンツはそのレポジトリの内容を踏襲しています︶デモサイトのコードはGitHubにアップ
moritata 2020/05/25
js

ブログ

blog

api

プログラミング
リンク
俺の webpack.config.js-20200503 - mizchi's blog
基本思想とにかく薄く。必要なものだけ。基本は ts-loader を transpileOnly: true で使うだけ。最悪これだけでいい。型チェックはIDEか yarn tsc -p . --noEm it でやる。 CRA や parcel は使わない。暗黙な振る舞いが多すぎるので。一切勉強したくない人はいれていいと思うが、その場合 eject しない、dist ディレクトリをそのまま使うこと前提。 style-loader/css-loader は外部CSSを読むときに設定する worker-plugin はなくてもいいけど、 worker もビルドしたいことが多いので、入れていることが多い html-webpack-plugin と webpack-dev-server 組み合わせると、他と組み合わせずに完結して動く。このHTMLを本番で使わずとも、デバッグで使ってることが多いの
moritata 2020/05/03
blog

config

js

dev

css
リンク
Next.jsアプリケーションを動かす環境をaws-cdkを使って構築する(with CloudFront/S3/Fargate) - $shibayu36->blog;
Next.jsをproduction環境で使うために外観を掴んでおきたいと思い、Next.jsアプリケーションを動かすAWS環境をaws-cdkを使って構築するサンプルを作ってみた。だいぶ荒削りだけど、参考になる例にはなったと思う。 https://github.com/shibayu36/nextjs-on-ecs 利用した技術 AWS CloudFront S3 ECR ECS aws-cdk Docker Next.js + TypeScript 今回作ったアーキテクチャ全てのリクエストをCloudFrontに通すフルCDNアーキテクチャフルCDNアーキテクチャ実験 / Minami Aoyama Night #1 - Speaker Deck フルCDNアーキテクチャでサービス設計した話 - Speaker Deck next buildで生成した静的ファイルはS3から配信
moritata 2020/02/26
aws

js

blog

docker

deploy

next.js

container
リンク
React, Redux, GraphQLを学べるオンライン教材「Full Stack Open 2019」がとても良かった - FRTKL
この記事はコネヒト Advent Calendar 2019の11日目の記事です！qiita.com はじめに半年ほど前から新規事業のチームで仕事するようになり、主な技術スタックもPHPからGo, Next.jsへと変わりました。その中で、特にフロントエンドのテスト周りにおいてキャッチアップ不足を感じていたのですが、たまたま見つけた*1﹁Full Stack Open 2019﹂という教材がとても良かったので紹介したいと思います。﹁Full Stack Open 2019﹂とは fullstackopen.com フィンランドのヘルシンキ大学で実際に使われているテキストベースのオンライン教材です。 Nodeで作られたREST APIとReactを使ったSPAの実装を通して、React・Redux・Node.js・Mongo DB・GraphQLが一度に学べる教材となっています。教材
moritata 2019/12/11
blog

テスト

js

api

react
リンク
【2019年版】バックエンドエンジニアが React でモダンなフロントエンド開発を始めるまで - Feedforce Developer Blog
id:daido1976 です。入社してからあっという間に1年が経っていました。直近3ヶ月ほどプライベートでフロントエンド開発の勉強をしていたのですが、ここ数年で CSS の Grid や React の Hooks が新しく導入されたことなどもあり、少し古いコンテンツだと教材として役立たない1 と感じることが多かったので、本記事では私が実際にやってみた中で 2019年時点でオススメできると判断した教材や学び方を皆さんにご紹介したいと思います。はじめにやったこと JavaScript MDN の JavaScript の部分を読む & 手を動かす JavaScript Primer を読む YouTube 動画で Promise を学ぶデバッグ方法を学ぶ React React 公式のチュートリアルを2周する egghead.io の動画で Redux を学ぶヘルシンキ大学の
moritata 2019/09/05
開発

ruby

rails

blog

js
リンク
Vue.js + Elelment UI + Lottieでお手軽にいい感じなUI/UXを作ってみる - SMARTCAMP Engineer Blog
デザイナー兼エンジニアの葉栗です！スマートキャンプでは以前からWebフロントエンド開発にVue.jsを取り入れています。 Vue.jsなどコンポーネント指向のフレームワークは、UIフレームワークも豊富で、お手軽にリッチなUIが構築できるのでいいですよね。今回は私のお気に入りの、Vue.js + Elelment UI+ Lottie というライブラリを使って、数十分でできる簡易的なログインページを作ってみようと思います。 0から構築をはじめて、レイアウト設計、ElementUIで実装、Lottie組み込み、完成といった感じで詳しく説明していきます！完成画面 😊 使用技術 Vue.js Element UILottie︵ロッティー︶実装します！事前準備 Vue CLIをインストールプロジェクトを作成ElementUIをインストールログイン画面を作成不要コードの削除コ
moritata 2019/04/19
js

app

engineer

blog
リンク
1