2024/8/24 フロントエンドカンファレンス北海道2024

本連載では分散型マイクロブログ用ソフトウェアMisskeyの開発に関する紹介と、関連するWeb技術について解説を行っています。 今回はNode.js互換のJavaScriptランタイム、Bunのパフォーマンスについて、Misskeyのコードベースを用いて検証を行います。 Bunとは Bunは、Node.js(以下Node)互換である後発のJavaScriptランタイムです。 JavaScriptエンジンにNodeで採用されているV8ではなくJavaScriptCoreを採用しているほか、TypeScriptを事前コンパイルなしに実行することもできます。 肉まんのようなマスコットキャラクターが特徴です。 モチベーション そんなBunの公式サイトではNodeよりも大幅に性能上のアドバンテージがあるように紹介されていますが、こうした競合ソフトウェアとの一方的な比較は得てして限られた条件での有利な
Webの将来はサーバサイドレンダリング(SSR)に回帰していく。Denoが主張するIsomorphic JavaScript(もしくはUniversal JavaScript)とは何か? 静的なHTMLファイルをWebサーバが配信する仕組みから始まったWebは、サーバ側で動的にHTMLを生成するCGIの仕組みや、Webブラウザ上でJavaScriptを実行してインタラクティブな操作を実現するなどの仕組みを得たことでWebアプリケーション基盤へと発展しています。 現在、Webアプリケーションの仕組みとして代表的なものがSPA(Single Page Application)でしょう。 SPAはWebブラウザ上で多くの処理が行われるためユーザーの操作に対する反応が速く、インタラクティブ性の高い快適なWebアプリケーションを実現できる利点があります。 しかし、これからのWebはサーバサイドレンダ
stackblitz が提唱して実装している node.js が動くブラウザ環境。container といってるが、 Docker 等とは関係ない。 stackblitz/webcontainer-core このコンテナはブラウザ内で node.js (らしきもの)が動くことがターゲットで、現在デモとして next.js をビルドしてプレビューできている。これによって node.js + webpack + next.js cli が動いていることがわかる。 デモはここで試せる。 まだ OSS ではないので、この記事の大部分は想像によって書かれている。 webcontainer 概要 (自分の理解なので話半分に) ブラウザサンドボックスでも electron なしでも動かせるようになってきた。しかし現在 node.js を動かすには色々と欠けている部分があるので、それらを総称して webc
あなたは Hooks を使って複数のコンポーネントを書きました。ちょっとしたアプリも作ったことがあるでしょう。満足もしている。API にも慣れて、その過程でコツも掴んできました。しかも重複したロジックを転用できるよう Custom Hooks を作り、同僚に自慢して見たり。 でも useEffect を使う度、いまいちピンときません。class のライフサイクルとは似ているけど、何かが違う。そしていろんな疑問を抱き始めます。 🤔 componentDidMount を useEffect で再現する方法は? 🤔 useEffect 内で正確に非同期処理を行う方法とは? []ってなに? 🤔 関数をエフェクトの依存関係として記すべき? 🤔 非同期処理の無限ループがたまに起こるのはなぜ? 🤔 古い state か props がエフェクト内にたまに入るのはなぜ? 私も Hooks を使
Node.jsでUnhandled Rejectionsが発生してprocessが終了すると、Exit Statusが0となる問題とその対策についてのメモです。 追記: Node.js 15+からUnhandle Rejectionが発生するとプロセスがExit Status 1で終了する動作がデフォルトとなりました Node.js v15ではunhandled rejectionでプロセスがエラー終了する 事前知識: Async FunctionはPromiseを返す関数定義です。 その辺について詳しくは次のサイトを読んでください。 JavaScript Promiseの本 非同期処理:コールバック/Promise/Async Function · JavaScript Primer #jsprimer 今回のサンプルコードは次のリポジトリにあります。 azu/unhandled-rej
こんにちは、メルペイのバックエンドエンジニアの @kazegusuri です。 2018年10月4日にMTC (Mercari Tech Conf) 2018 が開催されました。ご来場された皆様、楽しんでいただけたでしょうか? 今回は皆様が最初に目にしたであろうカンファレンスLPの裏側について紹介したいと思います。 実はこのページはGitHub上でPublicなリポジトリとして公開されています。 気づかれた方もいらっしゃるかもしれませんが、これはイベント後に公開したわけではなく、リポジトリ作成時からずっとPublicな状態で開発を続けていました。 チーム構成 MTC2018では最初からWebでの公開だけではなくカンファレンスアプリを作ろうというのを決めていました。 そのため大きく分けてwebチームとappチームに分けて開発をすすめることになりました。 web/appチームはメルカリグループ
webpack(ウェブパック)とはJSファイルをまとめる高機能なモジュールバンドラー。まとめることでウェブページのHTTPリクエストの数を減らしたり、高度なウェブアプリケーションの開発に役立ちます。 連載ではTypeScriptやBabelなどのES2015+の環境構築、ReactなどのJSライブラリの設定方法を網羅。サンプルファイルで詳しく解説します。 webpackの入門記事は他のサイトにもありますが、対象バージョンが古くて使えなかったりします。検索結果の上位の野良記事を参照にしたら古いバージョンの内容ばかり。解説記事通りにやったのにうまく動かない・・・なんて困った方も多いのではないでしょうか。本記事は常に最新版に対応させているので、安心して読み進めてください。 ※本記事では2023年3月現在のwebpack 5(2020年10月リリース)以上で解説しています。 本記事で解説しているこ
JSer.info #362 - The State of JavaScript 2017: IntroductionにてJavaScriptを使う開発者向けアンケートの結果が公開されています。 JavaScriptのフロントエンドからバックエンド、ツール、言語、ライブラリ、CSSなど幅広く扱った内容になっています。 またそれらの結果と給料や経験年数などを組み合わせた結果を見れます。 たとえば、#StateOfJS 2017 Results: Front-end Frameworksではフロントエンドのフレームワークとして何を使っているかという質問の結果が掲載されています。 結果としてはReact、何も使ってない、Angularとなっていて、それらのフレームワークをまた使いたいかどうかや組み合わせて使っているのかなどの投票結果が書かれています。 去年の結果もhttp://2016.stat
JSer.info #361 - 設定より規約(Convention over configuration)なbundlerであるParcelがリリースされました。 🚀 Announcing Parcel: A blazing fast, zero configuration web application bundler 📦 webpackやFuseBoxは詳細を設定ファイルで扱いますが、Parcelには現時点では設定ファイルがありません。 代わりにビルトインのプラグインとpacakge.jsonに書かれたparcel-plugin-から始まる名前のパッケージをPluginsとして読み込むことで、対応するファイル(Assets)などを拡張します。 (Assetの内部処理として、それぞれのAssetsに対応する設定ファイルを使う仕組み。たとえばJSAssetならば内部的にBabelが利
こんにちは、フロントエンドを中心に開発しています、原 (@herablog)です。 昨年10月にアメブロ2016 ~ React/ReduxでつくるIsomorphic web app ~という記事で、アメブロのJavaベースアプリから、Node.js・Reactベースアプリへのリニューアルについてお伝えしました。今回は、より進化した2017年版のWebアプリケーション開発に向けて、その後おこなわれた改善についてお伝えします。 https化 2016年4月に、ameblo.jpのhttps化をおこないました。セキュリティ観点としては当然のこと、SEO効果やブラウザの新しい機能の利用など、https化はWebアプリケーションのクオリティアップには必須といってよいでしょう。 まず、サブドメイン化されたサブシステムのhttps化をおこない、その後アメブロ本体のドメインをhttps化しました。ht
Server Side Renderingについて知るべきこと。Server Side Renderingとは何か? それによって何が改善されるのか?(前編) ng-japan 2017 JavaScriptフレームワークとして知られるAngularのイベント「ng-japan 2017」がAngular Japan User Group主催で6月17日に都内で開催されました。 Angularは基本的にWebブラウザで実行されるJavaScriptアプリケーションのフレームワークですが、一方でサーバサイドでAngularが備えるHTML構成機能を実現する、いわゆるServer Side Rendering機能の開発も「Angular Universal」として進んでいます。 そのため、Server Side Renderingに興味を持つAngularデベロッパーも増えてきました。 ng-
このブログ記事は Node.js advent calendar の 4日目の記事です。 qiita.com いやーギリギリ 12/4 に間に合いました。 12/4 のアドベントカレンダーに投稿するっていうのは来週の12/11まで大丈夫だからな(?)— Yosuke FURUKAWA (@yosuke_furukawa) December 4, 2016 というわけで本題。 はじめに Node.js の日本のコミュニティを3年運営して、色んな所で語ってきた僕だからこそ、 Asia の JavaScript コミュニティに対して語れる話があるんじゃないか、ということで jsconf.asia で Node.js の今後について話してきました。 jsconf.asia とは シンガポールで行われる JavaScript のカンファレンスです、 jsconf.asia という名前の通り、 Jav
Intro Node v7.0.0 が公開され、今回のリリースで WHATWG URL の実装が Experimental として入った。 既に標準で含まれていた url module との違いや、URL API などについて解説する。 WHATWG URL URL は非常によく使われる、Web において重要なフォーマットの一つだ。 ものによっては一見シンプルに見えるかもしれないが、その仕様はそれなりに大きい。 しかし、これまで DOM/JS はこれをパースする専用の API を持っていなかったため、例えば <input type=text> に入力された URL 文字列のパースは、片手間な正規表現で行われることも少なくなかった。 同様に、動的生成されるクエリやハッシュなどを URL に含める場面でも、やはり文字列操作による構築が行われてきた。 片手間な正規表現や文字列処理が、URL が本
マイクロソフト、オープンソースのJavaScriptエンジン「ChakraCore」をLinux版Node.jsに対応、「Node-ChakraCore on Linux」プレビュー版公開 マイクロソフトは、Microsoft EdgeやWindows 10で使われているJavaScriptエンジンのコア部分を「ChakraCore」をLinux対応にし、さらにNode.jsに対応させた「Node-ChakraCore on Linux」のファーストプレビュー版を公開しました。 ChakraCoreは2015年12月にオープンソース化され、WindowsだけでなくLinuxやmacOSへの移植が進められることが明言されていました。 さらに今年に入って2016年1月にはNode.jsのJavaScriptエンジンとして使われているV8の代わりにChakraCoreを使えるようにNode.js
バイナリ形式の軽量なオブジェクトのシリアライズフォーマットである MessagePack(以下、msgpack)のエンコード・デコードを行う JavaScript ライブラリ msgpack-lite を2015年7月にリリースしました。node.js v0.10 から最新の v5.3、またブラウザも含めて幅広い環境で動作するのが特徴で、fluent-logger ライブラリも、msgpack に替えて msgpack-lite を採用しています。 以下では、msgpack を実装した際に注意したポイントを、2つご紹介します。 C++ よりも高速なピュア JavaScript 実装 本題に入る前に、ベンチマーク結果を更新しておいたので、ここに載せておきます。 最新バージョン msgpack-lite 0.1.14 の node.js v4.2.3 におけるベンチマーク結果です。 msgpa
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く