フロントエンド
こんにちは、フロントエンドグループ EM のこん(@k0n_karin)です。 今回は、@nuxtjs/storybook を使用している際に、バンドルサイズをコントロールする方法についてお話します。 storybook.nuxtjs.org TL;DR pages や plugins などを使わない場合は、別名の…
プロダクト開発本部 開発2部 フロントエンドグループ マネージャーのこん(@k0n_karin)です！ 今回はタイトルの通り、ヤプリのWebフロントエンドが現在どんな状態か、どんな課題があるのかなどを整理してみました。本記事を通して、ヤプリのWebフロントエンド…
こんにちは。iOS エンジニアの kamimi です。 いきなり個人的な話で恐縮ですが、最近 PC（Macbook）が壊れました・・・！ 「やばい・・・仕事どうするんだ・・・」 仕事に関してはたいていまずは会社から代替機を借りるという選択肢があると思うのですが、私…
はじめに フロントエンドエンジニアの @aose_developer です。 自分がプログラミングにハマったきっかけでもありますが、「いかに構造化された可読性の高いコードが書けるか」を意識して「ああでもないこうでもない」と模索するのが専ら趣味です。 直近でも…
モチベーション 前置き 基本方針 想定読者 書くこと 書かないこと 完成形 参考リンク 作り方 環境構築 環境 初期化 Storybookに表示するまで Storyを操作可能にする 本題 ArgsTableの基本的な書き方 必須のマークを追加 カテゴリー分け 共通の情報をmetaに移…
この記事は Yappli Advent Calendar 2024 の13日目の記事です。 Nuxtを採用した理由 当時のアーキテクチャの方針 現在の課題 1. アプリケーション全体がVuexと密結合になっている コード例 2. Vuexの移行コストが高い 3. グローバルで使わない状態もVuexに存…
この記事はヤプリ Advent Calendar 2024 の6日目の記事です！ こんにちは。フロントエンドエンジニアの武井です。 前回こちらでブログを書いてからずいぶんと間が空いてしまいましたが、アドベントカレンダーをやろうということで重い腰をあげてみました。 …
複数のフローティングパネルを表示する例フロントエンドエンジニアのゆう（@aose_developer）です。 ヤプリのCMSにはBlock UIという、直感的かつフレキシブルにアプリを制作できる基盤があります。 Yappliの新基盤「Block UI」 のご紹介 個人的にはノーコー…
※2024-10-11追記 @sentry/nuxt 8.32.0 のリリースにより本ブログの内容は発生しなくなりました。 Nuxt3で@sentry/vueを使っている場合は、@sentry/nuxtの利用をおすすめします。 www.npmjs.com フロントエンドエンジニアのこん(@k0n_karin)です！今回はNuxt3…
はじめに フロントエンドチームについて 文部科学大臣設立の経緯 現状のフロントエンドチームの課題を知る 第1回勉強会の内容 まとめ はじめに こんにちは。フロントエンドエンジニアの平川です。 今回はヤプリのフロントエンドチームで始めた勉強会の活動に…
この記事はヤプリ Advent Calendar 2023 7日目の記事です。 フロントエンドエンジニアの@k0n_karinです！今回は業務で利用中のNuxt BridgeにissueとPRを出す機会があったので、その体験記を書いていきます。 github.com きっかけ YappliのCMSでは、現在Nuxt2…
サーバーサイドエンジニアの田実です！ 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日がかりでプロダクトや業務に関…
