トーク

Reconciliation is the action of making one view or belief compatible with another.The reconciliation process is used in various modern frontend JavaScript libraries and frameworks like React, Vue,Angular , Svelte.Reconciliation is a process of comparing the current and the previous DOMs (Documents Object Mode and applying the necessary updates on the real DOM with a minimal set of required change.

フロントエンド開発者であれば、JavaScriptに真剣に向き合わないといけないシーンが多々訪れると思います。

基本的にはMDNなどを参照するだけでよく、ECMAScript仕様本体を参照しないといけないケースはほぼありませんが、正確な挙動を理解したり、新機能の提案にキャッチアップするために読みたくなるシーンがあるでしょう。

本発表では、「ECMAScriptの仕様を読むには最低限これを知っていれば大丈夫！」という知識について、5分に収まる範囲でなるべく多く解説します。
具体的な仕様については取り上げず、仕様中に登場する概念と、その簡易的な説明を行っていきます。
例えば、仕様中に現れるOperationの種類と、そのアルゴリズムステップ内で現れる概念などについて紹介します。
ECMAScript仕様を完全に読めることを目的とせず、読み始めていくための足がかりを提供します。

フロントエンドエンジニアのみなさん、 週末なにしてますか？

きっとコードが書きたくて書きたくて、個人開発をしているでしょう。

しかしフロントエンドだけだとWebアプリは完成しません、バックエンドやデータベースなども構築する必要があるでしょう。

我々はしがないフロントエンドエンジニア、フロントエンド以外は専門外、個人開発でAWSなどを使うのは金銭的にも厳しいのが現実。

フロントエンドエンジニアのみなさん、 Cloudflare使ってますか？

CloudflareはWorkersやPages以外にもフルスタックな開発が可能な様々なサービスをほぼ無料で利用できます。

これらのサービスをTypeScriptを使って開発できるのです。

フロントエンドエンジニアのみなさん、 フルスタックエンジニアになってもらっていいですか？

フロントエンド刷新に React Aria を導入し、製品全体の性能向上への取り組みについてお話しします。

多様なブラウザやデバイス、キーボードでの操作にスクリーンリーダーによる読み上げなど、コンポーネントを実装する上で注意すべき点は数多くあります。
React Aria は、これらの要件を包括的にサポートしており、アクセシブルな UI コンポーネントの構築に適しています。

本発表では、React Aria を活用した多言語対応の DatePicker、キーボードやスクリーンリーダーで操作可能なドラッグアンドドロップ機能付きのコンボボックスなどの具体例を通じて、
カスタマイズの容易性、学習コストと実装効率など、実践から得た知見を共有します。

デザインシステムは、一貫性のあるユーザー体験を提供し、製品開発の効率を向上させるために、デザインの原則や再利用可能なコンポーネントをまとめたものです。

このセッションでは、弊社で取り組んでいるデザインシステムの構築を支えるデザインツールやプロジェクト構成、コーディングとデザインの連携方法について紹介します

iframeは、sandbox属性を利用することで、Webアプリケーション本体と切り離された安全なスクリプト実行環境として利用することができます。

しかしながら、iframeをsandbox化すると、Webアプリケーション本体からiframe内への処理呼び出しや、その逆の呼び出しが直接行えなくなります。

具体的には、それぞれのWindowオブジェクトのpostMessageメソッドと、onmessageハンドラーを利用したメッセージングを行う必要があります。この処理の実装は、目的を最低限満たすだけでもかなり重厚になってしまいます。

Comlinkは、この複雑化しやすいメッセージング処理の実装を単純化してくれるライブラリです。

本発表では、実際に発表者が開発で対面したiframe間通信実装の複雑性による課題と、それをComlinkの導入によっていかに解決したかについて解説します。

BtoB向けサービスのフロントエンドアプリケーションを開発・運営にあたっては、扱うデータの量が時間とともに変化していくため、パフォーマンス最適化は避けて通れない課題となっていきます。
また規模の大きい企業様にご利用いただく場面では、エンタープライズ向けブラウザへも観点を向ける機会が出てまいります。
本レギュラートークでは、私が所属するログラスにおいて、直近数年間のサービス運用を通じて得た気付きや実践的知見をもとに、以下のテーマでお話してまいります。

• データ量の多さと向き合うパフォーマンス向上策: 仮想スクロールなどをはじめ、取り組んだ技術的詳細について紹介
• 知られざるエンタープライズ向けブラウザの存在: Chrome Enterpriseは通常のWebブラウザとなにが異なるのかを紹介します

静的Webサイト生成（以下、SSG）という、テンプレートからHTMLを生成する技術があります。

SSGにはNext.jsやAstro, Gatsby.jsなどが広く用いられています。いずれもフレームワークとして様々な機能を備えている一方、プロジェクトによっては全ての機能を活かしきれず、むしろキャッチアップコストの増大に繋がる場合があります。

このトークでは、シンプルかつメンテナビリティの高いSSGの基盤をVikeで構築した際のケーススタディを紹介します。
具体的にはMeguro.es ( https://meguro.es ) のWebサイト開発におけるVikeの活用方法を通して、いかに少ない工数で壊れにくい静的Webサイトを作成したのかお話します。

プログラミングにおいては、実装ミスや外部入力の誤りなど、さまざまなエラーが避けられません。
これらのエラーが適切に処理されない場合、アプリケーションの整合性や信頼性が低下してしまいます。
また、エラーの表現形式やハンドリング方法によっては、コードの責務が不明瞭になることもあります。

本セッションでは、エラーをどのように表現しハンドリングすれば、コードの責務を効果的に明確化できるのかをTypeScriptの実践例を交えて紹介します。

Webアクセシビリティについて注目が集まる中で、幅広い知識が必要になることや本質的な目的が捉えにくい側面もあり、何からはじめるといいのか分からない人も多くいると感じています。

ここでは、Webアクセシビリティの概要についてお話しした後、Webアクセシビリティ向上のための第一歩としてeslint-plugin-jsx-a11yやmarkuplintなどのLinterの活用について紹介します。

また、これらのLinterを実際の既存プロダクトへと導入した際の体験談や、導入において考慮すべきポイントについてお話しします。

モーダルとはウェブアプリケーションにおいて主要な画面の上に表示される少し小さなウィンドウです。このモーダルは現在のウェブアプリケーションの開発において(比較的)切っても切れないものになっています。

従来、Reactでモーダルを表示させるにはモーダルの開閉状態を管理していました。しかし、Nextjs13からParallel Routesが導入されモーダルの状態管理から解放されました。
本セッションではNextjsを使ったモーダルの実装例から状態管理をせずにUIを構築できることの良さについてお話ししていきたいと思います

近年、VueとTypeScriptの組み合わせがフロントエンド開発において注目されていますが、かつてはこの組み合わせに対して懐疑的な見方も存在しました。このセッションでは、初期の課題を乗り越え、現在VueでTypeScriptを効果的に活用する方法とそのメリットを深堀りします。特に、型安全性、開発効率、そしてプロジェクトのメンテナンス性の向上に焦点を当て、具体的な実装例と共にこれらの利点を発表したいと思います。

本セッションではフロントエンドをより頑健な実装にしていくための関数型プログラミングのエッセンスについてお話しします。
フロントエンド開発においても「イミュータブル」など関数型プログラミングに関連する概念に出会う機会は多いと思いますが、いざ体系的に学ぼうとすると数学的な定義の難しさや手続き型のコーディングとのメンタルモデルの違いが立ちはだかります。
そこで本セッションでは関数型プログラミングというパラダイムそのものの基本的な考え方やフロントエンド開発に特に有効と思われるエッセンスを実装例と共にご紹介し、フロントエンドエンジニアの目線から関数型プログラミングを紐解きます。

自社や個人で開発しているサービスをスマートフォンで使えるようにする方法はいくつか存在する。

スマホのブラウザで使えるようにレスポンシブデザインに対応することや、PWAであればWebフロントエンジニアが得意な方法だろう。
また、アプリを最近話題のFlutterなどのクロスプラットフォームでアプリを開発したり、もしくはそれぞれのネイティブアプリを開発する選択肢もあるだろう。

どのような選択肢が存在するのか、それぞれのメリットデメリットを考え、どのような場合にはどの選択肢がベターなのかをネイティブアプリ開発者の視点からお話しします。

現代のフロントエンドは様々な技術によって支えられています。ライブラリを使えば解決する課題が多くある時代です。

しかしながら、100%自分たちの解決したい課題にマッチするとは限りません。最後の最後は己の力で帳尻を合わせていく必要があります。

本発表で扱う題材はファイルツリーです。エディタを利用している人であれば1度は見たことあるUIです。様々な仕様が存在し、さまざまな責務との境界に面している場所のひとつです。

基本的なデザインパターンや、アルゴリズムを用いて実装することはもちろん、リアルタイム通信やユーザーインタラクションが発生した場合、どのように実装するのか、一緒に考えていく発表をしたいと思います。

本発表の対象者はJavaScriptを知っている人なら誰でも聞ける内容を予定しています。

　p5.jsは、Processing言語をベースにした、クリエイティブコーディングのためのJavaScriptライブラリです。簡単にグラフィックやアニメーションを生成し、Web上で動作するインタラクティブな作品を創出できます。Webエディタを利用すれば、環境構築なしに利用することができます。Webカメラやマイク、Web Serial APIなどを通じた外部デバイスとの連携も可能です。さらに、Googleの機械学習ライブラリMediaPipeを使い、物体認識や骨格認識などの機能をWebサイトに簡単に実装できます。
　LTでは、p5.jsの基本機能や活用事例を、実際のコード例を交えて紹介します。例えば、外部デバイス（M5Stack、toio）との連携、オーディオスペクトラムアナライザ、骨格情報を使用したゲームなどを取り上げる予定です。LTを通じて、p5.jsの可能性をお伝えできればと思います。

GraphQLは非常に強力な技術で、うまく使えばWebフロントエンドだけでなく全体の開発体験やユーザ体験を大きく向上させてくれます。
一方で、使い方を誤るとユーザ体験は悪化し、バックエンドやインフラのエンジニアを苦しめ、フロントエンドにまで生産性低下や将来の負債を生み出すこともあり、使えばそれでOKという技術ではありません。

では、ユーザも関係する全ての開発者も、誰もが消耗せずGraphQLの恩恵を享受するには？
それには実装時の細かなTipsからクエリやコンポーネントの設計, スキーマ設計, アーキテクチャ, プロダクトの構成など、様々なレイヤ・抽象度のものが関係します。

本セッションでは関係者みんなが「GraphQLを入れて良かった」と思えるために、Webフロントエンドエンジニアは何を考え・どのような設計・実装をすべきかを具体的なプラクティスとともに紹介します。

「WebアプリはWebスタックでつくり、アプリはSwiftやKotlinでつくるのが正しい」という考えは根強く、多くの現場でWebフロントエンドとモバイルアプリは別物として取り扱われます。しかしユーザにとっては違います。Google検索でアプリを探すように、アプリストアから自分にあうアプリを探します。気に入ったWebアプリはモバイルアプリで使いたくなったり。

本セッションでは、Webアプリの時はユーザが少なかったアプリが、モバイルアプリをリリースすると多くのユーザを獲得した実例から、プラットフォームの特性やユーザ行動の違い、そしてWebアプリをモバイルアプリ化できるCapacitorの簡単な始め方と、モバイルアプリだからこそできる機能拡張についてお話します。

Webフロントエンドからモバイルアプリ領域に手を広げることで、ユーザに選択肢を、アプリにより大きな価値をつくりましょう！

プロダクトを長期運用していると、定期的なマイグレーションの必要性が生まれます。「フレームワークの記法が変わった」「ECMAScriptにプライベートプロパティが導入された」等、誰しも「本当にこれ手作業で書き換えするの？生産性とは！！！」という経験をしたことがあると思います。

様々なマイグレーションを試みましたが、フロントエンドにおいてはESLintの自作ルールは最強のマイグレーションツールになりえます。本セッションでは実際に公開している @rdlabo/eslint-plugin-rules を例に、ルールとマイグレーションの自作を推奨し、簡単な始め方のご紹介をします。

アラカンおじさんのnakayoshix(なかよしX)こと中村良幸です。ヨーガ歴30年のダルシム系エンジニアですが、現在は隠居系フリーランスとしてデータサイエンティスト兼機械学習エンジニア的な仕事をしています。

私はフロントエンド方面に関しては全くの素人ですが、つい最近Twitter(自称X)にてPythonで作られたWebアプリ作成用ライブラリ『Gradio』の存在を知り、これは面白そうだということで早速使ってみたところ、機械学習向けWebアプリが本当に瞬殺で作れることがわかり、この興奮と感動をこの機会に是非皆さんにもお伝えしたいと思いました。

なお、Gradioで作成したWebアプリはHuggingFaceのSpacesでアプリを公開することも可能で、Stable Diffusionで有名なWeb UIの一つstable-diffusion-webuiもGradioを使用しています。