2024/02/13

「フロントエンドのモデル駆動設計」の見解(場外編)


背景

2023年12月、さくらのテックランチというイベントで「フロントエンドの複雑さに立ち向かう 〜 DDD と Clean Architecture を携えて 〜」という発表をした。ありがたいことに多くの人に見ていただき、(観測範囲では)好意的な意見をいただいた。その影響は大きく「現場から学ぶモデル駆動の設計」という勉強会を主催されている方の目にとまり、座談会メンバーとしてオファーをいただき2024年2月1日に参加してきた。

がっつりカンペを用意したのだが、時間の都合や流れ的に話せなかったことがあるので、4年ぶりにブログを更新しようと思う。

座談会は「バックエンドエンジニアがフロントエンド開発するときの悩み」というテーマで、以下のようなトピックがあった。

  • フロントエンドの学び方
  • バックエンドの知識をフロントエンドに応用できるか
  • UIコンポーネントの設計方法
  • ステートレスとステートフル
  • テストの手法
  • 質疑応答

2019/12/17

rsyncの悲劇 〜本番環境を消し飛ばす前に覚えておきたいこと〜


この記事は本番環境でやらかしちゃった人 Advent Calendar 2019 17日目の記事です。


はじめまして、ダーシノ(@bc_rikko)です。

突然ですが、懺悔します。
私は転職して10ヶ月で2回も本番環境をぶっ飛ばしました。お客様をはじめ、関係各位には多大なるご迷惑をおかけしたことを、ここでお詫び申し上げます。


1回目は2015年11月27日、入社27日目のこと。
gitの設定ミスにより壊れたブランチをmasterにforce pushしてしまい、CIが流れて本番環境が壊れた。原因はpush.defaultなのだが、詳しくはすでに記事を書いているのでそちらを読んでほしい。
2回目は翌年9月1日、入社してちょうど10ヶ月たった日のことだ。
またしても本番環境をぶっ飛ばした。しかも、前回より盛大に……。

タイトルにもあるようにrsyncコマンドが原因だ。
当記事では、この「rsyncの悲劇」を二度と繰り返さないために原因・対策を共有したい。


勘の鋭い方は「rsync」と「本番環境でやらかしちゃった」という組み合わせでオチにお気づきと思いますが、しばらくの間お付き合いください。

2019/12/09

CSS Custom Propertiesと良好な関係を築くための戦略


この記事はCSS Advent Calendar 2019 9日目の記事です。

CSS Custom Properties、ときにCSS変数やCSS Variablesとも呼ばれているプロパティがある。昨今のダークモード等のテーマ変更の需要の高まりとともに、多くのウェブサイトで使われるようになった。

たとえば、CSS Custom Propertiesを使うと以下のようにCSSだけでOSのテーマを判別し、ダークモード表示ができる。
/* Default / Light Theme */
:root {
  --color: black;
  --background-color: white;
}

/* Dark Theme */
@media (prefers-color-scheme: dark) {
  :root {
    --color: white;
    --background-color: black;
  }
}

body {
  color: var(--color);
  background-color: var(--background-color);
}

他にも以下のようにスタイルの管理がしやすくなる。
/* Before */
a {
  color: #0000EE;
}
a:visited {
  color: #800080;
}
a:active {
  color: #FF0000;
}

a.grayscale {
  color: LightSlateGray;
}
a.grayscale:visited {
  color: Silver;
}
a.grayscale:active {
  color: LightSteelBlue;
}
/* After */
a {
  --link: #0000EE;
  --link-visited: #800080;
  --link-active: #FF0000;
}

a.grayscale {
  --link: LightSlateGray;
  --link-visited: Silver;
  --link-active: LightSteelBlue;
}

a {
  color: var(--link);
}
a:visited {
  color: var(--link-visited);
}
a:active {
  color: var(--link-active);
}
参考: Patterns for Practical CSS Custom Properties Use | CSS Tricks


すごい、、、すごく便利そう!!


しかし、一見便利そうなCSS Custom Propertiesも使い方によっては闇を生み出してしまう。
ということで、当記事ではNES.css(CSSフレームワーク)開発で得た<知見>を元に、CSS Custom Propertiesのメリット・デメリットを理解し良好な関係を築く方法を紹介する。

2019/09/12

GitHub Actionsの使い方まとめ

9月上旬にGitHubから「You're in! Get started with GitHub Actions beta」というメールが届いた。どうやら以前した利用申請が通り、個人アカウントでGitHub Actionsのベータ版が利用できるようになったらしい。

ちょうどJSライブラリを開発していたので、そのリポジトリでGitHub Actionsを使ってCI(継続的インテグレーション)の設定をしてみたので、その使い方や解説をする。


GitHub Actionsとは


一言でいうと、GitHub上で完結するCI/CDサービス。
いままでCircleCIやTravisCI、Drone CIなど外部のサービスを使っていたところを、GitHub上で実行できるサービスだ。

昔はTerraformなどで使われているHCL(HashiCorp Configration Language)を用いて設定ファイルを書いていたらしいが、2019年9月30日に廃止されYAML構文に一本化される。そのため、CircleCIやTravisCIなどからも比較的簡単に移行することができる。

詳しくは公式ドキュメント参照。
▶ GitHub Actionsについて - GitHub ヘルプ