Balloon 開発者ブログ

株式会社バルーンの開発の様子をお伝えします

letter_opener_web で開発中のメールを確認する

こんにちは、CTOの高橋(jtakahashi64)です。
「映画大好きポンポさん」を書籍でも買って読みました、よかったです。

さて、今日はメール送信についてです。

例えば BallooMe ではいくつかの機能にメールを利用していますが、
開発作業の中で実際にメールを送信し開封し確認という作業がつらい……となることがあります。

そんな時に利用できるのが letter_opener_web です。

letter_opener_web

https://github.com/fgrehm/letter_opener_web

letter_opener_web は Action Mailer で送信したメールを tmp 上にストックし下記のように画面上で確認できる素敵な Gem です。
公式サイトのマニュアルに沿えば簡単に導入することが出来ます。

おわりに

ものをつくるのって楽しいですが、
つらい……ってなることも多いですよね。
チームやツール(ツールをつくってくださっている方に感謝です……!)に頼ることで少しでも「楽しい」が増えるといいですね。

Prettier で CSS の書き方をチームであわせる

こんにちは、CTOの高橋(jtakahashi64)です。
週末に「僕らのミライへ逆回転」を見たんですが、ものを作ることのよさを思い出せる素敵な作品でした。

さて、今日の話題は CSS の書き方をチームであわせることについてです。

Balloon では BallooMeスタイルシートの実装をエンジニア、デザイナーの全員で行っており、 コーディングスタイルは airbnb に準拠しています。

CSS | Airbnb Engineering

しかしながら、エンジニアもデザイナーも人間ですから、コーディングスタイルに準拠しないコードを書いてしまうことは、まあ、よくあります。

.block{
}

.block {
  margin:10px;
}

.one,.two,.three {
}

コーディングスタイルに準拠しない例

これらを PR 上で確認/変更するのは、
レビューアとレビューイの双方にとって、なかなかの負荷がかかるため、避けたいものですね。
そこで便利なのが、今日ご紹介するコードフォーマッタの Prettier です。

Prettier

Prettier は JavaScriptCSS などの言語で利用するできるコードフォーマッタで、上記のようなコーディングスタイルの揺れを統一することができます。

prettier.io

Yarn で簡単に導入ができます。

yarn add prettier --dev --exact

実行も簡単です。

yarn run prettier -- --write ~/path/to/example.scss

下記のようにコードがフォーマットされました。

@@ -1,9 +1,11 @@
-.block{
+.block {
 }
 
 .block {
-  margin:10px;
+  margin: 10px;
 }
 
-.one,.two,.three {
+.one,
+.two,
+.three {
 }

おわりに

コーディングのスタイルは人によってそれぞれで、そこに絶対的な正しさはありません。
例えば、インデントはスペースかタブか、スペースならスペースの数は2つか4つか……などなど。

チーム開発では各々の「正しさ」がぶつかり、パワーを使ってしまうことがあります。
しかしながらパワーをスタイルの「正しさ」を決めることに使ってしまうのはもったいない。
開発者のパワーは、もっとサービスや社会を成長させるために使うべきものです。

コーディングスタイルを決め、コードフォーマッタを通すことによって、
チームの「正しさ」を決めておくことにより、
よりよい毎日を過ごせるといいですね。