コーディングフレームワークを勝手にがっちり考えたので、せっかくだからサイトにちゃんとまとめて使えるものにして会社に持ち込みました、というお話です。
デザインとかロゴとかそれっぽい感じになったなと自分では満足してる。
※ 一般配布は目的としていないので、ダウンロードファイルにパスワードがかかっています
※ 何分一人でしこしこ作っているだけなので誤字脱字などはご容赦ください
作成にいたる背景
- チーム内で実装ルールを統一したいのはもちろん
- 新人教育の場面でも教材としたい
- 納品時や協業するパートナーさんにコーディングドキュメントが求められた場合、こちらのサイトを渡すことでドキュメントとしてしまいたい
といったところで、とにかくこのURLを渡してあとはサボれるところはサボれればいいな、というのも本音です。
あとは、こんなものがあることで会社のブランディング向上や採用の一助となればいいなと夢見ています。
基本的な考え方
tailwind に代表されるユーティリティファーストの良いところと、ITCSSの設計思想を取り入れたフレームワークです。
今さらとか、だまって tailwind 使えば...というご意見もあると思いますが、css 書けるし書きたし（好きだし）、なにより HTML がしっちゃかめっちゃかになるのが肌に合わなかったんです、。
なので、大手含めたくさんのサイトをつくった経験から「まずはこれだけあれば良いかな」というものだけ utility class にまとめました。
例）https://floncss.dsflon.net/utilities/gutters
簡単なレイアウトや装飾はutility classを用いて素早く構築し、複雑な装飾はITCSSに基にコンポーネントを定義、あるいはページごとにcssを記述していく、というような考え方です。
詳しくはこちら↓
https://floncss.dsflon.net/docs/architecture
これから
- これがこういう感じであったら便利、がいくつかあるので足していきたい
- このフレームワークと親和性の高いデザインシステムも開発しているので、デザインから実装までまるっとパッケージにしていきたい
ちなみに
このサイトは next.js v14系で作っているが、もちろんこのフレームワークで作られている。
まあまあ良くできたかな、とホクホクしているし、実際まわりからも良い反応を頂いたりしている。
webでも使えるし、概念的にはflutterでも使えると思っている。
あと、Copilot もこのフレームワークを認識したコードを提案してくれるので、さらに使いやすい。
（これは Copilot が優秀なだけ）
生成aiが全力を出す時代が来るとこんなものは不要になるかもしれないが、こういうことを考えたり作ったりしているのが結局楽しいですね。
最後まで見ていただきありがとうございました。
おわり。