サムネイル
2022-04-11

作った、というよりずっと前から作ってあったのをこの度ちゃんと公開しました、という話。
前回の記事はこの公開の作業段階で新しいことを覚えたというメモ書きでした。

スーパー自分の偏見にまみれているので鵜呑みにしないでね。

具体的に作ったもの

RADIX という名前を付けた、CSSとJSで構成されたWEBページのフレームワーク。

Github と npm で公開している。CDNで利用ができるので、

<link rel="stylesheet" href="https://unpkg.com/radix-library@4.0.3/radix.min.css" />
<script src="https://unpkg.com/radix-library@4.0.3/radix.min.js"></script>

こんな感じのHTMLを head に書けばファイルをダウンロードせずとも利用できる。具体的な使い方はマニュアルサイトの方で。

RADIXのロゴ

なんでこんなものを作ったのか?

これを作り始めたのは 2017 年くらい、当時大学生で WEB サイトの制作会社でアルバイトをし始めたころだった。
その会社では複数人でWEBページのコーディングを進めるのだが、方法論が統一されておらず、どうやってコーディングするかは一番最初にその案件に触れた人次第だった。
その為、あっちでは bootstrap、こっちでは bluma、ここでは normalize.css のみだったりみたいな、カオスな環境でものすごいストレスだった。

有名フレームワーク、本当に使うべきなのか?

そもそもとして、現在のいかなる開発においても大体はライブラリやフレームワークといったものは誰もが利用するものである。PHPで大規模なシステムを作るのに Laravel や cake を用いずに native だけでやることにこだわる人はそういないだろう。

しかしながら、CSSベースの HTML フレームワークについては自分はそうは思えないし、同意してくれる人も多いのではないかと思う。

自由なデザインにしにくい

まず第一に、boostrap 等のがちがちなフレームワークってデザインベースのコーディングに向いていないんですよね。boostrap は「boostrap で作ったサイト」を作るのに向いているのであって、ゴールとなるデザイン案があるとそれに合わせるのに非常に労力がかかる。できないことはないけど、めちゃくちゃたくさんユーティリティクラスを付与しまくって HTML を汚した挙句、「なら CSS を書けばよくねぇ?」みたいな話になりがち。

HTMLが汚れる

そもそもCSSクラスはセマンティック(機能ベースではなく意味ベースで名前をつけること)であるべきという前提がある。だから、本来はユーティリティクラスというものは使う(多用す)べきでないのだが、フレームワークを前提としたコーディングだとユーティリティクラスまみれになって非常にCSSが醜く見にくい。

学習コストが高い

結局は独自ルールを敷いて、そのルールでCSSを書いているようなものになる。ならドキュメントが豊富なネイティブのCSSを書いた方が早くね?と思って非常に勉強する気が進まない。

CSSはモジュール化ができないので、セマンティックなコーディングをしようとするとどうしても使いまわしができないという問題点がある。最近はやりの tailwind の @apply みたいな、クラス内に別のクラスの記述を展開する記法がネイティブにサポートされれば革命が起きるんだろうなぁ、ほしいなぁといつも思っている。

もちろん、セマンティックでユーティリティクラスを多用せず、学習コスト抑えめというフレームワークもある。しかしながら、bootstrap や bulma と違いそれらはそれ一本だけでサイトをコーディングすることはできない。
他の技術のように、ある程度答えとなるような方針が決まっているならこんなにバカみたいにたくさんのフレームワークが氾濫していたりしないだろう。

結論として、自分が気に入ったのは最低限のリセットとノーマライズをしてくれる normalize.css くらいだった。でもそれだけでは機能的に物足りない。javascript とかでいつも使いまわす処理とかもまとめてライブラリ化したい。でもCSSは外部のCDNに依存しているから自分で管理できない…
なら自分で全部作っちゃえばよくね?ということで、自分による自分のためのフレームワークを作った。

CSS フレームワークはフレームワークの夢を見ない。というのが自分の結論である。

できたもの

最初に作ったものがこれ。reset.css や normalize.css を参考に CSS の標準化と、 jQuery でスムーススクロールと外部リンクに target=”_blank” を自動で追加するだけ(js は確か大体ネットからの拾い物)。

今見返すと本当に恥ずかしい限りだが、自分が使いまわす分には標準機能としてこんなもので十分だった。こんなものでも有名大型フレームワークを下手に使ったサイトよりキレイなコーディングができる自信があった。

最新版ではかなり機能が多く追加されている。特にモーダルウィンドウ機能はお気に入りで、このサイトもサムネイルや本文中の画像はクリックで全て開ける。最近は css の方よりも javascript の機能作るほうが楽しくてそっちばかりやってた。

いろいろ頑張ったおかげで、当初はカオスに様々なフレームワークが跋扈していた弊バイト先で RADIX を統一採用にするという選択をしてもらい(びっくりだが)、それをモチベにいろいろちゃんと作るようになったよ。それで 4 年経って npm とかで公開して一般公開するまでに至ったよ。という話でした。
就活でも実績といえるような制作物で人に公開していいものはこれくらいしかなかったので、これ一本でアピールしてみたけどなんとかなったぜ。やったー。

ということで、学生時代の開発の総括として、成果を publish してそれについての記事を書きました。これで私の青春には思い残すことはない。