Zenn
👾

フロントエンドカンファレンス北海道 プレイベント in SAPPORO ENGINEER BASE 参加レポ

に公開
ポエム
新人
イベント参加レポート
zennfes2025free
idea

はじめに

札幌で開催されたエンジニアイベントに参加してきました。
イベントの内容や、参加して感じたことをメモとして残しておきます。
このイベントは、私のような初心者でも気軽に参加できる雰囲気があり、定期的に開催されているのも魅力のひとつです。
エンジニアとしての第一歩を踏み出したい方や、技術に興味がある方にとって、参加のハードルが低く、学びや交流のきっかけになる場だと感じました。

🔗 イベントリンク

イベントについて

📅 2025/08/30
📍 SEBカフェ

  • イベント概要(connpassより抜粋)

今回は、2025年9月に開催される「フロントエンドカンファレンス北海道2025」に先駆けて、フロントエンド技術に焦点を当てたミートアップイベントを開催します！
モダンなWebフロントエンドの世界では、日々進化するフレームワークやツール、UI/UXのトレンドにキャッチアップしていくことが求められます。 今回は、フロントエンドのセキュリティやフロントエンドカンファレンスに関する話題をはじめ、幅広い分野や最新トレンドについて、ゲストにお話しいただきます。

札幌エンジニアベース (SEB)

  • 市が実施するエンジニア育成組織
  • 活動内容
    • ITエンジニアのキャリア・働き方に関するイベントを定期開催
    • 月2回のもくもく会
    • ITイベントの開催支援

司会

  • kou さん（札幌エンジニアbase運営）

ゲスト

  • canalun さん
  • はくすけ さん

登壇者① minami さん

  • 菌類好き、特にHypomyces。フロントエンジニア志望
  • 「顕微鏡を買う」をモチベに学習中
  • フリー登壇者で現職エンジニアのフィードバックをもらうために参加

作品紹介

Hypomycesの植生マップ

  • キノコに寄生する菌類の一種

  • 国ごとの記載種をDB化 → APIを作成

  • 料理検索アプリ

    • 英語入力でレシピを取得
    • Firebaseでお気に入り機能を追加予定

👉 課題：外国のAPIを使用しているので英語での検索のみにしか対応していない
👉 暫定解決策：日本語対応しているcookPadなどのAPI使用に変更する

登壇者② はくすけ さん

  • 現職SWE

    • iDeCo, NISA関連サービス開発
    • TerraformからReactまで幅広く担当
    • WASMの人

  • 活動

    • フロントエンドカンファレンス実行委員
    • 函館本線勉強会 主催

WebAssembly (Wasm)

  • スタックベース仮想マシンのバイナリ命令形式

  • 特徴

    • CPUアーキに依存しないポータブルなコンパイルターゲット(JVMみたいなもの)
    • ブラウザ/バックエンド（WASI）で実行可能
    • CPUに近い処理が得意なため、JSより高速
    • C+/Rust/Goなどのコンパイル先となる

DB × Wasm

  • DuckDB-Wasm, PGLite, SQLite-Wasm
  • DuckDB: 分析処理特化RDBMS
  • OPFS: ブラウザが管理する領域であり、ユーザーから隔離されているため、セキュリティリスクが低減される
  • WebWorkerを使えば、数十万〜数百万行のデータもフロントエンドで非同期処理できる

実例紹介

  • DuckDBを使ったフロントのDBを使用する形のサンプルアプリ
  • CSVをフロントのDuckDB内に持ち、クライアントから直接クエリを投げる形
  • 20000行のDBであれば実用できるレベルのパフォーマンスがある(300msくらい)


参考：DuckDBのロゴ(かわいい)

登壇者③ すばる さん

  • 北海道科学技術大学で登壇経験

  • 北大IT研究会 部長

  • 大学三年生

  • 仕事実績

    • Webフロントエンド担当
    • 趣味でバックエンド（SQLアンチパターンも学習）(凄すぎる・・・！)

📅 次回登壇予定: 札幌IT石狩鍋イベント（火曜予定）

すばるさんの登壇内容については、一部非公開情報もあるため省略

登壇者④ canalun さん

  • 会社: フラットセキュリティ（脆弱性診断）
  • Firefox 開発、Chromium バグハント経験あり
  • 元フロントエンド → ブラウザ好きが高じてセキュリティ会社へ

バグハント

  • Chromiumなどのブラウザの実装にセキュリティ的な穴やバグがないかをレポートする
  • 脆弱性を報告すると報酬（例: $100〜$3000）
  • ちょっとした副業になっているそう

セキュリティの話

  • XSS: 他人に任意JSを実行させられる脆弱性
    Googleの社内でもXSSが放置されていた実例があるほど、あるあるな脆弱性

  • よくある原因

    • innerHTML直書きなど → フレームワーク防御機構を無視
    • React/Vue: JSXで安全だが、dangerouslySetInnerHTML, v-htmlは要注意
    • 自作サニタイザーを使用してサニタイズしている
      　※htmlの実行順など感覚的ではなく、複雑化しているため

  • 対策

    • 信頼できるサニタイザー利用（自作は危険）
    • CSP, WAF, semgrep の導入
    • API由来データでも危険を想定する必要あり

Closing & 所感

学び・気づき

  • 自分を含めて未経験エンジニアは「無から学習する方法」に悩む

    • もし後輩に聞かれたら何を進めるか/どう教育してあげるべきか・・・。

  • 他職種・他規模のエンジニアとの交流で立ち位置が明確になった

  • 無料で知識を吸収できて楽しい。若いうちにもっと参加して風呂敷を広げたい

    • 特にブラウザ/ OSなどアプリレイヤーよりも下層にあたるものを勉強したい

Appendix 個人メモ

  • zsh → 「じーしゅ」と読む
    • 設定ファイルからターミナル起動時に自動実行可能
  • Neofetch: OSロゴ＋CPU/メモリ/ディスク情報をASCIIアート表示するもの
  • バイパス: 本来 WAF が検知すべき「攻撃」を 検知されないようにすり抜ける手法
    • ※WAFに対するという文脈※

Discussion