トーク

事業上の要請で、Webアプリとして提供しているサービスでプッシュ通知等のネイティブ特有機能が必要になり、モバイルアプリ版を新たに出すことはよくあると思います。その場合、フルスクラッチで開発するとめちゃくちゃ大変です。まずは最小限の工数で通知許可率等を計測し、モバイルアプリのポテンシャルを検証したいですよね。

本セッションでは、Capacitorを用いて既存のNext.jsアプリをそのままモバイルアプリとして動かし、プッシュ通知のようなネイティブの機能を利用するまでをステップ・バイ・ステップで解説します。また、このアプローチで700万MAUのサービスを3年間運用した経験を元に、単一のコードベースでWebフロントエンドとモバイルアプリを運用する上でのTipsも紹介します。

Web開発者が事業を前進させる現実的な選択肢としてモバイルアプリ開発を検討するきっかけになれば幸いです。

昨今Rust製のツールチェインが流行り、ESLintの代わりにBiomeやOxc(oxlint)を採用するケースも増えているのではないでしょうか。
ですが、これらは未だ独自のカスタムルールを利用することはできません。

対するESLintでは、非常に優れた拡張性を持っています。
中でも no-restricted-syntax というプリセットのルールは、簡単に独自のカスタムルールを作成することが可能です。

本発表では、 no-restricted-syntax を利用した実用的なカスタムルールを作りながら、ESLintの有用性を再確認します。

フロントエンドで発生したエラーのトラッキングをしたいと思った時、Sentryのようなツールを導入することで解決しようとしている組織は少なくないのではないかと思います。

しかし、エラー監視はどれだけいいツールを使っていたとしても、実際に運用していく体制がずさんではあまり効果を発揮することができないと考えています。

そこで、わたしたちは「cop当番制度」というものを導入することで、エラー監視の負荷が特定のメンバーに集中するといった問題を発生させることなく、レポートされたエラーをしっかりトリアージしきることを実現しています。

本LTではどのようにしてフロントエンドのエラー監視体制を運用しているのか、技術面ではなく運用面にフォーカスしてお話しします。

Redux Toolkitは、ステート管理ライブラリであるReduxをより使いこなし、効率的にアプリ開発をするためのライブラリです。

我々のサービスでは、複雑なフォームを提供する画面にReact、ReduxおよびRedux Toolkitを使用していました。
ある時、Redux Toolkitのマイナーバージョンアップを行うと、フォーム入力時の再レンダリングにかかる時間が約4倍になってしまいました。
もちろん、バージョンアップ以外に実装は何も変わっていません。

普通はマイナーバージョンアップでそんな劇的な変化は起こらないはずです。皆さんは、マイナーバージョンアップで何が起こったのか想像できますか？

最近、テクニカルライターとして Docusaurus と睨めっこしています。
ドキュメントを提供する上で、時にはインターネットにアクセスできないお客様のためにPDF化が必要になります。
Docusaurus には PDF を生成する 3rd party のプラグインもありますが、Docusaurus自体のバージョンアップに追従する難易度や、メンテナビリティを考慮して採用を控えました。
代わりに、E2E テストツールである Playwright を悪用しています。
Playwright にはテストのスナップショットを生成するためにPDFを生成する機能が付いています。
嬉しいことに撮影範囲はセレクタで絞り込めます。
このトークではそのような Playwright の目的外利用をどのように実現したかお話しします。

esbuildやswcの登場を皮切りに、近年のフロントエンドツールはJavaScript（TypeScript）以外の言語で実装されることが増えています。特にRustはゼロコストの抽象化機能を備えており、アルゴリズムの複雑さとメモリ割り当てに気をつけるだけで良く、パーサーやASTを用いた網羅的な実装が頻出するフロントエンドツールの開発に向いていると考えられています。

oxcはハイパフォーマンスなフロントエンドツールのコレクションであり、biomeやrolldown、rspackなどの実装で使用されています。

このセッションでは、oxcがなぜ高性能なのか、その背後にある技術を解説します。また、oxcがフロントエンドツール開発の未来をどのように変えていくか、その可能性についてもestreeなどの既存技術との比較を通して探ります。

storybookをベースにVisual regression testやアクセシビリティーのテストができるらしい！
ぜひやりたいが手元にはSPAではなくtemplate engineベースのMPAしかない！そんな時に役立つテクニックをご紹介します。

近年、フロントエンドにおいて、Rust製のツールが増えてきました
一方で、フロントエンドエンジニアの多くはJavaScriptやTypeScriptが中心で、Rustはあまり馴染みがないのが現状です
私自身、スクリプト言語を中心に使ってきた普通のWebエンジニアですが、フロントエンドツールチェインをより深く理解し、パフォーマンス改善やOSS貢献ができるようになりたいと考え、Rustの学習を始めました
簡単なCLIツールを作成したり、普段Node.jsで書いているような処理をRustで置き換えたりすることで、少しずつ言語に馴染んでいきました
このトークでは、私の入門の過程をご紹介しながら、Rustを学ぶメリットについて考察します
Rustに興味はあるけれどまだ始められていない方にとって、入門のきっかけになれば幸いです

ここ数年、新卒研修でWebプログラミング講師を担当しています。
研修は受講者の経験レベルもバラバラで時間も限られますが、実施するからには次のことを学んで欲しいと思いました。

• ブラウザはアクセスしたURL以外にも、タグに書かれているURLにアクセスする
• サーバーは特定のパスに該当するアセットやデータを返す
• ヘッダーフィールドはTCPの上でHTTP通信を実現するためにとても重要
• サーバーは動的なページを返せる

これらをなるべくWebの仕様そのものに沿って教えるとなった時に、Rubyが適していることに気づきました。
RubyはTCP通信や動的HTML生成を標準ライブラリだけで素直に実装可能で、HTTPはリクエストラインから仕様通りに書き下せて、Macに最初から入っています。
このトークではRubyを使ってWebの基礎を学ぶのにちょうど良いサーバーを作るところをお見せします。

概要:
このセッションでは、MVCフレームワークに慣れたPHPエンジニアが、どのようにしてLaravelのBladeテンプレートエンジンを使用してWordPressサイトを構築したかを紹介します。従来のWordPressの開発環境に馴染めなかったエンジニアが、Bladeを使うことでどのように開発プロセスを効率化し、再利用可能なUIコンポーネントを作成し、コードの冗長性を減らしたかを紹介します。

具体的な学びのポイント:
Bladeの導入: BladeをWordPress環境に統合する際の技術的なステップと必要なツール。
開発効率の向上: 再利用可能なコンポーネントの作成と、維持管理の容易さについての実例。
挑戦と解決策: WordPressのエコシステムに逆らうことで発生した問題点と、それにどのように対応したか。

このセッションではReact RouterやTanStack Routerなど
ReactのSPAアプリで導入可能なルーティングライブラリについて話します。

▼ こんな人が対象者

• Reactのルーティングライブラリについて知りたい人
• 普段、Next.jsやRemixなどのフレームワークを利用しており、ルーティングライブラリについてよくわからない人

▼ 内容

• React RouterやTanStack Routerなどの主要なルーティングライブラリについて
• 「File Based Routing」 VS 「Directory-Based Routing」の話
• Next.jsやRemixなどのフレームワークとの組み合わせについて

このセッションでは、PHPバックエンドエンジニアがフロントエンドの最新技術のひとつである、NextJSへの入門を試みる過程を紹介します。

特に生成AI技術を活用して英語のドキュメントを理解し、コーディング時の疑問は都度解決するという方法に焦点を当てます。
実際に、GatsbyJSで構築したブログサイトをNextJSへ移行したときのことを取り上げ、バックエンドエンジニアがAI技術と共にどうフロントエンド技術を理解していったかを掘り下げてみようと思います。

Swift!Swift!ぅうううわぁあああん!!!

んはぁっ!Swiftたんの型安全な世界をWebフロントエンド開発でも体感したいお！
SwiftWasmたんを使えば、フロントエンドでSwiftたんを使うことができる…?きゅんきゅんきゅい!

ぐああ!生成されるWebAssemblyバイナリのサイズが大きいから、Swift ちゃんをWebフロントエンドで使うのは 現実的 じ ゃ な い?にゃああん!うぁあ!

ちきしょー!やめてやる!現実なんかやめ…て…え!?見…てる?SwiftWasmちゃんが僕を見てる?
よかった…世の中まだまだ捨てたモンじゃないんだねっ!
いやっほぉお!!僕にはSwiftWasmちゃんがいる!やったよケティ!ひとりでできるもん!!

本トークでは、現時点のSwiftWasmは どこまで・何ができるのか探究することを試みます。

DartといえばFlutter専用言語のイメージが強いと思いますが，歴史的経緯によりJSへのトランスパイルをサポートをサポートしています．
しかしながらウェブ開発でDartがメインで使われるといったことはありませんでした．

Dart 3.3からWasmへのコンパイルがサポートされました．
Dart to JSでは実行用JSがアウトプットされていましたが， Dart to Wasmでは実行用のESModuleがアウトプットされるようになったりと，最近のウェブ開発でも利用しやすくなっています．

本セッションではWasmがサポートされたことによりDartをウェブ開発で利用できそうか?という観点での話をしたいと思います．

現在、デザインシステムのUIコンポーネント実装において、スタイリングライブラリとしてPanda CSSを採用しています。
本発表では、Panda CSSの紹介をした上で、Panda CSSを利用した型安全なコンポーネントのスタイリング方法やデザイントークンとの連携について紹介します。
更に利用する上でのTipsや、Dynamic Stylingに関する注意点についても紹介します。

日本経済新聞社では Hack The Nikkei という技術ブログを運営しています. ここで日経の技術組織における文化や技術的知見を発信しており, また採用導線も兼ねてあり各種エントリー情報なども纏められています.

その技術ブログは特別のメンテナンスチームなどはなく, 有志によって運用されています. また技術記事や採用情報を追加/更新するメンバーには, エンジニアにとどまらず, デザイナーであったり採用担当であったり, プログラミングに不慣れな方も含まれます. そんな中でどのようにして技術組織の発信を支えているのか, 技術ブログ自体の運用をどのようにして効率化して行なっているか, と言った ops や自動化の取り組みについて, 初期の立ち上げ段階の Hack The Nikkei からの遷移とともにご紹介させていただきます.

React Nativeを用いたモバイルアプリの実装は、普段Reactを使っているエンジニアであれば、スムーズに行うことができます。

しかし、Webアプリ開発ではあまり意識する必要のない、モバイルアプリ特有の注意点・相違点が多数存在し、その一つとして、E2Eテストが挙げられます。

単体テストは、Webと同じような感覚で実装することができるのですが、E2Eテストに関しては、端末のOS・機種の考慮が必要であったり、Webアプリで普段利用するE2Eテストツールが利用できないなど、React Nativeでのモバイルアプリ開発特有の知識が必要になるかと思います。

このトークでは、React Nativeで利用できるE2Eテストツールについてや、E2Eテストの運用方法など、「React NativeにおけるE2Eテスト事情」についてお話しできればと思います。

React コンポーネントライブラリ Mantine をプロダクトで使うにあたり、どんな課題に直面しどう解決を図ったかについてお話します。
例えば以下のような課題です。

• デザイン上のフォントサイズ粒度と Mantine で設定可能な粒度が異なる
• 様々なスタイリング方法が提供されており、柔軟な反面、実装においては複数の方法が混在することを避けたい

Mantine との向き合い方の一例をお話し、UI コンポーネントライブラリを利用した開発の参考になれば幸いです。

関連する複数のアプリやパッケージをまとめて管理するため、ポリレポではなくモノレポにすることがあると思います。
この LT では、初めてモノレポを構築した自分の経験談を話します。
例えば、

• モノレポ構成を取るにあたり、どういった観点で何を検討したか
• 検討事項に対して、どういった決定をしたか
• モノレポを構築するにあたりどんなことをしたか

などについて話し、モノレポ構築において参考になる情報を少しでも提供できれば幸いです。

Remix を使ったアプリケーションにおけるコンポーネントの単体テストでは、 @remix-run/testing パッケージで提供されているスタブを利用すると思います。
しかしこのスタブは useRouteLoaderData を利用しているコンポーネントではうまく動きません。
このように、 Remix 公式から提供されているスタブではカバーできることとできないことがあり、公式ドキュメントには特に記載がありません。
この LT では、

• RemixStub がカバーしていることとしていないこと
• useRouteLoaderData hook を使っているコンポーネントの単体テストをどうやるか
• remix-typedjson を使っている場合に発生する別の課題とその解決方法

などについて話し、Remix を使った開発を行っている方々の助けとなる情報を届けられれば幸いに思います。