ありがたいことに今日から現役マークアップエンジニアの方にコードをレビューしていただけることになった！！
で、今まではソースコードをシェアする際は、ファイル一式をzipファイルにまとめて送るか、はたまたslackにソースコードを貼り付けたり、といったやり方をしていたのだが、前者は気軽じゃないし、後者は見にくいよなぁ、ということで、ウェブでHTML＆CSSに関する調べ物をしているとよく出てくる「CODEPEN」というサービスを利用してみることにした。導入して良かったと思ったところを3点挙げてみる。
リアルタイムプレビューに対応
普段はVS Codeでコードを書いているのだが、「Live Server」という拡張機能を入れ、Chromeに即時反映される様にしている。Codepenではこれと同じことが出来る。
SASSに対応している
設定をすれば、SASSからのコンパイルを行ってCSSとして読み込まれる様にしてくれる。設定といっても10秒で終わる設定。
「Settings」→「Editor Preference」と進み、ページ中程の「CSS Preprocessor」をSCSSに変更すれば良い。
各Penごとに個別URLが付与される
Codepenでは「pen」というのが1つの単位になるのだが、このpenごとに個別のURLが付与される。なので例えばコードレビューをお願いする時には分からない部分のみのコードを載せて、「ここを見てもらえませんか？」という様なことが可能になる。
埋め込むとこんな感じ
実際にコードレビューをお願いしたソースコードを貼り付けてみた。
See the Pen
隣接セレクタの指定が効かない by Ken (@kaneyan)
on CodePen.
しばらくこれで運用してみよう
うむ、これは便利そうだ。とりあえずコードシェアの際はCODEPENを使ってみることにする。
