会津ラボ

マークアップエンジニアならば、「表示が崩れている！」と報告を受けた経験があることと思う。そのようなとき、決り文句のごとく、 「ブラウザは？」「OSは？」「ブラウザのサイズは？」 を質問するのだけれど、報告主がクライアントで、さらに用語が伝わらない場合において、そのやり取りだけで時間を浪費してしまう。ましてやブラウザのサイズなど感覚でしか分からないケースのほうが多いことだろう。 そのような場合に最適なWebツールがある。 このエントリーでは、閲覧環境の情報共有ができるWebツール「mybrowser.fyi」を紹介したい。 使い方 使い方は至って簡単だ。下記URLを対象者に観てもらって、URLを返戻してもらえばよい。 https://mybrowser.fyi/ 以下キャプチャは、わたしが閲覧したときのものだ。 ご覧のとおり、ブラウザがChromeで、OSがmacで、ブラウザサイズが1582×1242で、スクリーンサイズが2560×1440で、JavaScriptが有効で、Cookieが有効であることが一目瞭然だ。 「COPY LINK TO THIS REPORT」ボタンをクリックするとURLをコピーできる。それをメールなりにペーストしてもらえばよい。やり取りもスムーズになって報告者をイラつかせずに済むかもしれない。 機会があれば積極的に活用してみてはいかがだろう。 このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。

CSSを記述するにあたって、Emmetやスニペットで時短を試みるケースは一般的で、あなたも導入していることだろう。これら機能によって開発は、相当に高速化していることは疑いようもない。無論わたしもVSCodeの拡張機能に追加していて、事あるごとにEmmetショートコードを書いたりスニペットを表示させたりして時短を試みている。 さて前述のものが、かなり優秀だからこれ以上はなさそうなのだけれど、GUI操作でCSSプロパティを挿入してくれるVSCode拡張機能がある。 このエントリーでは、VSCode拡張機能「Fabulous」を紹介したい。 Fabulous について Fabulousは、Visual Studio CodeでCSS記述をサポートする。アクティブにするとサイドバーが現れてGUIを操作できる。 fabulous 特徴 CSS-in-JSライブラリ（styled-components、emotion、linaria）をサポート .css、.scss、.js、.jsx、.tsx、component.ts、.vue、.svelteに対応 VS Code にインストール Extensionsメニューで「fabulous」を検索して、インストールしよう。 Fabulous をつかう CSSファイルを開き、Fabulousアイコンをクリックすることでサイドバーが開閉する。 CSSファイルにCSSセレクタを記述後、カーソルを合わせると、FabulousサイドバーにGUIが現れる。 あとは適宜CSSを指定するとよい。きっと悩むことなく直感的に操作できるはずだ。 まとめ VSCode拡張機能「Fabulous」の紹介だった。 Fabulousを常用する場合において、つねに上から指定していくなどルールを定めておくことで一貫性のあるCSS記述ができると思われる。そもそも直感的な操作が可能ではあるが、慣れてしまえばスニペットで記述するより遥かに速くコーディングできるかもしれない。 よくない点としては、最後に指定したプロパティの末尾にセミコロンが無いこと、display:grid;が無いこと、positionの上下左右が無いこと、font-weightにboldが無いことが挙げられる。 とはいえ、時短を阻害するほどのデメリットではなく、ざっと指定してから整えればよい。使えそうならば導入してみてはいかがだろうか。 このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。

ファイルアップロードUI設計のややこしさときたら…。<input type=”file” />で済むのなら、なんと明快なことか。そういう覚えはないだろうか。 <input type=”file” />だけであってもボタンとファイル名のスタイルを制御しなければならない。ブラウザそれぞれのUIも考慮しなければならない。そのうえユーザビリティの配慮からドラッグ＆ドロップ機構が求められた場合、さらにややこしい。やれないことはないけど実装時間がかさむ。 これらネガティブな感情を払拭して余りある素晴らしいReactコンポーネントがある。 このエントリーでは、ドラッグ&ドロップのファイルアップロード実装を簡単にする「react-dropzone」を紹介したい。 react-dropzone について react-dropzoneは、ドラッグ＆ドロップでファイルアップロードUIを簡単に実装するためのReactコンポーネントだ。さらにReactアプリ開発のトレンドともいえるReact hooksに対応した作りをしている。ダウンロード数は、317,004（2020/1/6現在）と同種のものと比べると大きくリードしている。いわばファイルアップロードReactコンポーネントの決定版と言って差し支えないだろう。 https://react-dropzone.js.org/ 特徴 HTML5に準拠 React hooksに対応 スタイル適用が最小限 自由にスタイル適用が可能 react-dropzone に触る それではreact-dropzoneの導入から確認していこう。 インストール まずはパッケージをインストールする。package.json同階層で以下コマンドを実行してほしい。インストールするパッケージは「react-dropzone」のみでよい。 インポート インポート方法は2パターン用意されている。まずは、React hooksを使う場合。React hooksを使うわけだからReactのバージョンは16.8以上である必要がある。 もう一方は、ラッパーコンポーネントを使う場合。上記のReact hooksを使えない場合などの代替案と捉えるか、Class componentにしている場合は、いたし方なくラッパーコンポーネントをインポートしよう。 デモンストレーション 下記ソースコードは公式にもある、もっともシンプルなドラッグ＆ドロップファイルアップロード実装で、ファイルをエリアにドロップするとファイル名が表示されるというものだ。 まとめ ドラッグ&ドロップのファイルアップロード実装を簡単にする「react-dropzone」の紹介だった。 実装して気がつくことがある。それはスタイル適用する要素が思いのほか多く残されていること。これは悪い意味ではなくて好感が持てる箇所だと感じた。なぜなら、打ち消しのスタイルを記述することがなく、ソースコードに素直さを保てたからだ。対象要素にclassNameを与えることはできるが、これは決してreact-dropzoneが割り振るclassNameをオーバーライドするためのものではない。上書きする記述が混在しないシンプルなソースコードを保てて良い。ファイルアップロード要件がある場合は「react-dropzone」を検討してみてはいかがだろうか。 このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。

マークアップエンジニアにおいてエディタは、もっとも身近なツールのひとつで、あなたもきっと日頃使い慣れたエディタでコーディングをしていることだろう。わたしはAtom editorが主ツールでいかなるシーンにおいても活用しているが、それと同時に不便さも覚える。 あなたは不便を感じたとき、どうするだろうか？我慢してそのまま使い続ける？拡張機能で解消する？別のエディタを検討する？ わたし自身は、しばらくAtomを使い続けて、なかなか手放すことができなかったのだけれど、いよいよ不満に耐えかねてVSCodeへ乗り換えを実施した。その手順を記しておきたい。 なぜVSCodeか？ 単純にトレンドだから。安直ではあるが、Atomを使った理由もフロントエンド界隈でトレンドだったから乗り換えたと記憶している。 VSCodeを選択した理由は上述のとおりだが、乗り換えに踏み切った要因は、不便さを覚えた作業をVSCodeで試したところスムーズに動作したことが挙げられる。プロジェクトフォルダを多数表示させなければならないとき、フリーズしたり落ちたりするケースが頻発した。ところがVSCodeだと平然と動作し続けるではないか。これにはとても心を動かされた。 冒頭にも述べたとおり、日頃使い慣れたエディタでコーディングしているわけで、ツールの不良は作業者のストレスとなって、果ては仕事のクオリティに影響するかもしれない。 そう思ったら居ても立ってもいられず乗り換えに踏み切った。そういう次第だ。 設定したこと エディタの乗り換えにおいて重要なのが「操作感」。乗り換えた直後も大体同じように作業できるか否かが重要だ。Atom editorは長年使い続けたことで、いくつかの拡張機能やショートカットキーなど身体が覚えている操作というものなど一緒にしておきたい。それを踏まえて以下のようにした。 「ようこそページ」をOFF 初期インストールしたときには必ず表示されるスクリーンで、ヘルプや設定等へのリンクが示されているが大体不要だろう。「起動時にウェルカムページを表示」のチェックを外すことで今後表示しないようにする。 「Trim Final Newlines」をON 最後の行以降の空白行を削除したい。ツールバーの「Code – 基本設定 – 設定」から設定画面を開く。スクリーン上部の検索フィールドに「Trim Final Newlines」を入力することで対象のものが見つかる。「有効にすると、ファイルの保存時に最終行以降の新しい行をトリミングします。」にチェックを付ける。 「Trim Trailing Whitespace」をON 行末尾の半角を削除したい。ツールバーの「Code – 基本設定 – 設定」から設定画面を開く。スクリーン上部の検索フィールドに「Trim Trailing Whitespace」を入力することで対象のものが見つかる。「有効にすると、ファイルの保存時に末尾の空白をトリミングします。」にチェックを付ける。 タブサイズを変える 1つのタブに相当する半角スペース数を変更したい。デフォルトでは1回のタブキー入力で、4つ半角スペースが挿入される。これを2つ半角スペースにする。ツールバーの「Code – 基本設定 – 設定」から設定画面を開く。スクリーン上部の検索フィールドに「Tab Size」を入力することで対象のものが見つかる。「4 → 2」にする。 フォントサイズを変える フォントサイズを変更したい。デフォルト値は12pxだ。これを13pxにする。ツールバーの「Code – 基本設定 – 設定」からVSCodeの定画面を開く。スクリーン上部の検索フィールドに「Font Size」を入力することで対象のものが見つかる。「12 → 13」にする。 空白文字を表示する 空白を視覚化したい。ドットになるあれだ。ツールバーの「Code –…