ブラウザで長いループや、重い処理をともなうループを回したいとき、同期的にJavaScriptを実行するとメインスレッドがブロックしてしまうので、ちょっとずつ細切れに分割して実行したい、ということがある。 昨日久しぶりに書いたら新たなパターンと出会ったので、これまでにどう書いてて今回どうなったかメモ。 setTimeoutする 以前(10年前とか)はこんなのをよく書いていた。 itemsがでかいArrayで、console.logがすごく重い処理だとして読んでください。 function iterateHeavyTask(items) { const startAt = new Date(); while (items.length > 0 && new Date().getTime() - startAt < 10) { console.log(items.shift()); } if (
JavaScriptとの戦いの大部分は、undefinedとの戦いです。undefinedはあなたのプログラムに素早く忍び込み、全てを壊していくでしょう。 これはTypeScriptでも避けられません。undefinedになりうる値があれば、繊細なガラス細工に触れるときのように慎重に扱わなければなりません。 そんなundefinedとの戦いの中、ほんのちょっぴり役に立つ文法がJavaScriptに導入されたので、紹介したいと思います。 Optionalな値 コードを書いていると、「入力してもしなくても良い」値を扱いたくなる場合があります。例えば外部からデータをフェッチしてくる関数を作るときには、trueかfalseか未指定（undefined）を指定する「disableCache（キャッシュ無効化）」フラグが欲しくなるかもしれません。 そういったoptional（任意入力）の値を実現しよう
プロジェクトで使われている技術と ESModule の状況について UIT では、 SPA 開発のプロジェクトにおいて Vue.js と React が多く利用されており、既存の多くは Babel を利用した JavaScript で、新規のプロジェクトでは TypeScript を利用して開発が行われています。 FYI: 【LINE DEV DAY 2019 番外編】UIT Front-end Tooling Survey 2019 技術選定は勿論、プロジェクトにおける細かなコーディングルールについては、プロジェクトのコードオーナーに委ねられており、プロジェクトごとに裁量を持った意思決定を行っています。 その上で、私が携わるプロジェクトにおいては、 default export を可能な限り避けるように心がけています。 import 側の裁量で対象を自由に命名できてしまう 今回は「『Da
基本思想 とにかく薄く。必要なものだけ。基本は ts-loader を transpileOnly: true で使うだけ。最悪これだけでいい。型チェックはIDEか yarn tsc -p . --noEmit でやる。 CRA や parcel は使わない。暗黙な振る舞いが多すぎるので。一切勉強したくない人はいれていいと思うが、その場合 eject しない、dist ディレクトリをそのまま使うこと前提。 style-loader/css-loader は外部CSSを読むときに設定する worker-plugin はなくてもいいけど、 worker もビルドしたいことが多いので、入れていることが多い html-webpack-plugin と webpack-dev-server 組み合わせると、他と組み合わせずに完結して動く。このHTMLを本番で使わずとも、デバッグで使ってることが多いの
この記事は『ドワンゴ AdventCalendar 2017』5日目の記事です(๑˃̵ᴗ˂̵)و 昨日は @kinoppyd さんの『Gitをバックエンドにしたタスク管理bot』でした。 普段使ってるgitの裏側の世界はとても興味深いですね。 僕は以前から自分用のメモアプリをつくりたいな〜と思っていろいろ考えていたのですが、 データ保存のバックエンドにgitを使うのも面白いかもなぁと思いました！ さて、5日目の今日は**『HTML5なブラウザゲームを録画したい話』**をします。 どういうわけか：ゲームをつくったら録画したい 僕は昔からゲームをつくるのが好きで、個人でいろいろつくったりしています。 ここ数年はHTML5なブラウザゲームをメインでつくっています。 （といっても、その前はFlashゲームだったので、だいぶ前からブラウザなんですけどね） ゲームが完成し、それをインターネットで公開す
※ CSS Animationに関してはWeb Animation APIを使うことでより簡単にJavaScriptからアニメーションを構築・制御できるようになります。2020年2月時点ではブラウザの実装が不十分でPolyfillを要するため、この記事では対象外としています。 専用ライブラリを使わずにアニメーションを作ろう 各ライブラリは特別な魔法を使っているわけではありません。 原理的にはCSS・SVG・WebGLといった各要素技術をしっかりと習得すれば、専用のライブラリと同等のことができるばかりか、より高い自由度を手に入れながら軽量化を実現できる可能性もあります。 また、専用のライブラリを利用する場合にも、基礎となる原理や各技術の得意不得意を知っていることは大きな武器となるでしょう。 Vue.jsを使ってCSSやSVGのアニメーションを書く とは言え、これらのアニメーションを土台の技術
gts は Google の TypeScirpt style guide と Linter 設定が入った npm package。 googleapis 以下などの Google が公開している各種 TypeScirpt プロジェクトで使われている。 github.com TypeScript は大変気に入っているけど、新たにプロジェクトを作ってストレスなく開発するまで少し手間がある。 tsc --init して tsconfig.json を書き換えたり以前のプロジェクトからコピペしたり npm run build でコンパイルするように package.json の scripts を追加したり Linter や Formatter の設定も面倒くさい gts ならこれだけで十分設定されたプロジェクトができあがる。 $ npm init $ npm install --save-de
前置き Rubyで一瞬だけ湧いて出てきて消えたPipeline風演算子については忘れてください。あれはメソッド呼び出しの演算子であって今回取り上げるPipeline operatorとは似て非なるものです。 JavaScripterでも、Ramda.jsやRxJSを普段から使っている人には既知の内容だと思うのでこの記事は読まなくて大丈夫です。 ちなみに僕のステータスは関数型にわか勢なので認識に間違いがあったらなんらかの訂正もらえるとうれしいです。 Pipeline operatorとは 古くはML系の言語で定義されてF#やElixirの流行で一般に有名になった演算子こと |> です。 f a を a |> f と書けるようになります。 詳しくはこちらで: https://mametter.hatenablog.com/entry/2019/06/15/192311 覚えた方がいい理由 Ty
この記事では面倒なので名前に .js が付いているものは省きます。例えばNext.js は Next と表記します。 まず結論から日本ではVueはReactと二分する人気があるように観測されますが、世界的な数字で人気・シェアを見るとReactが圧倒的です。 シェアだけで見るとAngularとAngularJS（Angular系の1.x系）の合計値はVueよりも高いですが、「今後はもう採用したくない」と考える率が高く、Angular/AngularJSの人気が低下しているということは間違いありません。 ※追記: Angularのシェア、人気度に関しては、Angular及びAngularJS両方を含む数値であり、AngularJSとAngularは別物であるものが混ざってカウントされているため、Angularのシェア及び人気度はあやふやかもしれません。他の数値に関して信頼性を疑うべきかどうかは
GitHub - hiroppy/ssr-sample: A minimum sample of Server-Side-Rendering, Single-Page-Application and Progressive Web App A minimum sample of Server-Side-Rendering, Single-Page-Application and Progressive Web App - hiroppy/ssr-sample このリポジトリはこれを見れば様々な実装の動く土俵を作れるというのを目的としています。 環境構築ですら毎回忘れるので。。 なので冗長に書いてある部分も多いですが、今後も新しい必要な実装を小さく追加していく予定です。 動きを確認したい人は、clone して手元で動かしてみてください。 技術スタック これはあくまでもサンプルなので、saga
Ehime.js #2の資料です。 https://ehimejs.connpass.com/event/153511/
We are going to rewrite React from scratch. Step by step. Following the architecture from the real React code but without all the optimizations and non-essential features. If you’ve read any of my previous “build your own React” posts, the difference is that this post is based on React 16.8, so we can now use hooks and drop all the code related to classes. You can find the history with the old blo
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? こちらの記事は、Indrek Lasn 氏により2017年 12月に公開された『 The Secret to Being a Top Developer Is Building Things! Here’s a List of Fun Apps to Build! 』の和訳です。 本記事は原著者から許可を得た上で記事を公開しています。 著者Twitter https://twitter.com/lasnindrek 少し考えてみてください。あなたがもし健康に関する書籍をたくさん読んだとしても健康になることはありません。実際には、ジムに行
Subscribe to NewsletterGet Cube updates to your inbox for building better data products. Overview and Analytics API Nowadays, we see analytics dashboards and reporting features in almost any application. In my career as a web developer, I’ve built dozens of different dashboards from internal tools to measure application performance to customer-facing portals with interactive report builders and dy
2019年10月9日、『神姫PROJECT』などソーシャルゲームの企画・開発を手がける株式会社テクロスが主催するイベント「TECH x GAME COLLEGE」が開催されました。第27回となる今回のテーマは「HTML5で『重い』問題をクリアしてリッチなゲームを作る」。株式会社ノックノート執行役員の岡山知弘氏が、話題のHTML5ゲームを作るにあたって、いかにJavaScriptでリッチなゲームを作りながら重い問題を解決していくかを語りました。前半パートとなる今回は、負荷改善における前提とCPUの問題についてレクチャーしました。 HTML5で「重い」問題岡山知弘氏：それでは、30分ほどお時間をみなさんにいただいて、HTML5で重たい問題は、みなさんがHTML5を触られている方であれば、まさに直面しているかなとは思うんですけど、そこで弊社でどういうふうにアプローチしたのかをお伝えさせていただけ
Apolloを触っていて、テストをするために https://www.apollographql.com/docs/react/development-testing/testing/#testing-final-state を読んでいた。その文章の中で、 MockedProviderをrenderした時はloading状態になる データがロードされた最終状態にするにはwaaitみたいなnpm packageを使って、await wait(0)とかしてね It delays until the next "tick" of the event loop, and allows time for that Promise returned from MockedProvider to be fulfilled. と書かれていて、この文章の意味がわからなかったので、Nodeのイベントループを知
概要 かねてよりgRPCおよびgRPC-Webに興味があり、これを用いてシンプルなリアルタイムチャットサービスを制作し、公開した。 本稿では、その開発工程について解説する。 ゴール gRPC-Webを用いて「わいわいチャット」を作る。 https://waiwai-chat-2019.aanrii.com/ ※2020年9月現在、公開停止しました。 内容はシンプルなチャットアプリケーションだ。サイトを開くとまず過去ログが表示され、ほかの入室者の投稿が随時流れてくる。任意の名前で入室すると投稿欄が出現し、発言ができる。発言した内容はサイトにアクセスしている全員に、即座に共有される。過去ログは無限スクロールで遡ることができる。 フロントエンドはReactを用いたSPAとし、Netlifyを使って静的サイト生成・配信する。また、バックエンドはGKE上で動くNode.jsアプリケーションとし、かつ
はじめに 最近JavaScriptのプルリクが来たので「よーしやったるでー」って感じでレビューしたんですが、まったく理解できずレビューになりませんでした。 その時疑問に思ったことをメモします。。 誰かの助けになれば幸いです。。 これはもう引退やな。。 classの中で function って書くの省略してるの？ class TestClass { test() { 処理 } } function を省略して書けるのかなと思ったらそうではない。むしろ書いてはいけない。 下記はエラーになる。 class TestClass { function test() { 処理 } } PHPに慣れてるからか、もやもやする。 (a, b) => は無名関数なのはわかったけど function(a, b) じゃダメなの？ (a, b) => は無名関数で function(a, b) と同じ。 好みの問題
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く