最低限のDark Modeライブラリ「color-scheme-handler」
近年増えつつあるダークモード対応のサイト
少し前にOSのカラースキーマを"Dark"に変更してみて、思った以上に多くのWebサイトがダークモードの対応をしていることに気が付いた。
ダークモードには次のようなメリットがあると言われてる。
- 目が疲れにくい
- 見やすい
- デバイスのバッテリーが長持ちする
- かっこいい
それぞれについて賛否両論あるんだけど、少なくとも「かっこいい」という部分については大賛成である。
ダークモードの対応は難しいものではないが少し面倒
ダークモードの対応方法について調べてみると、そこまで難しいものではなさそうだった。
ただWebサイトを複数持っている場合、それぞれに対しその対応するのは少し面倒にも思えた。
例えば自分のケースだと次のような対応をする必要があった。
- ユーザーがOSでダークモードを選択してる場合は、ダークモードで表示する
- ユーザーがWebサイト上でダークモードとノーマルモードを切り替えられるようにする
- ダークモード（ノーマルモード）に切り替えた時に、ページ遷移をしても元に戻らないようにする
ダークモード対応用の最低限のライブラリの「color-scheme-handler」
手前味噌だけど、ダークモードを比較的簡単に実装するためのライブラリを開発した。
もちろん既に多くの便利なダークモード対応用のライブラリがあるんだけど、
どれも自分にとっては過剰なものだったので。
「color-scheme-handler」は多くの機能を備えてるわけではないけど、
その分シンプルに使えるものになっていると思う。
使い方
大まかな使い方はこんな感じ。
1. インストール
まずはインストール
> npm install color-scheme-handler
2. CSSを書く
ダークモードの時は、 .dark-mode 、ノーマルモードの時は、 .light-mode のクラスが root に対して付与されるので、
それぞれに対してのCSSを書く。
.light-mode {
background-color: #ffffff;
color: #333333;
}
.light-mode a { color: #1a0dab; }
.dark-mode {
background-color: #333333;
color: #ffffff;
}
.dark-mode a { color: #ffffff; }
3. 適切なカラースキーマを反映させる
ページの読み込み時に、適切なカラースキーマを反映させるために、
DOMの読み込み時に、 reflectCurrentColorScheme という関数を実行させる。
カラースキーマの情報をsession storage に保存しているので、
前にページを開いたことがあれば、その情報をもとにダークモードかどうかが判断される。
なければ、OSのカラースキーマに従う。
import { reflectCurrentColorScheme } from 'color-scheme-handler'
document.addEventListener('DOMContentLoaded', reflectCurrentColorScheme)
4. ボタンクリック時にカラースキーマを切り替える
もしユーザーがダークモードとノーマルモードを切り替えれるようにする場合は、
ボタンのクリックイベントに switchCurrentColorScheme という関数をバインドする。
import { switchCurrentColorScheme } from 'color-scheme-handler'
document
.getElementById('change-color-scheme')
.addEventListener('click', switchCurrentColorScheme)
やらなければいけないことは以上。
これならダークモード対応の負担も少ないはず・・！
おわりに
もしあなたがダークモード対応をするときに、このライブラリがちょうどよく役に立てば何より嬉しい。
加えて意見やバグの報告なんかも歓迎しているので是非！
【2021年3月】 Monthly review
振り返り
週の振り返りをまとめる形で3月を振り返る。
読本
起業のファイナンス
【進捗】
~50%
【感想】
起業をテーマにしてる本だけど、企業の見方の基礎的に部分を知れるので面白い。
1ヵ月で読み終われなかったので来月も少しづつ読み進めていきたい。
リーダシップの旅
【進捗】
50%
【感想】
電車に乗るときに読む本という扱いになっている。
電車に乗るのが1週間に1,2回なので来月には読み終わる気がする。
様々な視点から"マネージメント"と"リーダシップ"を比較する形で「リーダーシップとは何か」が書かれている。
今までの経験や周りの人達を振り返りながら読むと、この本で言うところのリーダーシップが理解しやすい。
リーダーシップに重点（というか焦点）が当たっているけど、どちらも大切にしていきたい。
初めてのGraphQL
【進捗】
~45%
【感想】
2週目になるけど、どうやら1週目の理解が浅かったようで新鮮に読んでいる。
3月はつまみ読みがほとんどだったので、4月は少しづつでも順に読み進めていきたい。
Webブラウザセキュリティ Webアプリケーションの安全性を支える仕組みを整理する
【進捗】
~34%
【感想】
最初はぐんぐん読んでいたけど、途中から勢いが止まってしまっている。
内容的には一番しっかり読みたい本なので、来月はこの本メインで読むつもり。
色彩検定 公式テキスト 3級編
【進捗】
~100%
【感想】
配色について調べようと思ったら、色そのものについて知るのが面白くなって、
試しに買って読んでみた本。
内容が分かりやすく量も多くなかったので毎日少しづつ読んでたら1週間で読み終えれた。
色彩、明度、彩度や、トーンの組み合わせの配色でどんなイメージになるのかが知れてよかった。
開発
去年作った簡易なブログの書き直しを通して、CSSとかVue.jsのComposition APIとかへの理解が少しだけ深まった気がする。
今月の総評
本は読む時間を決めて読み進めるのがよさそう。
今だと、電車、お風呂、寝る前が読書に充てられる時間なので
並行して読み進めるのは基本３冊までがいいのかもしれない。
開発は朝の仕事前にやる感じでいくのがよさげ。
Adobe Creative Cloud 買ってしまったので、仕事終わりはAdobe製品に慣れる時間にしたい。
来月の目標
４月は今月あんまり読めなかったブラウザセキュリティの本を中心に読み進めていきたい。
と思いつつも、色彩検定の本が面白かったので２級の本も読みたくなっているので、その２冊を中心的に読んでいければなと。。
デジハリのコース使って買ったとはいえ、Creative Cloudは高い出費だったのでしっかり使っていかなくては。
来月も頑張る。
【2021年3月】 4th week review
振り返り
読本
起業のファイナンス
【進捗】
~50%
【感想】
少しだけ読み進めれた。
ストックオプションを企業としてどのように設計するべきかを、社員のモチベーションの観点や会社法の観点など複数の観点から説明されてて分かりやすかった。
リーダシップの旅
【進捗】
30%（先週と変わらず）
【感想】
今週はこの本は読めなかった。
初めてのGraphQL
【進捗】
~45%
【感想】
スキーマの設計の章を読み直し中。
普段使わないような文法的な知識漏れを拾えてる気がしていてGOOD。
Webブラウザセキュリティ Webアプリケーションの安全性を支える仕組みを整理する
【進捗】
~34%
【感想】
今週はこの本は読み進められなかった。
開発
今週はあまり、個人的な開発は進められなかった。
メモに近い感じで使ってるブログのコードをcomposition apiを使った形に書き直したりした。
雑記
配色とかに興味が出てきて色について少し調べてたら、
どうして色は見えるのか的な話が書いてあって、中学で習ったようなことなんだけども、
改めて知ると面白くて、そう言った内容に目が行ってしまって
配色については全然調べられずにいる。
それにしても、もう３月も終わりというのが信じられないくらい最近時間が経つのが早い。
４月はもっとコツコツやっていこう。
【2021年3月】 3rd week review
振り返り
読本
起業のファイナンス
【進捗】
~42%（先週と変わらず）
【感想】
相変わらずつまみ読みしかしていない。
あれなんだっけ？って時に参照するような読み方しかできてないから、来週こそ読み進めていきたい。
リーダシップの旅
【進捗】
30%（先週と変わらず）
【感想】
これも読み進められていない。
読みやすい本だから、ちょっとした時間に読み進めるのがいいのかも。
初めてのGraphQL
【進捗】
~35%
【感想】
引き続きつまみ読みしてる。
Union型について読みなおした。
Webブラウザセキュリティ Webアプリケーションの安全性を支える仕組みを整理する
【進捗】
~34%
【感想】
ペース少し落ちてるけど少しずつ読んでる。
CORS周りについて丁寧に説明されてて理解が深くなった気がする。
開発
- ラジオボタン / チェックボックス
ラジオボタンとチェックボックスをCSSでカスタムしたくていくつかのコンポーネントライブラリ見たりした。
labelで囲ってinputは消すのが鉄板だと思ってたけど、そうしてないのも多かった。
ただ結局自分の場合は鉄板の方法で十分だった。
雑記
葬送のフリーレンの新刊が出たので１巻から読み直したうえで読んだ。
ここ最近で１番面白いって言ってる友達が多いから本当に名作なんだと思う。
すでに次巻が楽しみ。しかも今なら１巻が無料らしい。
【2021年3月】 2nd week review
振り返り
読本
起業のファイナンス
【進捗】
~42%（先週と変わらず）
【感想】
つまみ読みしていて進捗がない。
つまんで読んでいくにしても、一度は全体を通して読みたいので続けて読んでいく予定。
リーダシップの旅
【進捗】
30%（先週と変わらず）
【感想】
こちらは単純に読めていない。
初めてのGraphQL
【進捗】
~20?%（先週と変わらず）
【感想】
これもつまみ読みしてしまっているので進捗がないけど、
この本は２週目なのでつまみ読みでもいいかなと。。
当然ながら公式のドキュメントも見ながらだと分かりやすい。
Webブラウザセキュリティ Webアプリケーションの安全性を支える仕組みを整理する New
【進捗】
~30%
【感想】
気になっていたので読み始めた本。
Webにおけるセキュリティをサーバー、クライアントなどに領域を分けたうえでクライアントの特にブラウザに関するセキュリティについて説明されてる。
攻撃手法とその対策が書かれてるのはもちろんだけど、１つ１つの事柄について「カテゴライズ→それぞれのカテゴリについて説明」の流れで記載されてるのでとても分かりやすい。
引き続き読み進めていきたい。
経験 この10年くらいのこと New
【進捗】
~100%
【感想】
くりぃむしちゅーが好きで、そういえばエッセイが出てたなと思いだして読み始めた。
「太田上田」とかでも話してる鉄板エピソードが多く書かれていて楽しかった。文中に出てくる例えツッコミの量が半端ない。
寝る前に読むのにおすすめ。
開発
- Viteの速さ
スタイルを持たない機能だけのボイラーテンプレート的なコンポーネント群が欲しいと思って、
Viteを使って少しづつ開発し始めた。
ビルド、特にHMRが早くていつもの開発に戻れなくなるというのを実感。
- Composition APIのメリット
Composition APIのメリットの１つとして、ロジックを分離できることがあげられてるけど、
最近はそのメリットをよく実感してる。
ドメイン固有のロジックをcomposition function で書けると、view層ではそこで作ったデータをコンポーネントに渡すだけでよいので見通しがよい。
もっと複雑なことをする必要が出てくると、また考えることが出てくるのだとは思うけど。
雑記
Filmoraというソフトを使って簡単な動画編集をしてみたら、思ってた以上に色々なことができるみたいで驚いた。
編集面白かったから、今後写真とか動画を撮るモチベーションにもなりそう。
本当は逆な気がする。。
【2021年3月】 1st week review
振り返り
読本
起業のファイナンス
【進捗】
~42%
【感想】
４章は企業価値についての考え方が書かれていた。
見積もり方や、事業価値、株価との関係性がためになった。
リーダシップの旅
【進捗】
~30%
【感想】
リーダーとマネジメントの違いの説明の１つとして、
リーダーは「見えないもの」を見て、あるいは見ようとして、新しい世界をつくり出すのに対し、マネジャーは「見えるもの」を分析し、
とあったのが、興味深かった。
マネジャーとリーダーを同じものと捉えたままこれらを兼務してしまうと、
どちらかの役割しか果たしていない状態に満足してしまいそうだと思った。
- 初めてのGraphQL
【進捗】
~20%？
【感想】
一度読んだ本だったけど、最近仕事で使うようになったので再度読み直し中。
GraphQLのメリット、RESTとの違いなどを改めて認識。
開発
・【Vue.js】Composition API の reactive の喪失
なかなか完全な理解ができず、何度も詰まってその度に質問してる気がする。
reactive() でobject をreactiveなものにできるけど、取り出した値はreactiveではなくなる。
更新などによってもreactiveが喪失する。喪失したものは computedを使うなどしてRefishにすればreactive になる。
・【TypeScript】Utility Type もろもろ
ライブラリの型定義を読んで理解するのにいまだに結構時間がかかる。
Utility Type は何度も目にして、逐一調べる回数が減ってきた気がする。
・【Vue.js】数値3桁区切り用ライブラリ開発
途中まで自分で書いてたけど、AutoNumericなるライブラリがあるのを知って、ラップしたものに切り替えた。
切り出してとりあえず公開。
GitHub - ryo-gk/vue-thousand-separator
雑記
１日水２リットル飲む習慣を始めて1カ月がたった。
肌の乾燥が少し減ったような気がする一方、トイレの頻度がすごく多くなった。
MTG前にトイレ行く習慣も一緒についたと思う。
2020年振り返り
はじめに
いろいろな人の振り返り記事を見て、自分も1年の区切りとして2020年の振り返りをしてみました。 仕事、プライベートのそれぞれについて、技術に関連する部分を中心に振り返っていきます。
2020年振り返り
仕事
仕事では、チームが変わったこともあり使用する技術スタックも少し変わりました。 2019年は Java を主に使っていて、フロントエンドは jQuery が主でしたが、 サーバーサイドは、Kotlinと TypeScriptを、フロントエンドは Vue.js をフレームワークとして使うようになりました。 また、これまで使うことがなかった Spring FW を使うようになり、これまでなんとなくで理解していた DI の概念などを改めてきちんと理解するきっかけとなりました。 フロントエンドは趣味で触り始めていた Vue を業務でも使うようになり、コンポーネントベースで書くフロントエンドのコーディングの楽しさを覚えつつも、 1000行以上のVue ファイルを目の当たりにするなど、複雑化や肥大化することのつらみを知りました。 他には、1年通してマイナンバーに関連する機能設計を行ない、法律や制度が絡む機能の設計の難しさに悪戦苦闘したりもしてました。 とはいえ、2020年は2019年までと比べて業務の中で新しい技術への出会いが多い年になり充実した仕事を多くできた気がします。 振り返ってみると、チームの異動をしたことが、自分にとってかなりプラスになったなぁと思います。
プライベート
OSS
ちょうど今年の初めに、今年はOSS活動をしてみたいと考えて、目標の１つとしていました。 Vue を学び始めた頃でもあったから、Vue関連のライブラリとかで貢献できたらいいな、なんてことを思ってた気がします。 ちょうど仕事では Vue のコンポーネントライブラリである Vuetify を使っていたので、Vuetify のissue に目を通してみたら自分でも直せそうな BugFix の Issue があったので、トライしてみました。それが自分にとって初めての OSS活動となりました。 とても小さな修正でしたが普段使ってるライブラリに自分のコードがマージされる喜びを知り、OSS活動に対する敷居が少し下がったので、挑戦してみて良かったと思ってます。 そこから、Vuetify や、同じくVue のコンポーネントライブラリである Buefy で自分でもできそうな Bugfix や Feature のIssue をいくつか見つけて対応したりしました。 また、ちょうど JavaScript を改めて体系的に勉強しようと JavaScript Primer のWeb版を読んでいたときに、画面右下にあるIssue報告用のボタンのデザインを少し変えたらちょっとだけ見やすくなるかななんてと思って、Issue を挙げてみたら受け入れてもらえたので、そのまま提案した内容を実装をして、ここでも簡単な機能追加？を経験することができました。
JavaScript Primer - 迷わないための入門書 #jsprimer
コード以外の部分だと、今年は Vue3 がリリースされて、それに合わせて翻訳プロジェクトが立ち上がっていたので、それにも参加することができました。翻訳プロジェクトでは、結構な数のページに対して、ページごとに翻訳の Issue 作られていました。でしたが、多くの人が手をあげていて、あっというまに全ての担当者が埋まっていくのをみて、Vue のコミュニティがとても賑わっていることを改めて強く感じました。 また、この翻訳の際に、アクセシビリティ関連のページを担当したことで、これまでよく理解していなかったアクセシビリティに大して興味を持つことができました。
その他
コロナの影響でほとんどの勉強会がオンライン開催になったこともあり、多くの勉強会に参加することができました。 フロントエンド関連のものに多く参加しましたが、フロントエンドの開発に興味を持ち始めていた一方で、 他の会社フロントエンドのレベルの高さや、フロントエンドエンジニア として働いている人たちの知識の多さを実感しました。 そんなこともあり、フロントエンドの領域でもっと開発していきたいと感じるようになって転職活動をしたりもしました。 カジュアル面談を何社かしていただいて、その中で１社だけ面接を受け、ありがたいことに内定をいただくことができたので、来年の2月からはフロントエンドにより特化して働くことができそうです。
おわりに
あんまり色々できなかったなと思っていたのですが、 去年の自分が今の自分を見たら、それなりに満足しそうだなとも思えるので、 意外と奮闘できた2020年だったのかもしれません。 来年も、今の自分が満足できる年になるように頑張りたいところです。
