フロントエンド
サーバーサイドエンジニアの田実です！ SPAはMPAよりもユーザ体験が上がる可能性がある*1一方で、開発・運用が複雑になりがちです。APIスキーマの設計・管理、フロントエンドのルーティングの管理、認証認可・CORSなど、データを取得して表示するだけの簡単…
フロントエンドエンジニアのこん(@k0n_karin)です！ ヤプリでは毎四半期の末頃になると、各自が期初に立てた目標を達成するべく大量の記事が投稿されます！私ももれなくそのうちの一人です！ WAI-ARIA、Roleとは 十分調べて記事執筆しておりますが、もし間違…
Sentry大臣に就任しました。 こんにちは。フロントエンドエンジニアの武井です。 このたびフロントエンドチームのSentry大臣に任命されました。 なんやそれ、とお思いでしょう。 これはフロントエンドチーム内での役割分担を大臣と呼んでいるだけで、「○○担…
フロントエンドエンジニアのこん(@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日がかりでプロダクトや業務に関…
