コーディングで手間がかかる要素といえば、フォーム周りではないでしょうか？
ブラウザ固有のUIがあったり、ユーザーの操作によって状態に変化があったりと一筋縄にはいきません。

そのような訳で、フォーム周りのコーディングが面倒だと感じている人は少なくないはずです。私がその筆頭に君臨します。デザインに引っ張られることで、毎案件で一貫性がないソースコードを披露してしまう始末。大概フォーム周りは後回しにしてきました。

それが最近ようやく、まとまりのあるコーディングをするようになったと感じています。その一端をご覧ください。

イディオムとは

いわゆる慣用句のことで、プログラミングやマークアップにおける定型文をイディオムといいます。

慣用句は、ふたつ以上のものが結合して、まったく別の機能を持つことを表します。 したがって、小さな要素の集まりからなるコンポーネント単位のソースコードも同様です。

きっとあなたも決まった書き方をするコンテンツがあると思います。それがイディオムです。

イディオム集

イディオム集には、input,select,textarea要素を用意しました。スタイルはSCSS形式で記述しています。「いますぐ使える」を目的としたため、コピペで使える状態です。したがって共通している箇所は適宜修正する必要があります。またサイズやボーダー、カラーはデザインに合わせて修正してください。

Input要素

テキストボックス

サーチテキストボックス

チェックボックス

ラジオボタン

Select要素

Textarea要素

なぜ、いまのイディオムになったか？

苦手意識を覚えていたフォーム周りのコーディングをいかにして、イディオムに仕上げたのか？

それは管理Web系のコンテンツを多くこなすうちに最適解が見えてきたのかもしれません。管理Webの多くはフォームで構成されており、より一貫性がある記述が求められたことにあります。それが実を結んだのでしょう。

また会津ラボのデザイナーは、「用」の表現が美しく空間の保ち方が秀逸です。 日頃利用するWebサイトにおいての空間はとても重要で、ちょっとした違和感がストレスとなり、サービスの離脱に繋がります。優れた空間表現により、不便を感じさせません。

ユーザビリティーを考慮したデザインに触れることで、コーディングの最適解が見えやすくなったのではと考えています。これからもユーザーが幸せになる仕組みを考えていく所存です。

このエントリーがあなたのコーディングの一助となれば幸いです。