こんにちは、太郎です。
独学でWEB制作を学んで１年で制作会社に転職し、今は現役エンジニアとして活動しています
コード書いてると、変数によってキャメルとかスネークとか描き方が色々あるみたいだけど、ややこしくて覚えられないよ〜
いちいち調べるのも時間の無駄だし、タイポが増えるんだよなぁ
ははっ〜僕も同じこと思ってたよ！
確かにややこしいよね。こんな面倒なことは覚えなくていいよ！
change-caseというツールに任せて楽をしよう！
えっ本当ですか？覚えられなくて大変だったんだよー！
じゃあ今日から調べる必要もなくなるね！
使ってるうちに表記方法の名前は自然と覚えるんだけど
復習も兼ねて一緒におさらいしてみようか！
コーディングをする上でクラス名はスネークケース、変数名はキャメルケース、
ファイル名はケバブケースというように命名する対象によって表記を変えて開発します。
自分一人での開発なら自分のルールでいいのですが、チーム開発ではそれはご法度です！
なぜならそれらを統一しないと、読みづらいコードになる上に管理が大変になるからです。
今回は、vscodeの拡張機能を使って、それらの表記を一瞬で変更できるようになる方法を、
くわしく解説していきます。
- 表記方法の種類が分かる
- change-caseの導入の仕方
- change-caseの使い方
文字だけだと覚えづらいから画像を使って
イメージで覚えてみよう！
名前の由来を覚えるとわかりやすくなるよ！
表記方法の種類とは？（３選）
プログラミングには色々な表記方法があるけど、
今回はその中から３つに絞って紹介してみます。
スネークケースとは？
スネークケースとは、単語間をアンダースコア（ _ ）で繋いで表現する方式です。
例）img_list_content_array（snake case）
↑蛇のように見えるその見た目から名付けられました。
言われてみるとそんな気もしてきますね！
キャメルケース
キャメルケースとは、単語間を大文字でで繋いで表現する方式です
例）ImgListContentArray（camel case）
↑ラクダのコブになぞらえて、その名が付けられました。
確かに上がボコボコしててそんな気もしてきますね！
ケバブケース
ケバブケースとは、単語間をハイフン( – )で繋いで表現する方式です
例）img-list-content-array（kebab case）
↑ケバブの串に繋がっている見た目になぞらえて、その名が付けられました。
確かに串で連結している見た目から的確な表現な気がしてきますね！
それぞれの記法とその成り立ちがわかったところでchange-caseの導入手順を見ていきましょう！
change-caseの導入の仕方
vscodeの拡張機能から、change-caseを導入していきましょう！
change-caseの使い方
ここからはいよいよchange-caseの使い方を解説していきます。
コマンドパレットを開いて拡張機能を呼び出す
change-caseを使う手順
- change-caseの呼び出し方
- スネークケースの変換
- キャメルケースの変換
- ケバブケースの変換
change-caseの呼び出し方
コマンドパレットを呼び出します。
ショートカットは 【⌘ + Shift + P】をvscodeの画面で押すと
画面中央上部に入力欄が表示されるので changeと入力してみましょう！
すると沢山の変換できるケースが表示されると思います。
スネークケースへの変換の仕方
スネークケースへの変換のやり方は変換したい名前にカーソルを当てて
先程change-caseを呼び出した方法に、追加してsnakeと入力します！
一瞬で変化しましたね！
キャメルケースの変換の仕方
キャメルケースも同じ様にカーソルを当て入力欄にcamelと入力します！
スネークケースの変換の仕方
スネークケースも同じ様にカーソルを当て入力欄にsnakeと入力します！
まとめ：vscodeでキャメルケース・ケバブケース・スネークケース等に一瞬で変換する
以上今回は、vscodeでキャメルケース・ケバブケース・スネークケース等に一瞬で変換する拡張機能とその使い方を解説しました！
今まで覚えられなかった表記方法もこの拡張機能を使用していくうちに覚えられるのではないかと思います！入力ミスによるエラーや変換の時間短縮になる強い味方になりますね！
プログラマにとって表記方法を覚えることは必須の知識です。
- 表記方法の種類が分かる
- change-caseの導入の仕方
- change-caseの使い方
なぜなら、プログラムでは表記方法によるエラーが起こります。
そして一番は冒頭にも述べたようにチーム開発ではそのチームごとに表記を統一するルールがあります！そんな時に威力を発揮するのが今回紹介したchange-caseです！
今回は３つしか紹介してませんが、dot( . )で繋ぐ方法など、
普段使えそうな表記方法への変換もあるので是非試してみてください。
あなたの開発ライフが少しでも快適になることを祈っています。
以上。太郎でした～！
コメント