こんにちは！
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側でデータを受け取る時だけスネークケースにしなくても済みそうです。

まとめ

これまでとは異なる言語やプラットフォームを使う時、既存のものとの整合性が取れなくなるときがありますね。

今回、私たちは「命名規則がカオスになる」という形でそれが表れました。

シタテルではそんなカオスとも仲良くしながら（闘いながら？）、日々新しいものにも取り組みつつシステムを構築しています。