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

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

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

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

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

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

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

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

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

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

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

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

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