フロントエンド領域のエンジニア・デザイナー向けの技術カンファレンス「フロントエンドカンファレンス北海道2024」を2024年8月24日(土)に札幌で開催

みなさん、こんにちは！ 「フロントエンドカンファレンス北海道」の運営チームです。 私たちは、来る2024年8月24日（土）に、北海道札幌市で、全国のプロダクト開発に携わるエンジニアとデザイナーが交流できる場所を作り出すことを目指し、「フロントエンドカンファレンス北海道」を開催することを決定いたしました！ これに伴い、「フロントエンドカンファレンス北海道」に少しでも興味を持っていただくための情...

はじめに フロントエンドカンファレンス北海道2024の登壇者が決定いたしました！ 最終的に160件のご応募をいただいた中から、30件のプロポーザルを採択させていただきました。 想像をはるかに超えるたくさんの方々からご応募いただきまして、本当にありがとうございました！ どのプロポーザルも、バラエティに富んだ魅力的な内容ばかりでした。 タイムテーブルの都合上、すべてを採択することはできないため、...

こんにちは！フロントエンドカンファレンス北海道コアスタッフのたかぎとねこ（@takagimeow）です！ みなさま、いかがお過ごしでしょうか？私が住んでいる北海道札幌市では雪がほとんど溶けてきましたが、まだまだ寒さと暖かさの入り混じった気温を感じる今日この頃となっております。 トーク募集の開始 さてさて、早速本題に移りたいと思いますが、ご存知の通り2024年8月24日（土）に北海道札幌市にて...

みなさんこんにちは！フロントエンドカンファレンス北海道コアスタッフのえび 🦐（@025cm）です！ フロントエンドカンファレンス北海道 2024、開催まで残り 2 週間！ みなさんそろそろ札幌滞在時の過ごし方を計画される頃合いではないでしょうか。 ところで、札幌といえば、飲みの後の締めパフェ文化が有名ですね。 パフェまでは重たい…でも、札幌の夜を満喫したい！！！！！ そんな皆さまに、夜カフ...

古くはSASS等のプリプロセッサ系言語から、CSSモジュール、CSS in JS、ゼロランタイムへの希求など、CSSを扱う手法は注目を集めてきました。 昨今ではlayerやnestingの導入に代表されるように、CSS自体の機能も充実しつつあります。 ところで、CSSでのレイアウトを実装するとき、どれくらい仕様にある概念を意識しているでしょうか？ 基本のボックスモデルはいいですよね。マージン...

Next.js App Routerの安定版がリリースされてから1年以上が経過しました。Next.js Pages Routerのままでよいのか、App Routerに移行するか、あるいは他のフレームワークへ移行するか、皆さんも悩まれていることでしょう。 本講では、開発開始から2年半、運用開始から2年の実稼働アプリケーションである、10万行超のNext.jsプロジェクトを事例としてご紹介しま...

HonoXはHonoベースで作られたフレームワークです。そしてHonoには、react-rendererというサードパーティーのmiddlewareがあります。 このHonoXとreact-rendererを組み合わせることで、HonoXでReactを使用することが可能になり、Reactベースのuiライブラリを使用しつつ開発を行うことが可能になります。 本セッションの詳細は以下の通りです。 -...

JavaScriptとwasmを連携させる場合に問題となるのが、非同期処理の扱いです。 特に、現在のwasmは同期的に実行されるものであり、JSと連携させた場合には同じコールスタックを共有します。 そのため、wasmからJSに制御を移し、非同期処理を行ってからwasmに制御を返すといった挙動を実装するためには工夫が必要になります。 このトークでは、Rustでwasmを出力する場合について、非...

こんにちは！フロントエンドカンファレンス北海道コアスタッフのたかぎとねこ（@takagimeow）です！ みなさま、いかがお過ごしでしょうか？私が住んでいる北海道札幌市では雪がほとんど溶けてきましたが、まだまだ寒さと暖かさの入り混じった気温を感じる今日この頃となっております。 トーク募集の開始 さてさて、早速本題に移りたいと思いますが、ご存知の通り2024年8月24日（土）に北海道札幌市にて...

Redux Toolkitは、ステート管理ライブラリであるReduxをより使いこなし、効率的にアプリ開発をするためのライブラリです。 我々のサービスでは、複雑なフォームを提供する画面にReact、ReduxおよびRedux Toolkitを使用していました。 ある時、Redux Toolkitのマイナーバージョンアップを行うと、フォーム入力時の再レンダリングにかかる時間が約4倍になってしまい...

# 概要 フロントエンドカンファレンス北海道2024に提出するためのプロポーザルを書く会です！ 以下のような悩みを抱えている方やプロポーザルの提出に挑戦したい方は、ぜひ参加してください！ * 「LT会や勉強会で登壇したことあるけど、カンファレンスで登壇したことない方」 * 「フロントエンドの実装をしているがトークのネタが思いつかない方」 * 「登壇したいけど勇気が足りない方」 *...

Webアクセシビリティについて注目が集まる中で、幅広い知識が必要になることや本質的な目的が捉えにくい側面もあり、何からはじめるといいのか分からない人も多くいると感じています。 ここでは、Webアクセシビリティの概要についてお話しした後、Webアクセシビリティ向上のための第一歩としてeslint-plugin-jsx-a11yやmarkuplintなどのLinterの活用について紹介します。...

こんにちは！フロントエンドカンファレンス北海道コアスタッフのたかぎとねこ（@takagimeow）です！ みなさま、いかがお過ごしでしょうか？私が住んでいる北海道札幌市では雪がほとんど溶けてきましたが、まだまだ寒さと暖かさの入り混じった気温を感じる今日この頃となっております。 トーク募集の開始 さてさて、早速本題に移りたいと思いますが、ご存知の通り2024年8月24日（土）に北海道札幌市にて...

フロントエンドエンジニアのみなさん、 **週末なにしてますか？** きっとコードが書きたくて書きたくて、個人開発をしているでしょう。 しかしフロントエンドだけだとWebアプリは完成しません、バックエンドやデータベースなども構築する必要があるでしょう。 我々はしがないフロントエンドエンジニア、フロントエンド以外は専門外、個人開発でAWSなどを使うのは金銭的にも厳しいのが現実。 フロントエンドエ...

私は普段、開発物を実際にスクリーンリーダーを使って操作して、アクセシビリティ上の問題がないか確認することを習慣にしています。 その活動の中で、スクリーンリーダーを使って初めて気づいたアクセシビリティ上の課題や、コードレビューやブラウザの開発ツール、キーボード操作では見逃しがちなアクセシビリティ上の課題を紹介します。 アクセシビリティに詳しくない方でも理解しやすい内容で、スクリーンリーダーの利...

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

みなさんこんにちは！フロントエンドカンファレンス北海道コアスタッフのたかぎとねこ（@takagimeow）です！ フロントエンドカンファレンス北海道2024、開催まで残り１ヶ月を切りました！ 応援していただいている全ての方々のおかげによって、私たち運営チームは着々と準備を進めることができております。この場を借りて、感謝申し上げます。 さて本日は、私たち運営チームがどのような体制を組み、日々活...

ブラウザによる「テキスト描画」について、Chromiumへのコントリビュートを通じて得た知見をもとに深ぼります。 ブラウザが受け取ったデータはシェイピングエンジンやグラフィックライブラリなど、様々なモジュールを通って初めてモニター上のピクセルとして具現化されます。 ただし、多くの要素が事態を複雑にします。 フォントの変更。CSSによる線や強調点、カゲの付与。 カーソルにより選択された部分のハ...

「Webフロントエンドは混沌としている」と話題となることが増えてきましたが,果たしてそれは事実なのでしょうか？それは「フロントエンドエンジニア」という役割の存在を否定するものなのでしょうか？ 私自身が個人でWebの歴史についてまとめたScrapboxを元に、個人的見解を織り交ぜフロントエンドの魅力とそこに携わるエンジニアの役割について発表します. ＜話すこと＞ ・WorldWideWeb登場...

最近、テクニカルライターとして Docusaurus と睨めっこしています。 ドキュメントを提供する上で、時にはインターネットにアクセスできないお客様のためにPDF化が必要になります。 Docusaurus には PDF を生成する 3rd party のプラグインもありますが、Docusaurus自体のバージョンアップに追従する難易度や、メンテナビリティを考慮して採用を控えました。...

環境構築の容易さ、開発速度、ランニングコスト等々、個人でWebサービスをやっていく上で「ユーザーへの価値提供」以外の様々な要素があり、個人開発者にこんな悩みを与えがちです。 - モダンなSPAで作りたいけど知識と時間が足りない... - 少し軌道に乗ってきたけどfrontとapiでサーバを二つ運用していてコストが高い... - 開発速度を優先してテンプレートエンジンで作ったけど、流石にパフォ...

皆さんは、ユーザーの手元で起きたバグをなかなか再現できずエスパーで直した経験はないでしょうか。あるいは、ユーザーの動きを想像しながら機能の導線改善をした経験はないでしょうか。 そんな仕事を楽にするツールとしてSentryやDatadog、Fullstoryなどが、ユーザーの画面をそのまま見れるセッションリプレイ機能を提供しています。 さて、これはどのように実現されているのでしょうか。Webア...

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

フロントエンド開発者であれば、JavaScriptに真剣に向き合わないといけないシーンが多々訪れると思います。 基本的にはMDNなどを参照するだけでよく、ECMAScript仕様本体を参照しないといけないケースはほぼありませんが、正確な挙動を理解したり、新機能の提案にキャッチアップするために読みたくなるシーンがあるでしょう。 本発表では、「ECMAScriptの仕様を読むには最低限これを知っ...

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

ここ数年、新卒研修でWebプログラミング講師を担当しています。 研修は受講者の経験レベルもバラバラで時間も限られますが、実施するからには次のことを学んで欲しいと思いました。 * ブラウザはアクセスしたURL以外にも、タグに書かれているURLにアクセスする * サーバーは特定のパスに該当するアセットやデータを返す * ヘッダーフィールドはTCPの上でHTTP通信を実現するためにとても重要 *...

Next.jsアプリケーションをひとつのモノリスアプリケーションとして立ち上げたところから、拡大に伴いコンパウンド戦略を実現するマルチアプリケーションとして分割するところまでの4年間の変遷と移行ステップを紹介します。 フェーズによって最適な構成が異なることがわかってきたので、創業期〜拡大期におけるチーム構成や人数感の変遷を共になぞりながらお話しします。 以前Zennに投稿した以下の記事のその...

※当イベントへの参加によってプロポーザルの採択が確約される または採択確率が上がるといった保証がされるものではありません。 ## イベントについて フロントエンドカンファレンス北海道2024 8月24日(土)に開催されるフロントエンドカンファレンス北海道2024のプロポーザル締切が5月5日(日)と迫っています！ 「イベントに登壇してみたいけど自信がない」 「イベント登壇してみたいけど、何をす...

皆さんも日頃からBasic認証を使っていると思います。 しかし実装がどうなっているかはご存知でしょうか。 大体のフレームワークのプラグインを使わずに自前で実装するとすると何が必要になるがご存知でしょうか。 Authorizationヘッダーの構成要素に名前や仕様が存在していることはご存知でしょうか。 Basic認証はHTTP Authenticationの枠組みの一つでしかないことはご存知で...

現在、製造現場DXプラットフォーム、「Smart Craft」の開発を進めており、4人のエンジニアがフロントエンドからバックエンドまでを担当しています。 限られた人数で最大限の成果を出すために、私たちはGraphQLを用いたコードファーストアプローチに基づく開発を選択しました。 本セッションでは、2年間でやってきたことを通して、GraphQLを選択した理由やコードファーストアプローチに基づく...

2023年の12月、『timer.team』というWebアプリをリリースしました。開発にはTypeScriptを採用し、ランタイムとしてDenoを、フロントエンドフレームワークとしてFreshを選択しました。開発記録をまとめた記事[1]には注目が集まり、Zennのトレンドにも掲載されました。 本発表では、Denoのエコシステムを活用した開発の具体例を踏まえて、Freshの選択により大きなメリ...

Threlte（スレルト）は、ウェブのための3Dフレームワークです。コンポーネントフレームワーク「Svelte」と、WebGLをベースにした3Dコンピューターグラフィックライブラリ「Three.js」をもとに、Grischa Erbeらが開発しています: https://threlte.xyz/ このフレームワークでは、宣言的な形式でThree.jsにある全ての機能を利用できます。また、物理...

最近、ぼくはメガベンチャーのプロダクトデザイナー（兼フロントエンドエンジニア）から、 ０->1な事業開発を推進するキャリアへ舵を切りましたが、開発に対しての考え方も変わりつつあります。 画面設計、UIコンポーネントの選定はもちろん、品質への考え方、開発スピード、プロジェクトの進め方など... それらへの思考は、事業ドメインや、事業成長のフェーズによって大きく変化します。 ただ、どのフェーズで...

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

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

北海道内では現在フロントエンドと呼ばれる領域が十分に広まっておらず、どう取り入れるべきか、どのようにして取り組めばいいのかが適切に伝わってないような気がしています この登壇では登壇者個人の視点でありながらも、北海道内の地場企業がフロントエンドと呼ばれる領域に自社の開発リソースを投じ、事業利益に繋げるステップバイステップのやり方を提案してみようという試みです これを契機に北海道内企業が今の形に...

ブログなどのコンテンツを投稿できるWebサービスを開発する際、コンテンツを編集するためにエディターを開発することがあります。tiptapは、WYSIWYGエディターを開発するためのツールキットです。 このトークでは、Tiptapを使ってエディターの機能を開発する方法と、より高度なAPIであるNode viewsやProseMirror Pluginsを使ってオリジナリティのある機能を開発する...

React Hook Formはバリデーション機構を備えた、パフォーマンスが高く柔軟なフォームを開発するためのライブラリです。 我々のサービスでは、フォームを提供する画面にReact Hook Formを使用しています。改修を重ねて複雑になっていたフォームのコードを整理した経験をもとに、複雑さを抑えるためのフォームの設計方法や、ライブラリ標準の機能では実現できなかった課題を解決するための実装...

Swiftといえば、iOSやmacOSアプリを開発する言語だと思い込んでいませんか？ 実はLinuxやWindowsでもサポートされている、汎用プログラミング言語です。 意外と知られていない事実ですが、Swiftは、「さまざまな用途で使える最高の言語を作る」という、とても野心的な目標を持って開発されています。 さて、SwiftWasmというプロジェクトがあります。 これは、WebAssemb...

iframeは、sandbox属性を利用することで、Webアプリケーション本体と切り離された安全なスクリプト実行環境として利用することができます。 しかしながら、iframeをsandbox化すると、Webアプリケーション本体からiframe内への処理呼び出しや、その逆の呼び出しが直接行えなくなります。 具体的には、それぞれのWindowオブジェクトのpostMessageメソッドと、onm...

発表者はサーバーサイドの開発に強みを持っていますが、必要に応じてフロントエンドやインフラの開発も行う業務プログラマです。 業務でのフロントエンド開発としては、これまでReact、React Native、Vue.js、Flutter(ネイティブアプリ)などのモダンなライブラリ・フレームワークも利用しています。 発表者は、デザイン、formatterやlinterやビルドなどのフロントエンドツ...

4月に行われたCloudflareのDeveloper WeekではデータベースやAIの製品発表に隠れるように「JS RPC」という機能が追加されました。JS RPCでは、Cloudflare上のWorkerからWorkerを呼び出すのがRPCで行うことができるようになる。これはセキュリティと開発者体験を向上させます。外部Web APIを叩く時、一般的にはエンドポイントのURLと認証トークン...

1つのNext.jsアプリケーション用として運用していたリポジトリをモノレポへ移行した話をします。 プロジェクトごとにリポジトリを分けるポリレポに対して、モノレポでは「プロジェクト間でコードの共通化がしやすい」「プロジェクト間の依存関係が見やすい」といったメリットがあります。 しかし目的の異なるコードベースを1箇所にまとめるためメリットの反面、複雑さが増す部分もあり、例えばCI/CDが遅くな...

機械的に手を動かして書き換えるだけのリファクタリング作業は、なるべく避けたいものです。 ひとつふたつ書き換えるだけであれば問題ありませんが、それが幾多にも及ぶと手に負えません。 codemod はそういった作業を代行してくれる強力なツールです。 一方で、このツールの実装には抽象構文木(以下、AST) の知識が必要なことから、敷居が高いという印象を持たれてしまいがちです。 このセッションでは...

大規模なBtoBサービスにおける段階的なシステムリプレイスを実施しています。JSPで構築されているシステムのフロントエンド部分をNext.js（Pages Router）とGraphQL（Relay）にリプレイスしています。 フロントエンドチームのリーダーとして関わり、開発を開始してから約2年が経過し、初期リリースからは約1年が経過しました。 これまでの経験から、リプレイスを進める中で良かっ...

JavaScriptと同じようなシンタックスで、型付けされた関数型言語ReScriptを紹介します OCaml由来の信頼性の高いコンパイラーで高速に高効率なJavaScriptにトランスパイルされ、null、undefineが発生しない信頼性の高いプログラミングを実現できます ■シンタックス ・JavaScriptと同様なシンタックスでありながら強力な型推論 ・高機能なパターンマッチなどの高...

現代の多くの Web サイトにとって、Core Web Vitatls のような User-centric なメトリクスは非常に重要です。 Lighthouse などのツールは、計測環境を固定して使用すれば、変化の激しい Web サイトに対しての有効な定点観測手法となりますが、一方で実際のユーザー体験とは乖離することもあります。 New Relic などのオブザーバビリティバックエンドにある...

shadcn/uiはRadix UIをベースとしたUIコンポーネントライブラリです。コピペして使えることで有名ですが、実際にコンポーネントの中身を見ていくとコンポーネントを設計する上での気付きや発見があります。 そんな気付きや発見を紹介するLTです。 発表内容 - cvaを使った関心の分離 - プリミティブではないコンポーネントがどういう設計になっているかみる（Formコンポーネント） -...

テキストエディタ（WYSIWYG）をあなたのアプリに導入したいときに、技術選定で困ったことはありませんか？ 私は散々探索した結果「BlockNote」というリッチテキストエディタのライブラリに辿り着きました！これは従来の古めかしい見た目ではなく、まさにNotionのようなシンプルな見た目でわかりやすい操作性を持ったリッチテキストエディタです。 これはさらに、リアルタイム同期が可能なyjsとい...

JSON API が「型の割れ窓」と称されることもあるように、エンドポイント ―特に JSON ― の型付けには多くの開発者が頭を悩ませてきました。 世間にはフルスタックの風潮もある中で、技術スタックに手を加えられない環境も多々あることでしょう。 バックエンドが OpenAPI を生成するならそこから型定義も生成できますが、そうでない場合は？手書き？いやいやご冗談を。 本セッションでは、いず...

このセッションでは、OpenAPIを用いてフロントエンド開発におけるバックエンド依存の最小化する開発手法を紹介します。 OpenAPIはREST APIを記述する標準的なフォーマットであり、yamlまたはjsonファイルを用いてAPI仕様を定義します。 OpenAPIに基づき、バックエンドの実装を待たずにモックサーバを立ち上げます。これにより、フロントエンドの開発者は実際のバックエンド完成前...

本発表ではレガシーなフロントエンド開発の経験しかないチームが、デザインシステムとコンポーネント指向を導入し、従来の開発プロセスをどのように革新したかを、実例を交えて紹介します このチームはレガシーなコードの肥大化と複雑化に伴い、メンテナンス性と拡張性の問題に直面していました 新たなサービス開発を機にアトミックデザインをベースにしたデザインシステムの導入と、SPAフレームワークを用いたコンポー...

みなさんJavaScriptの創始者、ブレンダンアイク氏を知っていますか？ 20年以上前, Netscapeによって生まれた「JavaScript」. その創始者たるブレンダンアイク氏が書いたJavaScriptが生まれた経緯や今までどのような進化を遂げてきたか. 彼自身が書いているからこそわかる「JavaScript誕生から標準化、現在までの歴史」について書かれた全189ページのPDF「J...

フロントエンド開発において、レスポンシブ対応はとても重要です。 レスポンシブデザインを実現する方法として、メディアクエリが使われると思います。 Reactでメディアクエリの真偽値を受け取れるhook（useMediaQuery）を、useSyncExternalStoreを使って実装したことについてお話しします。 新卒の初学者である私がuseMediaQueryを実装していく中で、Hydra...

Vue2の時代には、Reactと並んで、大人気なフロントエンドフレームワークであったいわゆるVue系。Nuxt3はリリースが遅れてしまったことに加え、大規模かつ多数の仕様変更があったこと、そしてインフルエンサー層がこぞってNextに鞍替えしてしまったことなどから、そのユーザー数は大きく減ってしまった。特に、難度が上がった仕様変更の一つとして、Fetcherの使用方法が挙げられる。...

Swift!Swift!ぅうううわぁあああん!!! んはぁっ!Swiftたんの型安全な世界をWebフロントエンド開発でも体感したいお！ SwiftWasmたんを使えば、フロントエンドでSwiftたんを使うことができる…?きゅんきゅんきゅい! ぐああ!生成されるWebAssemblyバイナリのサイズが大きいから、Swift ちゃんをWebフロントエンドで使うのは 現実的 じ ゃ な...

概要: アプリケーションの構築にComponent-Drivenなアプローチがあります。このアプローチでは、コンポーネントを中心とした設計がデザインと開発の両面で重要です。しかし、デザインとフロントエンド開発の間にはしばしばコミュニケーションの断絶が見られ、結果としてコンポーネント設計において不一致が発生します。 このセッションを通じて、デザイナーとフロントエンド開発者がより効率的に協力し、...

注意：Lighthouseをはじめとする検査ツールは、全てのアクセシビリティの問題を検査できるものではありません。また、アクセシビリティ改善の目的は「Ligthouseの点数を上げること」ではなく「より多くの状況から使えるようにすること」です。あくまでもアクセシビリティの伸びしろを見つけるための手段として使用してください。 あるコンシューマー向けのアクセシビリティが必須要件でないWebサイト...

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

エッジコンピューティングが急速に普及する中で、フロントエンドとバックエンドの従来の境界がどのように変化しているのか、そしてエッジをどちらのカテゴリに分類するかは面白いトピックです。 このセッションでは、エッジがフロントエンドとバックエンドのいずれに属するのか、またはそもそもこのような区分けが適切かどうかを探ります。技術的な境界がどのように変化しているかを見つめ直し、エッジが伝統的なカテゴリに...