マイベストのデザインシステムで使用しているレイアウトコンポーネントを紹介
はじめに 株式会社マイベストでフロントエンドエンジニアをしているyamadaです。 近年、企業やプロダクトチームでデザインシステムを導入する動きが加速しています。 弊社でもデザインシステムの構築に力を入れており、Material UIやChakra UIのようなUIライブラリを参考にしながら独自のデザインシステムの開発を進めています。 今回はその独自のデザインシステムの重要な構成要素であるレイアウトコンポーネントを紹介したいと思います。 レイアウトコンポーネントとは 弊社ではアプリケーションの構造やレイアウトを構築するのに使われるコンポーネントのことをレイアウトコンポーネントと呼んでいます。 主なレイアウトコンポーネントには以下のようなものがあります。 フレックスボックスコンポーネント Flexboxのプロパティを使ってレイアウトを構築 代表例: Material UIのBox・Stack
フロントエンドのディレクトリ設計思想
はじめに フロントエンドのディレクトリ構成、世の中に色んな「推し」が有って悩みますよね。 例えば、、、 さらに最近は、App Directoryの登場や、それに合わせたNext.js公式の「推し」構成がドキュメント化されたりと、さらに色々なパターンが出てきています。 本記事の趣旨 本記事では、具体的な構成そのものではなく、 様々ある構成を横串で見通して整理できる設計思想を紹介します。 新しい推し構成の紹介ではなく、構成を考えたり決めたりするときに役立つ抽象的・汎用的な指針を提供できればと考えています。 基本となる考え 分割の方向 一般的に、アーキテクチャにおける分割には2つの方向が有ります。 (出典も良書なのでリンクを貼っておきます： https://www.amazon.co.jp/dp/4873119820) これはディレクトリにおいても同じだと思っていて、筆者は分かりやすさのために
TypeScriptの型と実態がズレるとき、型付けにどう向き合っていくか
はじめに こんにちは！株式会社マイベストでフロントエンドエンジニアを担当している おぎー と言います！ この記事ではTypeScriptの型と実行時の値が噛み合わなくなる話と、型付けへの向き合い方についてお話できたらと思います。 TypeScriptの型付けについて 型があるメリットとは TypeScriptは静的型付け言語です。プログラムを実行せずともコンパイルの段階で型の噛み合わないコードを発見することができます。このおかげで実行するコードは一定品質を担保されている状態を保ちやすい作りになっていると言えます。 またVS Codeをはじめとした開発用エディタではリアルタイムに型チェックしてくれるため、間違った記述にいち早く気づき修正することができます。 これらを踏まえると、素早く一定の品質を保たれたコードを作れることがポイントになるかなと思います。 型と実態がズレるとは TypeScri
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
