こんにちは、KINTO Technologiesグローバル開発部でフロントエンド開発をしているクリスです。 普段フロントエンド開発でコンポーネントを開発する際はpropsを利用して必要な情報を渡す、という話はよく耳にすると思います。Angular, React, Vue, Svelteといった今よく使われているフレームワークではそれぞれの書き方でこの機能を実現しています。すべてのフレームワークを言及すると非常に長い記事になってしまうので、今回はグローバル開発部で良く使っているVueについて話したいと思いま

こちらの記事は カケハシ Advent Calendar 2022 の16日目の記事になります。 はじめに こんにちは、おくすり連絡帳 Pocket Musubi というサービスを開発している宮里です。 サービスの運用をしていると、開発当初とはサービスとして重要視すべきことや技術トレンドも変化していき、より適したライブラリやフレームワークへのリプレイスを行うことがある思います。 おくすり連絡帳でも、デザイン大幅刷新のタイミングに合わせて、フロントエンドのフレームワークを Angular から React(

こちらの記事は カケハシ Advent Calendar 2022 の 12日目の記事になります。 https://adventar.org/calendars/7444 Poetry と Streamlit で Web アプリ開発 はじめに はじめまして。Musubi の開発チームでフロントエンドを主に担当しております、井上です。どうぞよろしくお願い致します。 Musubi の開発ではフロントエンドのフレームワークとして Angular を、バックエンドのフレームワークとして Pyramid を採用して

こんにちは、フロントエンドエンジニアの沖です。 セーフィーには2022年1月にジョインし映像閲覧WebアプリであるSafie Viewer（以下Viewer）の開発を担当しています。 今回は、Viewerで利用しているフレームワークであるAngularのバージョンアップを9月末のリリース時に行ったのでその話をしたいと思います。 Viewerについて Viewerのアップデートサイクル 今回のアップデートによる変更点 Standalone Components Typed Forms 地味な変更点 アップデ

こんにちは、株式会社カケハシでおくすり連絡帳 Pocket Musubiの開発を担当している渡辺です。 RxJS RxJSはリアクティブプログラミングのライブラリです。 リアクティブプログラミングって何かと言いますと、 データを受け取るたびに反応(リアクション)をするプログラムです。 たとえば、 of(1, 2, 3).subscribe({ next: (value) => console.log(value), }); とすると、1, 2, 3の順番にデータを受け取り、受け取ったデータごとにnextが

概要 薬局運営のデータ分析サービスである Musubi Insight のフロントエンド開発をしております米山と申します。 Musubi Insight のフロントエンドは Angular で開発されており、テストフレームワークには jasmine/karma を利用していました。 この度、jasmine/karma から Jest に移行しましたので、移行の記録を書いていきます。 移行理由 jasmine/karma は Angular のデフォルトのテストフレームワークです。 しかし、JavaScri

概要 Angular での開発において、DOM 操作などのために window.document を参照することはあるかと思います。 @angular/common には、DOCUMENT という DI Token が用意されています。こちらを利用することで、依存注入経由で document を参照することができますし、またテストも書きやすくなります。 ※ この記事を執筆してる時点での Angular の最新バージョンは v13.1.2 になります。 サンプルコード 以下、 DOCUMENT 経由で qu

はじめに こんにちは、LINE上で動くおくすり連絡帳 Pocket Musubi というサービスを開発している種岡です。 社内システムからS3にファイルをアップロードする機能を開発することになり、Presigned URLを利用して開発を試みたものの、想定以上に時間がかかってしまいました。 S3の設定からバックエンド、フロントエンドと一気通貫での情報がまとまっていないことが課題として浮かんできたので、備忘録として残しておくことにしました。 ゴール クライアント側（Angular）のフォームで選択したファイ

背景 スコープ Tailwind CSSとは？ コンポーネント指向とは？ Tailwind CSSのメリット class名を考える必要がない デザインシステムの最低保証 ドキュメント、チートシートの豊富さ Tailwind CSSのデメリット classに多くのコードを書く必要があり、可読性が落ちやすい CSSの理解度がある程度必要 デザインを100%再現したい場合に強味を生かしづらい 他ライブラリやフレームワークとの比較 Bootstrapとの比較 Material UI/Vuetify等のUIライブラ

概要 コンポーネントのカタログを作成することができる storybook。利用している開発者は多いのではないでしょうか？ この記事では、Storybook Addon Contexts を利用して、storybook 環境をちょっと便利にする方法を書きます。 Storybook Addon Contexts とは Storybook Addon Contexts とは、storybook に対してコンテキストを注入する機能を提供します。コンテキストとはつまり、ロケールのような、コンポーネントよりも上位の状

初めまして。セーフィーの柏木です。 AI/画像処理エンジニアで、テックブログ運営チームにも所属しています。 今回は、セーフィーにおけるメイン事業であるクラウド録画サービスと各職種のエンジニアの業務について紹介します。 クラウド録画サービスシステムの全体像と、それぞれのエンジニアが一体何をやっているのか、わかりやすくお伝えできればと思います。 セーフィーのクラウド録画サービスシステム クラウド録画サービスの流れと、担当エンジニアの紹介 組み込みソフトウェアエンジニア サーバーサイドエンジニア/インフラ・SR

こんにちは、カケハシでMusubi Insightのバックエンドエンジニアをしている末松です。 こちらの記事はカケハシ Advent Calendar 2021の 14 日目の記事になります。 半年ほど前の話にはなりますが、Musubi Insight チームにおいてローコードテスト自動化の SaaS であるmablを導入することで、リリースにかかっていた工数を半減させることに成功しました。 今回は、その mabl を導入した背景や実運用に至るまでの工程、そして学びを紹介したいと思います。 mabl の向

本記事はNRIネットコム Advent Calendar 2021 2日目の記事です。 🦃 1日目 ▶▶ 本記事 ▶▶ 3日目 🍗 喜早です。 前回はエモ目な記事を書きましたが、今回は本業のマネジメント寄りっぽい投稿です。 あるプロジェクトでのAngularを使ったフロントエンドの開発がなかなかにうまく回っていると感じているのでそのご紹介をしようと思います。 ちなみにタイトルをベストプラクティスではなくグッドプラクティスとしたのは、まだまだ改善の余地はきっとあるだろうという思いを込めて、永遠のβ版的な意味

はじめに こんにちは、DELISH KITCHEN開発部でバックエンド開発を担当している高木です。 DELISH KITCHENのリテールソリューションズ事業部（以下、RS事業部）が、小売向けに展開している店頭サイネージの管理画面等の開発をしています。 DELISH KITCHEN RS事業部で提供している管理画面は、 Angular というWebフレームワークを用いて開発されています 1 。 画面のレイアウト(Flexbox, Grid CSS + mediaQuery)には、Angular公式である

時空テクノロジーズ・ディップ・パーソルキャリア・ミイダス、4社の事例から「フロントエンド技術の活用」について学ぶ、オンライン勉強会フロントエンドの開発をリードする方々に技術選定からその活用法、具体的な課題とその取り組みまで、様々なテーマを元に対談形式で実施しました。その内容の一部を本記事にて紹介させていただきます。