@potato4d が @coffeephile に、Nuxt.jsの周辺ライブラリーに対するOSSコントリビューションについて話を聞きました。 ゲスト @coffeephile LINEデベロッパーサイトの開発担当 Nuxt Contentについて Nuxt Contentは、Nuxt.jsのモジュールであり、マークダウンコンテンツをウェブサイトのページとしてレンダリングするために使用される。 ローカルホストでの開発時にパフォーマンス問題が発生し、特にページ数が多い場合に顕著であった。 パフォーマンス改善の経緯 ローカルホストで開発した際、ページ間の移動が遅くなる問題が発生。 問題はキャッシュが効かないために発生しており、ホットリロードのためにキャッシュが無効化されていた。 nuxt/content 側のキャッシュを有効化し、ファイル変更時にキャッシュを削除することで、パフォーマンスとホ

@potato4d が @hiroya_UGA, @Pittan, @vivil に、Nu HTMLチェッカーのセルフホスティングについて話を聞きました。 ゲスト @hiroya_UGA 出前館に出向してコンシューマ向けのウェブアプリケーションの開発に携わり、兼務でウェブアクセシビリティチームに在籍。 @Pittan LINEギフトのフロントエンド開発を担当し、兼務でwebアクセシビリティチームに所属。 @vivil 社外アンケートプラットフォームチームのリーダーで、兼務でフロントの組織向けのDevOpsチームのインフラチームに所属。 Nu HTMLチェッカーについて Nu HTMLチェッカーは、W3Cがメンテナンスしていた公式のHTML文法チェックツールで、現在はWHATWGが管理している。 HTMLだけでなく、CSSの文法チェックも可能。 オンラインで利用可能で、ソースコードやURLを

@potato4d が @ytamemot に、PayPayカードと保険サービスにまたがるUIコンポーネントのVue 3マイグレーション戦略について話を聞きました。 About ゲスト紹介 tamemoto さん（デザインエンジニア） 2022年にヤフー株式会社に新卒入社、現在はPayPayカード株式会社に出向 マイグレーションの背景 Vue 2のEOLとセキュリティの観点からの移行必要性 PayPayカードのWeb版とミニアプリ版の両方でVueを使用 共通UIコンポーネントのnpmパッケージ化とそのマイグレーション マイグレーションの概要 約1か月半の期間で実施 機能開発と並行して行う 課題と解決策 カード側のVue 2からNuxt 3への移行 保険側のVue 2からVue 3への移行 ViteとWebpackの両対応の必要性 プロトタイプ機能を使った共通インターフェースの実装 特に苦労

2024年5月14日と15日に開かれたGoogle I/Oでの様子について、実際に現地で参加したフロントエンドエンジニアの4人が話しました。 宣伝 6月7日 (金) にGoogle I/Oを振り返るRecap Eventを開催！ 詳しくはこちらから: https://lycorptech-jp.connpass.com/event/319039/ Shownote Google I/O 2024 https://io.google/2024/ Developer Keynote Gemini NanoとChrome built-in AI View Transitions API Speculation Rules API Webセッション Baselineごとに分類されたWebの機能を確認できるページ https://webstatus.dev/ 英語について 採用について LINEヤフ

@potato4d が UIT INSIDE のリニューアルと、サステナブルなオウンドメディアのメンテナンスについて語りました。 リニューアルの目的 より良いユーザー体験 古いコードベースからの脱却 ユーザビリティの向上 メンテナンスフリーなシステム システムの維持管理を容易に 持続可能なメディア構築 リニューアルの背景 旧システム（Nuxt.js v2とVue 2）のサポート終了 社内基盤（コンテナサービス）の老朽化 全体システムの見直しと一斉更新の必要性 フロントエンドの変更点 ポッドキャストフロントエンド Nuxt.js v2からNext.jsに移行 ユーザー体験の改善 パフォーマンス向上（プリフェッチ、キャッシュの最適化） 音声プレイヤーの再設計 ポッドキャストアドミン Web UI廃止、CLIアプリケーションに切り替え シンプルでメンテナンスが容易な設計 JSONを用いたAPIと

@odan3240 が @cola119、@kazuma0129 とともにLINEログインのフロントエンドのVue 3化について話しました。 マイグレーション対象の概要 シングルページアプリケーションの構成 Vue 2のサポート終了に伴うセキュリティ懸念 パフォーマンス向上とTypeScriptサポート 実施したこと Vue 2.6から2.7へ、そしてVue 3へアップグレード 静的解析の強化とESLintでの破壊的変更検出 外部依存性問題と非互換性のプラグイン対応 Viteへの移行でビルド速度向上 ビジュアルリグレッションテスト導入 採用について LINEヤフー新卒採用 LINEヤフー中途採用 使用素材・クレジット BGM&SE 魔王魂 騒音のない世界 OtoLogic

サービスの課題やニーズを知ることを目的に実際にユーザーから意見を聞き出して調査するユーザーインタビューについて、2つの事例をもとに聞きました。 ユーザーインタビューについて ユーザーインタビューの流れ 質問する内容 インタビュワーとインタビュイーの信頼関係 ユーザーインタビューで得られる情報とは？ 実際に参加することで得られること ユーザーインタビューのスタンス 単に質問への答えを聞き出す、ではない フロントエンドエンジニアがユーザーインタビューに参加する意義 採用について LINEヤフー新卒採用 LINEヤフー中途採用 使用素材・クレジット BGM&SE 魔王魂 騒音のない世界 OtoLogic

こちらはEngineering Manager Advent Calendar 2023 12日目の記事です。 こんにちは、Isoparametric（Yuki Tamura）といいます。 今回はEMはCTOやVPoEの下位互換ではないということについて書きます。 私は今estieというスタートアップでEMをしております。 前職では不動産テックのCTOをしていて、その前はスマートニュースという会社でEMをしてました。 その前は、ディライトワークス、gumiという会社でCTOだったりしたこともあります。 それが何故またEMをという感じですが、入社の経緯などは、会社のブログの方にありますので興味があれば読んでみてください。 CTOを辞めて各社のCTOや最強のエンジニアが集う梁山泊estieに入社した理由 - estie inside blog では、CTO/VPoEとEMの互換性/再現性につい

今年になってからオフラインイベントに参加する機会が急に増え、「はじめまして」あるいは「お久しぶりです」の挨拶をする場面が多いので、SNSのアイコンを缶バッジにして装備している。 たとえ知り合いだったとしても3年リアルで会ってなければ見た目が変わってるので、やはりアイコンで認識してもらうほうが話が早い。相手からしても「多分知ってるひとなんだけど誰だったっけ…」と悩まなくていいのでやさしい。頭の上にアイコンとIDが見える時代が来るまではみんなこれ装備してくれ。 缶バッジは pixivFACTORY で制作した。一応suzuriと注文前に比較したけど、5個注文すると pixivFACTORY のほうが単価が安かった。5個くらいあると複数のバッグに常に忍ばせておけるし、失くしたときにも便利（さっそくひとつ失くしている）。 アイコンの画像をアップロードして、ちょっとIDのテキストラベルをレイアウトす

LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog はじめに こんにちは、東京大学大学院学際情報学府修士1年の野田栞穂と申します。2023年8/21~9/29の6週間、LINE株式会社の就業型インターンシップにサーバサイドエンジニアとして参加させていただきました。Data platform室のIU Devチームに配属され、LINE社内のData CatalogにOpenAI APIを利用したAI アシスタントシステムの導入を目指すというプロジェクトを行いました。 本記事では、そのプロジェクトの内容について報告します。 背景 IU Webとは LINEでは、データ利活用を促進するため、社内のデータをまとめて管理・処理できるInformation Universe(IU)というデー

LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog 9月8日に、フロントエンドコミュニティ UIT の20回目となるミートアップ UIT Meetup vol.20『これがぼくらのスタンダード』を開催しました。本記事では、イベントの内容について振り返っていきます。 なお、本編のアーカイブについては以下の YouTube 動画より閲覧が可能となっております。まだ見ていないかた、見逃したかたはぜひ視聴いただければと思います。本記事では、各セッション紹介でチャプターへのリンクを貼り付けているため、特定のトークから再生を始めることも可能です。 YouTube: https://www.youtube.com/watch?v=kNvXW2gqOfA UITとは？ UIT は、 LINE

はじめに こんにちは、minne事業部でwebアプリケーションエンジニアをしているkazuです。今回の記事は、コミットメッセージを書く時に、自分がこれまで愛用してきたgitmojiをやめた話をします。 そもそもminneの開発チームにおけるコミットメッセージのルール minneの開発チームでは、コミットメッセージのルールは特にありません。 私がペパボに入社した当初、「逆か」というコミットメッセージもあったりなどして、意外とみんなカジュアルにコミットメッセージを書いているなと思っていました。なるべく実際に開発をする中でのプロセスをありのままに残していきたいという思いがあるのかなと思っています。 gitmojiとは 特にコミットメッセージのルールがないということで、これまで自分が個人開発などでは使ってきたgitmojiをminneの開発チーム内でも使っていました。 gitmojiとは、gitの

2023 年 7 月 5 日に Prettier 3.0 をリリースしました。Prettier 2.0 がリリースされたのが 2020 年 3 月 21 日だったので、実に 3 年以上ぶりのメジャーアップデートとなります。 本当はもっと早くこのブログを書きたかったんですが、やる気が出ずだいぶ遅れてしまいました。 この記事では Prettier 3.0 の主要な変更点を紹介します。 Prettier 3.0 の主要な変更点 Prettier 3.0 はメジャーアップデートということもあって大きな変更がいくつか含まれています。ここでは、そのうちユーザーに直接的な影響がありそうなものを紹介します。 ここで紹介する以外にも大きな変更はありますが、プラグイン開発者向けのものとか、Prettier のソースコード自体が全部 ECMAScript Modules で書かれるようになったとか、ユーザーから

Introduction　ネット広告業界が2024年に向けてビジネスモデルの再構築を迫られている。ターゲティング（追跡型）広告の配信に使われる「サードパーティー・クッキー」を米グーグルが同年末までに廃止することを決めたからだ。サイトを訪れる個人の特定が難しくなり、精度の高いマーケティングを売りにしてきた広告事業者の収益力が落ち込む可能性がある。グーグルで最高プライバシー責任者（CPO）をつとめるキース・エンライト氏が狙いを語る。（聞き手は中西豊紀）

今朝他の同僚も別のMTGでやりだしていることに気づいたため、せっかくなのであらためて書いてみる。 「定例的な取り組みはダレる」を対策したい 担当プロダクトであるLINEスキマニでは、他の企業や組織と同じようにデイリーで午前中にMTGを行っている。いわゆる「朝会」と呼ばれるタイプの取り組みとなる。 事前にある程度議題を用意する場所があり、そこに書かれた内容に沿って進行しつつも、書きそびれた議題などもカジュアルに話せる場になっている。「デイリーで顔を合わせる機会」というのは、チャットで書くにはライトすぎて逆に書きづらい内容や「この流れでついでに〜」共有しておきたいタイプの事柄を話しやすく、存在意義は多分にあると実感できる。 一方でこうした取り組みは得てして「やること」がゴールへと変遷していきがち無価値になりがちであるため、そうならないように常に細心の注意を払っている。 その一つとして我々が取り

これだけみると LibC がよく見えますね。 オープンソースのライブラリ比較や、エンタープライズな SaaS が競合に対する優位を見せたいときに星取表が使われることが多いです。 中立な立場でライブラリを選定する過程として出てくることがあります。 自分はこれに全く意味がなく、むしろ競争的な立場では出した側が負けるものと認識しています。 星取表を作る側の意図 よく見かけるパターンがこれです。 開発自体は長いため機能が豊富だが性能に劣る先発が、後発を貶めている 恣意的な項目選定で、そもそも負けている そもそも比較対象としての土俵が違う(全部入りのフレームワークと単機能なライブラリの比較) 特に 1 と 2 の組み合わせが多く、この裏では非機能要件で圧倒的に負けていることが多いです。例えば A は機能は豊富だけどビルドに 30秒で、Bは機能は足りないけど3秒だといった場合、多くの場合ではまず B

LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog はじめに こんにちは。フロントエンド開発センター(UIT) Front-end Dev.9チームの鴻巣(@kazushikonosu)です。LINEスキマニおよびLINE Creators Marketのフロントエンド開発を担当しています。 LINEスキマニのフロントエンドチームでは、React/TypeScript製のWebアプリを開発しています。主にクライアントサイド向けのコードを扱っていますが、SSRのため同じリポジトリ内でNode.jsを使って実行されるTypeScriptコードも扱っています。クライアントサイドのモジュールバンドラとして長らくwebpackが使われていましたが、webpackを使い続けることでチームの

@potato4d が @odan3240 に、 npm に新規追加された provenance 機能について話を聞きました。 概要 npmのprovenanceは、npmパッケージとソースコードの対応関係を証明するための機能である。 サプライチェーン攻撃などのセキュリティ上の問題に対処するために開発された機能である。 provenanceを使用すると、パッケージのリリースごとにその出所やコードの紐付けが可能となる。 GitHub Actions上でnpm publishを行う場合にのみprovenanceを利用することができる。 provenanceの紐付け情報には、GitHub Actionsのメタデータやリポジトリの情報、コミットハッシュなどが含まれる。 provenanceによって、ソースコードの正当性やリリースの信頼性を確認することができる。 シグストアというサービスが署名の管理