やさしくはじめるRemixとWeb
この資料は、2023年4月23日に開催された「春のJavaScript祭り Online 2023」にて発表した資料になります。 https://javascript-fes.doorkeeper.jp/events/154047 Remixとは、2021年にバージョン1.0が登場したフルスタックWebフレームワークです。RemixはReact Routerを開発していたチームが主導で開発を行っています。RemixはSPAの次のアーキテクチャであるPESPAに沿って開発を行うことができる素晴らしいフレームワークです。 今回の発表ではRemixに備わっている機能の紹介、そして誕生することになった時代的背景などを含めて簡単に紹介します。そして、Remix CLIに搭載されているRemix Stacksという機能を使って、実際にプロジェクトを作成しデプロイするまでの過程を含めて、時間の許す範囲で
ホームページ- EY-Office
小ネタです、JavaScriptで本日の日付をYYYY-MM-DD形式で得るコードは案外面倒です。 本日2023年4月17日なら 2023-04-17 という文字列を得るコードはRubyならTime.now.strftime("%Y-%m-%d")、Pythonならdatetime.today().strftime("%Y-%m-%d")（importは省略しました）と簡単に書けますが、JavaScriptでは案外面倒なのです。 追記： いくつかの間違いのご指摘がありましたので修正しました（2023-04-19）。 DeepAIが生成した画像です いっけん正しいようで間違ったコード new Date().toISOString().slice(0,10) new Date()で本日の日時を取得します toISOString()メソッドは日時データをISO形式の文字列に変換します、例えば 2
ストリーム API の概念 - Web API | MDN
ストリーム API は、とても便利なツールセットをウェブプラットフォームに追加し、 JavaScript がネットワーク経由で受信したデータのストリームにプログラムからアクセスし、開発者の希望どおりに処理できるようにするオブジェクトを提供します。ストリームに関連する概念や用語の中には、初めて耳にするものもあるかもしれません。この記事では、知るべきことをすべて説明しています。 読み取り可能なストリームは、基になるソース (underlying source) から流れる ReadableStream オブジェクトによって JavaScript で表されるデータソースです。 基になるソースは、ネットワーク上のどこか、またはデータを取得するドメインのどこかにあるリソースです。 基になるソースには、次の 2 種類があります。 プッシュソース (Push sources) は、アクセスしたときに常に
WebAssemblyの歴史について
はじめに 最近、Node.jsとDenoの開発者であるRyan DahlさんがJavaScript Containersという記事を書いていることを知った。 Webとの親和性の高さがサーバーサイドで求められる中、JavaScriptがユニバーサルスクリプトとして活躍するだろう。そして、コンテナランタイムがLinuxコンテナの抽象レイヤーとしてあるように、JavaScript界隈では既存のWebAPIそのものが抽象化の手助けとなるであろう、みたいな趣旨の内容だった。 彼がChromeのV8 JavaScript Engineを使ってNode.jsを誕生させた同じ頃、JavaScriptの可能性を信じて方法を模索した人がいる。Alon Zakaiさんだ。 Alon(以降、敬称略)はWebAssemblyやその考えの元になった asm.js 、 JavaScriptコンパイラ Emscripte
フロントエンドとSPA職人の目指したものの歴史と概略
年末年始にフロントエンド論みたいな記事をいくつか見たが、僕ら古のSPA職人がやってきたフロントエンドという職域と目指していたものが失伝しかけている気がするので、ここに時代ごとに何を考えていたか、雑に書き殴る。 注意点として、 2004から始まるが、自分がプログラミングを始めたのが2010, 業務としてコードを書き始めたのが 2012 なので、解像度が高いのはそれ以降になる。 tl;dr 2004: 動き出す HTML 2011: 構造化のはじまり 2015: 贅沢品としてのSPAとコミュニティ分化 2017: 貧者のSPA 2019: 守破離としてのパフォーマンス 2004: 動きだす HTML AJAX の時代。要は XMLHTTPRequest で取得したコンテンツに応じて、動的書き換えをDOM書き換えを行うこと。今では名付けるほどでもない操作だが、HTMLが静的なものをやめたことは、
JavaScript で queueMicrotask() によるマイクロタスクの使用 - Web API | MDN
マイクロタスクは、それを作成した関数やプログラムが終了した後、 JavaScript 実行スタックが空の場合にのみ実行され、ユーザーエージェントがスクリプトの実行環境を動かすために使用しているイベントループにコントロールを返す前に実行される短い関数です。 このイベントループは、ブラウザーのメインイベントループか、ウェブワーカーを駆動するイベントループのどちらかです。これにより、他のスクリプトの実行を妨げるリスクなしに与えられた関数を実行することができ、同時に、ユーザーエージェントがマイクロタスクによって行われるアクションに反応する機会を得る前に、マイクロタスクが確実に実行されるようにします。 JavaScript のプロミスと変更監視 API は、どちらもコールバック実行にマイクロタスクキューを使用しますが、現在のイベントループパスがラップされるまで作業を遅延する能力がある他の場合がありま
Edge Side Frontend という新領域
at #ワインと鍋js なぜフロントエンドに Edge Worker が必要なのか、Cloudflare Workers をどう使っていくかみたいな話をしました
JavaScriptのES2023・ES2022の新機能まとめ - ICS MEDIA
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では配列を非破壊で操作できるメソッドが追加されています。非破壊とは、元の配列を変更せ
queueMicrotask() global function - Web APIs | MDN
The queueMicrotask() method, which is exposed on the Window or Worker interface, queues a microtask to be executed at a safe time prior to control returning to the browser's event loop. The microtask is a short function which will run after the current task has completed its work and when there is no other code waiting to be run before control of the execution context is returned to the browser's
プロを目指す人のためのTypeScript入門 安全なコードの書き方から高度な型の使い方まで
2022年4月22日紙版発売 2022年4月19日電子版発売 鈴木僚太 著 B5変形判／424ページ 定価3,278円（本体2,980円＋税10%） ISBN 978-4-297-12747-3 Gihyo Direct Amazon 楽天ブックス ヨドバシ.com 電子版 Gihyo Digital Publishing Amazon Kindle ブックライブ 楽天kobo honto 本書のサポートページサンプルファイルのダウンロードや正誤表など この本の概要 TypeScriptは，JavaScriptに静的型付けの機能を加えたオープンソースのプログラミング言語です。本書では，根幹となるJavaScriptの仕様・機能とともに，TypeScript独自の仕様・機能を解説します。TypeScriptの基礎知識はこれ一冊だけで学べます。 静的型付き言語は世にいくつもありますが，Type
Makefileの代わりにnpm scripts+zxを使う - 詩と創作・思索のひろば
そこそこの規模があるプロジェクトで実行すべきタスクを定義するとき、初手として Makefile を使いがち。 Pros make は事実上どんな環境にもあることを期待してよい シェルで実行されるコマンドをそのまま書ける タスクの依存関係が明示できる Cons make では positional arguments が使えない 少し複雑なことをしようとすると Makefile 専用の文法を覚える必要がある 現代では、ファイルベースのタスクの依存関係は make が発明されたころほどは必要ではない Docker とか Go とか Webpack がよしなにしてくれることが多い 例: docker compose のラッパー ちょっとしたコマンドのラッパーを書きたいことがある。Makefile を書きはじめたらすべてのエントリポイントを make にしたい。ということで、以下のような Make
実行環境依存のコードに対してテストを書く考え方
社内用の啓発記事ですが、閉じる理由がないのでここに投げます。 ブラウザにべったりなコードを書いてると、ブラウザや node.js 固有の環境をインラインで記述してしまうことが多々あると思います。 あえてダメダメなブラウザ向けのエントリポイントの例を書きます。 // main.ts let id = localStorage.get('id'); if (!id) { id = `${navigator.userAgent}-${Math.random()}`; localStorage.set('id', id); fetch('/auth', { method: 'POST', credentials: 'include', body: JSON.stringify({ id, at: Date.now(), }), headers: {'Content-Type': 'applicat
Qwikというフレームワークについて - console.lealog();
GitHub - BuilderIO/qwik: An Open-Source framework designed for best possible time to interactive, by focusing on resumability of server-side-rendering of HTML, and fine-grained lazy-loading of code. 去年から気になってて、調べたいなーと思ってたやつ。 昨今の覇権を握ってる系のJavaScript-firstなフレームワークたちとは違い、HTML-firstを謳うユニークなアプローチをしてるのが一番の特徴。 中の人による一連のシリーズもあって、そこも読んでまとめてみた記事です。 Qwik Series' Articles - DEV Community Qwikの特徴 遅いモバイル環境だとしても、
どのJavaScriptフレームワークでも使えるVanillaなドラッグ&ドロップライブラリ・「DFlex」
DFlexはどのJavaScriptフレームワークでも使えるVanillaなドラッグ&ドロップライブラリです。 他のD&Dライブラリとの大きな差として、最小限のレイアウトシフトをあげています。Webページで操作する要素が多い程、累積レイアウトシフト(CLS)が多くなり、結果としてレイアウトのズレを発生させ、UXに影響が出る、というものをGoogleがCore Web Vitals(コア・ウェブ・バイタル)の3つの指標の1つとして提唱しました。 CLS CLSは上のようにテキストを確認してボタンを押そうとしたら、遅れて表示されたコンテンツによりボタンの位置がズレ、本来押すつもりのなかったボタンを押してしまう、といったもので、GoogleのPageSpeed Insightsでも数値化され評価の対象として位置づけられています。 そのレイアウトシフトを最小限に抑える事が出来るD&Dライブラリとし
Svelte • サイバネティクスで強化されたwebアプリ
compiled Svelte は、可能な限り多くの作業をブラウザからビルドステップにシフトさせます。手作業による最適化はもう不要です — より高速で、より効率的なアプリを。 compact よく知られている言語(HTML、CSS、JavaScript)を使って、息を呑むほど簡潔にコンポーネントを書くことができます。 そして、あなたのアプリケーションバンドルはとても小さくなります。 complete scoped styling、state management、motion primitives、form bindings などはビルトインで用意されています — 必要なものを探し求めて npm をさまよう必要はありません。全てここにあります。
TypeScript入門『サバイバルTypeScript』〜実務で使うなら最低限ここだけはおさえておきたいこと〜
本書『サバイバルTypeScript』は実務でTypeScriptを使う開発者のための入門書です。そして、このページはTypeScriptの特徴を最速で把握できるよう、数百ページからなる本書のコンテンツをつまみ食いした要約です。 » 本書ついて詳しく知る » とにかく今すぐTypeScriptを書いてみたい TypeScriptとはJavaScriptのスーパーセットとなるプログラミング言語。静的型付け言語であり、プログラムの正しさが静的に検査できる。ライブラリやIDEなどの開発環境が充実しており、大きなエコシステムを持っている。Microsoftが2012年に開発し、オープンソースで公開した。» TypeScriptの特徴について詳しく知る » TypeScript誕生の背景について詳しく知る TypeScriptはJavaScriptのスーパーセットスーパーセットとは、元の言語との
JavaScriptで任意のHTML要素をPicture-in-Pictureする
みなさんはPicture-in-Picture(PiP)という機能を使ったことがありますか。PiPは動画コンテンツなどを浮遊する小窓に表示する機能です。小窓はウィンドウの外側を自由に移動できます。 デスクトップが賑やかになりがちなPCでもPiPは大活躍なのですが、特にスマートフォンにおいては数少ない「ウィンドウ」機能になります。Androidはもちろん、iOS14も対応したことで話題になりました。 これによってスマホ一台あれば、ソシャゲの公式生放送を見ながらソシャゲのイベントを周回する地獄のような行為が可能になりました。 利用者という視点から見ると非常に便利なのですが、開発者から見ると動画しか表示できないのはなかなか使い所が難しくなります。そこで、この機能を使って好きな情報を表示できないか実験してみました。 PiP機能の対応環境 Chrome 70 Firefox 71（制限付き） mac
本当に怖い、Babelの更新 - Chatwork Creator's Note
こんにちはー。突然ですが、聞いてくださいよー。 Babelのバージョンアップしたら「Chatworkのルーム切り替えが重くなった」と社内で言われてしまいました。 みんなの仕事の効率を悪くするわけにもいかないので、戻すしかありません。Babelの更新って、本当に怖いですよねー。 そんなわけで、こんにちは。フロントエンド開発部のひむら(id:eiel)です。 さて、この話自体は少し前のことなのですが、その際に原因を特定する余裕がなく、Babelの更新は後回しになっていました。 ルーム切り替え自体が歴史的経緯もあって、「とーっても」*1難易度が高くなっていて、最悪これを改善すれば更新できるだろうと期待もしてたりもしました。 ところが、うっかり再発させてしまったので、ここで気合をいれて改善することにしました。 今日はその話を記録しておきます。 要約 経緯 原因の特定 試しにIE11をターゲットから
第三の答え、Stimulusjs - Qiita
昨今のフロントエンドトレンドを鑑みてフロントエンドの技術構成を考えると今はどんな選択肢が主流でしょう？ それぞれ並列なものではないですが、React? Vue? Next? Nuxt?そんなワードがきっと頭に浮かぶでしょう。 今の時代、jQueryでゴリゴリUIを記述するとなんだか白い目でみられる。 そう、令和とはそういう時代です。 界隈の最先端おじさんをみると、build processがあるのは当然で、HTML/CSSはjsが吐き出すもので、それが最大限正しいように語られています。 確かにExising Domのアプローチで界隈から評価されてるライブラリはなく、さほどいい選択肢には見えません。(個人の主観) ではそれらのアプローチの何がそんなにいいんでしょう？ 過去から現在まで我々は何に苦心して、それらはそれをどう解決してくれたのでしょう？ 雑に紐解いていきましょう。(今回はUI構築の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - jerosoler/Drawflow: Simple flow library 🖥️🖱️
