Saki Imafuku

はじめにWebアプリケーションの開発において、しばしば確認ダイアログが必要になります。JavaScriptのconfirm()関数はその一例で、ブラウザが提供する簡易的な確認ダイアログを表示する関数です。しかし、デザインを自分で調整できないという問題があります。ブラウザ間で一貫した見た目を保つことは難しく、オリジナルのデザインに合わせることもできません。さらに、Vueなどのフレームワークを用いてアプリケーションを開発している場合、一般的なバケツリレー型のダイアログの実装方式は、管理が煩雑になることがあります。そこで、今回はVueとComposition APIを使用して、スタイ...

Vue.jsでカスタム確認ダイアログを作成してみた

はじめにデザインシステムというとstorybookなどのUIライブラリをイメージしてしまい、影響範囲や運用コストを考えるとなかなか重い腰があがらずにいました。そのような中で、デザイントークンを一括で管理するStyle Dictionaryというライブラリがあることを知ったので紹介したいと思います。 デザインシステムがなぜ必要かデジタル庁ではデザインシステムを構築・推進する目的として、4点あげています。https://www.digital.go.jp/policies/servicedesign/designsystem/デザインと開発を効率化し、利用者の課題解決に...

style dictionaryを使ってみた

はじめに弊社ではペインが大きい請求書の受取側の業務を効率化するサービスを開発しています。https://speakerdeck.com/timtarou/sweeep-culturedeck?slide=14技術的な話だけでなくせっかくなので会計についても発信できれば良いかなと思っています。会計は基本情報技術者試験の試験範囲にも会計は含まれており、社会人として最低限知っていて損のない領域です。また、簿記検定の教科や巷の簿記解説記事などは仕訳の方法論だけ書かれているものが多くわかりづらいなと思ったので、貸借対照表と損益計算書の関係性をベースに仕訳の考え方についてまとめたいと思...

貸借対照表から考える仕訳の作り方

はじめにsweeep株式会社エンジニアの今福です。弊社ではアトミックデザインを参考にコンポーネントを作成しています。運用する中で分類の基準を変更したので、その経緯についてまとめます。 アトミックデザインとはパーツ・コンポーネント単位で定義していくUI手法です。最小の単位から順に「atoms(原子)」「molecules(分子)」「organisms(生体)」「templates(テンプレート)」「pages(ページ)」とコンポーネントを分類し、小さいレベルのパーツを組み合わせていきます。詳しく知りたい方はご参照ください。(アトミックデザインを考案したBrad Fro...

アトミックデザインの分類を見直した

はじめにTypeScriptでは「データがない」ことを表す型が2種類存在します。違いや使い分けについてまとめたいと思います。 null型, undefined型とはどちらも「データがない」ということを表すプリミティブな型です。const hoge: null = nullconst foo: undefined = undefined 発生タイミングnullは開発者が意図的に指定した場合のみ設定されます。// 開発者が指定するconst hoge = nullundefinedは変数の初期値がない場合や存在しないプロパティにアクセスした場合などに自動で設定さ...

TypeScript nullとundefinedどちらを使う？

はじめにsweeep株式会社エンジニアの今福です。今回は日付に関する記事をまとめます。日付と一言に言っても、タイムゾーンや表示形式が複数あり、各レイヤーで最適なタイムゾーン、表示形式に変換する必要があります。たとえば、UI上はユーザが直感的に理解できる日付の表示を行いつつ、BEではグローバル展開も視野にUTCでデータを保管するケースがあります。UIFEBE / DBタイムゾーンユーザが属するタイムゾーン(JSTなど)-UTC日付形式YYYY年MM月DD日 YYYY-MM-DD　　などDateオブジェクトISO8601形式 タ...

日付変換の基礎知識

はじめにトーストを複数表示するためにシングルトンパターンを利用したので、備忘録としてまとめます。 Vue-Toastificationを使用してトーストを表示する弊社ではトーストの表示にVue-Toastificationというライブラリを使用しています。 Vue-Toastificationとはトーストを簡単に実装できるライブラリです。vueと名前についていますが、Reactでも使用できるようです。https://vue-toastification.maronato.dev/ 特徴TypeScriptをサポートしているトーストの表示や動作を簡単にカスタ...

シングルトンパターンを利用してトーストの複数表示を行う

はじめにvue-good-tableを使用することで、簡単にさくっと高機能なテーブルを作成することができます。この記事ではインストール方法などは割愛します。下記のページを参考にしてみてください！https://xaksis.github.io/vue-good-table/ 基本機能columnsとrowsを指定するだけで、必要最低限のテーブルを作成できます。<template>  <div>    <vue-good-table      :columns="columns"      :rows="rows"/>  &l...

vue-good-tableで簡単にテーブルを作成する

はじめにsweeep株式会社でエンジニアをしている、いまふくです。新サービス「sweeep Box」では、Phosphor Icons からSVGをコピーし、アイコンとして使用しています。SVGタグをそのまま使用すると扱いづらい部分があったため、アイコンのコンポーネント化を行いました。 SVGとはSVG（Scalable Vector Graphics)は画像フォーマットの一種です。html, cssなどと同じく「タグ」で扱うことができます。 メリット拡張性・汎用性が高い後から色・サイズ・文字の変更が簡単アニメーションをつけることも可能拡大縮小による画像の劣...