Yappli Tech Blog

株式会社ヤプリの開発メンバーによるブログです。最新の技術情報からチーム・働き方に関するテーマまで、日々の熱い想いを持って発信していきます。

フロントエンド

ドキドキ初OSS!Nuxt BridgeにIssueとPR出してみた

この記事はヤプリ Advent Calendar 2023 7日目の記事です。 フロントエンドエンジニアの@k0n_karinです!今回は業務で利用中のNuxt BridgeにissueとPRを出す機会があったので、その体験記を書いていきます。 github.com きっかけ YappliのCMSでは、現在Nuxt2…

Inertia.js によるSPA実装の効率化とその仕組み

サーバーサイドエンジニアの田実です! SPAはMPAよりもユーザ体験が上がる可能性がある*1一方で、開発・運用が複雑になりがちです。APIスキーマの設計・管理、フロントエンドのルーティングの管理、認証認可・CORSなど、データを取得して表示するだけの簡単…

VueでWAI-ARIA Rolesに準じたComboboxを作ろう

フロントエンドエンジニアのこん(@k0n_karin)です! ヤプリでは毎四半期の末頃になると、各自が期初に立てた目標を達成するべく大量の記事が投稿されます!私ももれなくそのうちの一人です! WAI-ARIA、Roleとは 十分調べて記事執筆しておりますが、もし間違…

フロントエンドチームのSentry監視業務

Sentry大臣に就任しました。 こんにちは。フロントエンドエンジニアの武井です。 このたびフロントエンドチームのSentry大臣に任命されました。 なんやそれ、とお思いでしょう。 これはフロントエンドチーム内での役割分担を大臣と呼んでいるだけで、「○○担…

VueのSuspenseとRouterViewの組み合わせで正しくfallbackさせる

フロントエンドエンジニアのこん(@k0n_karin)です! 今回は昨今のVueに欠かせない2つの便利なコンポーネントを組み合わせて使う際のお作法を書いていきます。 VueのSuspense Vue3からはcomposition APIでsetup()や<script setup>を使う事が増えたと思います。 setup内で非…

Vueとhls.jsを使って、AndroidとiOSでいい感じにm3u8を再生する

フロントエンドエンジニアのこん(@k0n_karin)です! 今回は昨年末に書いたウェブストーリー関連のお話となります。 tech.yappli.io HLSでm3u8を再生する HLS用のcomposableを実装 composableを利用するVueコンポーネントを実装する おわりに HLSでm3u8を再生…

フロントエンドチームでgoのライブコーディングをした話

おはようございます。フロントエンドチームの武井です。 今回はフロントエンドチーム最近取り組んでいるライブコーディングを行いましたので、そのときの気付きを記事にしようと思います。 ライブコーディングについてはマネージャーの山田が以前の記事です…

VueでWebストーリーっぽいコンポーネントを作ってみた

この記事はヤプリ #1 Advent Calendar 2022 の19日目の投稿になります。 フロントエンドエンジニアのこん(@k0n_karin)です!今回は、Vueを使ってWebストーリーっぽいコンポーネントを実装してみましたので、その簡単な解説記事です。 Webストーリーとは 作っ…

ヤプリ フロントエンドの2022年を振り返る

ヤプリのフロントエンドチームが2022年に取り組んだ内容について紹介させていただきます!

JavaScriptで花火を打ち上げよう🎆

フロントエンドエンジニアのこん(@k0n_karin)です!今回は9割おふざけ、1割真面目なブログです。 TL;DR とにかく花火を打ち上げよう fireworks-jsとVue.jsでブラウザ上で花火を打ち上げる VSCode拡張機能で開発中もエディタ上で花火を打ち上げる エンジニア…

ヤプリのフロントエンドにおけるテスト戦略について話しました #Yappli Tech Conference 2022

皆さんこんにちは。プロダクト開発本部・フロントエンドチームの平川です。 Yappli Tech Conference 2022で 「フロントエンドにおけるテスト戦略」というテーマで登壇しました。 アーカイブ動画 youtu.be スライド 発表概要 ヤプリのフロントエンドは管理画…

Google Material IconsをVueコンポーネントとして書き出す

こんにちは。フロントエンドエンジニアの小林(baco16g)です。 デザインシステムの構築を進めるにあたり、各種アイコンの再設計する必要があります。 再設計の手段としてGoogle Material Iconsを利用する案が生まれたため、Vueコンポーネントとして自動出力…

デザインシステム構築に向けた Figma API によるCSSカスタムプロパティの自動生成

こんにちは。フロントエンドエンジニアの小林(baco16g)です。 この記事では、YappliのCMSにおけるデザインシステムを構築に向けた準備をしている話を、エンジニア視点でお伝えします。 デザインシステムが求められた背景 YappliのCMSは、2019年にシステム…

ヤプリのフロントエンドチーム@2022年を紹介します

こんにちは、フロントエンドの山田です。 補足すると別記事にも登場する「サーバサイドの山田」と同一人物です。 現在はサーバサイドとフロントエンドを兼務してます。 tech.yappli.io さて、今回はフロントエンドの山田として、私達フロントエンドチームに…

npm v7におけるsudo run scriptがスーパーユーザーで実行されず、ハマった

npm v7へのマイグレーション直後、`sudo npm run script`が期待通りの動作をしませんでした。そこで、各種パッケージのコードリーディングをして、原因を突き止めました。

ESLintのカスタムルールを作成してアンチパターンを洗い出した話

フロントエンドエンジニアの小林です。 今回は、UIコンポーネントのアンチパターンな利用を検出するESLintのカスタムルールを作成した話をご紹介いたします。 背景と問題 YappliのCMS画面におけるテキストフィールドは、入力項目に対してバリデーションエラ…

Webフロントエンドのパフォーマンス改善の取り組み

フロントエンドエンジニアの小林です。 Yappliでは「Yappdate Day(ヤップデートデイ)」という取り組みがあります。Yappdate Dayとは、「改善する日」のことで、その日は改善案件のみ実施し、プロダクト開発本部メンバーが1日がかりでプロダクトや業務に関…