こんにちは!
SCSチームのいしづかです。
シタテルでは主にRails + Vue.jsにてシステムを開発しています。
生産管理を行うシタテルコントロールシステム(SCS)もRailsで書かれており、Viewは基本的にhaml + scssです。
SCS全体のAPI + SPA化によるマイクロサービス化計画も進んでいる中、ここ最近作られている画面はhamlの中にVue.jsを埋め込むという方法が取られています。
その埋め込み方法は別の機会に書くとして、そこで出てきた 命名規則のアレコレ についてレポートしたいと思います。
Railsはパスカル + スネーク、Javascriptはキャメル、htmlはケバブ・・・
表題の通り、いろいろ混ざりました。
Railsでは、ネームスペースやクラス名はパスカルケース(ClassName)、それ以外のメソッド名などはスネークケース(method_name)で書きます。
定数などはアッパーケース(CONST_VALUE)で書きますね。いつの間にか3種類使い分けていました。
私自身、前職ではC#.NETでWindowsアプリケーションを作っていたのでパスカルケースを見ると安心します(笑)
Vueを使いだしてから、メソッド名はキャメルケース(methodName)、htmlやcssのidやクラスなどはケバブケース(class-name)が登場してきました。
・・・ついに1つのRailsプロジェクトに、ほぼすべての命名規則が揃ってしまったのです。
RailsとVueで分かれていればまだよかったかもしれませんが、Railsで書いたAPIのjsonがスネークケースで出力されてしまうため、Vue側にもスネークケースが進出してしまいました。
そこで、さすがにルールを設けようということになったのです。
統一ルール発令
Railsで使っているパスカルケース・スネークケースは崩すことができません。これはこのまま。
Vue側は データに関わるもの(data・computed)はスネークケース、処理に関わるもの(methods)はキャメルケース、html・css周りはケバブケース というルールに統一しました。
なんとなく複雑っぽいですが、メソッドとhtml周りはそのままで、データに関わるところだけちょっとRailsに寄せたという形です。
これでRails側はこれまでのソースを流用できますし、Vue側ではJsonをパースしてバインドする際、スネークケースが出てきてもOKです。
Vueが入ってきて発生した命名規則の混乱は、この統一ルール発令によってひとまずしばらくは沈静化するでしょう。。。
API + SPA化計画では、フロントはキャメル統一の予定
とはいえ!Javascriptは基本的にキャメルケース。
現在実装中のSCS APIでは、RailsからJsonを出力する際にキャメルケースに変換するように実装しています。
これでSPA側でデータを受け取る時だけスネークケースにしなくても済みそうです。
まとめ
これまでとは異なる言語やプラットフォームを使う時、既存のものとの整合性が取れなくなるときがありますね。
今回、私たちは「命名規則がカオスになる」という形でそれが表れました。
シタテルではそんなカオスとも仲良くしながら(闘いながら?)、日々新しいものにも取り組みつつシステムを構築しています。