Mobile Factory Tech Blog

技術好きな方へ!モバイルファクトリーのエンジニアたちが楽しい技術話をお届けします!

Vue.js で疑似要素に動的なスタイルを適用する

ブロックチェーンチームのソフトウェアエンジニアの id:odan3240 です。
Vue.js で、input タグの ::placeholder 疑似要素に動的なスタイルを当てたい場面がありました。 この記事では、その際の問題と解決方法について紹介します。

この記事のゴール

Vue.js では HTML クラスのバインディングインラインスタイルのバインディング を用いて、動的にクラスやインラインスタイルを割り当てることで CSS を動的に変更ができます。 例えば、<input :style="{ paddingLeft: myPadding }">で、input タグの padding-leftmyPadding を更新することで動的に変更されます。 しかし、これらの構文では ::placeholder の疑似要素だけを指定できず、結果スタイルを変更できません。

CSS カスタムプロパティによる解決

CSS カスタムプロパティ とは、JS などのプログラミング言語の変数と同じように、CSS で変数が使える機能です1。使用例は以下の通りです。

.class {
  /* 変数の宣言。`--` が先頭に付く */
  --main-bg-color: brown;
  /* `var` を使って変数を使用する */
  background-color: var(--main-bg-color);
}

SCSS などの CSS プリプロセッサの変数は、プリプロセス時に変数が置換されて定数として CSS に埋め込まれます。それに対して CSS カスタムプロパティは CSS の変数としての機能を持つので、JS から --main-bg-color を書き換えれば、動的に背景色を変更することが可能です。

このCSS カスタムプロパティを用いて、疑似要素の動的にスタイル変更できます。次の codepen は input タグの ::placeholder 疑似要素を動的に右にずらすサンプルです。

See the Pen abNpQmx by odanado (@odanado) on CodePen.

インラインスタイルのバインディングを使って CSS カスタムプロパティを定義しています。このカスタムプロパティを padding-left に渡しています。
これにより、Vue.js 側で変更された値が CSS カスタムプロパティとして CSS に伝わり、動的に padding を変更することができます。

まとめ

CSS カスタムプロパティをインラインスタイルのバインディングを用いて設定することで、疑似要素に動的なスタイルを適用する方法を紹介しました。

TechKaigi#1 ~隣のエンジニアが知らなそうなこと~ を社内で開催しました

こんにちは、エンジニアのid:tenmihiです。

この度弊社の社内勉強会の時間を活用して、TechKaigiを開催したので紹介したいと思います。

TechKaigiとは

TechKaigiはモバイルファクトリーのエンジニアがどんな問題を抱え、どう解決してきたかを共有をする勉強会です。
弊社のエンジニアであればチームを問わず誰でも参加できます。

開催ごとに発表テーマを決める予定で、第1回目のテーマは 隣のエンジニアが知らなそうなこと でした。

開催の理由

リモート勤務だと場所を選ばず仕事ができたり通勤時間に縛られなくなる一方で、コミュニケーションなどで辛いところもありますよね。

私は2年ほど前から東京を離れて長崎の自宅からフルリモートで働いていますが、オフィス側との会議や突発的な障害対応などでコミュニケーションの問題を経験しています。

猛威を奮っているコロナウィルスによる影響で弊社も今年の2月頃から原則リモート勤務となり、それから約半年が経つ中でチーム内外でコミュニケーションの問題が露出してきました。

そのひとつに「周りのエンジニアや隣のチームがどういうことをやっているのかわからない」という声がありました。

そこで各チーム・個人の知見共有やコミュニケーションの問題解決のためのエンジニア横串勉強会としてTechKaigiを開催しました。

f:id:tenmihi:20200821182116p:plain:w600
TechKaigi イントロダクション

当日の様子

今回は4名の方にシェル、Android APIやgitなど幅広い技術内容で隣のエンジニアが知らなそうなことを発表していただきました。

また、今年入った新卒にとっては名前を聞いたことしか無いエンジニアもいるのではないかと思い、自己紹介もしていただきました。

f:id:tenmihi:20200821182214p:plain:w600
シェルの1つである Fish についての発表

id:dorapon2000 さんのfishについての発表はこちらにブログ記事としても上げていただいております

tech.mobilefactory.jp

ちょうど開催のタイミングで一部チームが忙しい時期であったものの社内から27名の方に参加していただくことができ、多くの人が知見の共有をできたのではないでしょうか。

終わりに

チームの垣根を超えて社内のエンジニアが各々の知見について発表しあうことができました。

これからもリモート勤務でのエンジニア達の情報の輪を保つための取り組みとしてTechKaigiを続けていければと思っています。