どうもこんばんは！今回作った動画が『ctrl+z』で全て完全消滅したので再度作り直してようやくアップできた管理人のかわうそ29です！
今日はGIF動画を使用して、HTMLやCSS、Ruby、JavaScriptを学び始めた方に向け、”恋に落ちるエディタ”と呼ばれる『SublimeText』の簡単便利ショートカットを紹介します。
さらに！！！使用頻度が高く、効率よいコーディングに必須な『行操作』で5選絞り込みました。
さらにさらになんと！！！各動画の後半には『ショートカット覚えたからにはこれはやっちゃだめ！』のNG例も合わせて載せています。
効率の悪いコーディング例も合わせて確認できるので、自分のコーディングを振り返ると同時にスキルアップもできるはずです！ぜひ参考にしてみてください。
- まずSublimeTextとは
- ①『CTRL+L』 行選択
- ②『CTRL+SHIFT+L』 矩形選択モードへ※矩形選択補足
- ③『CTRL+SHIFT+D』 行を複製
- ④CTRL+SHIFT+↑,↓ 行を前後と入れ替え
- ⑤『CTRL+[,]』 複数行インデント
- おまけ！次回予告動画
Contents
まずSublimeTextとは
無料のテキストエディターです。通称、”恋に落ちるエディタ”
僕の会社の制作現場でも標準装備！英語で難しそうですが、初心者にも簡単に使えるのでおすすめです。
良いところは3つ！
- とにかく動作が軽い！
- プラグインが豊富で、拡張が便利すぎる
- 標準機能の充実がすごい！
特に3の標準機能は高いレベルで充実！画面分割、タブ化、検索はもちろん準備されています！
基本レベルが高いのに、プラグインによるカスタマイズ性も高く、動作も軽い！
僕はDreamweaver⇒Bracketsを経て、Sublimeに恋に落ちました！
こちらの記事が参考になるかなと思います。
テキストエディタ選びに迷ったらコレ！SublimeTextがすごい | CodeCampus
では早速GIF動画で紹介していきます。
①『CTRL+L』 行選択
『CTRL+L』でカーソルされている行全体を選択できます。
ドラッグ操作よりも早いし正確です。
閉じタグの”>”だけ選択できてなかった！そんなミスを防ぐためにも使いましょう。
②『CTRL+SHIFT+L』 矩形選択モードへ
『CTRL+SFIT+L』で、カーソルされている行を矩形選択になります。
矩形選択(くけいせんたく)というのは、複数行の行中を選択すること。動画見てもらったら意味が分かると思います！
この矩形選択、めちゃくちゃ使います！！
動画はすごく簡単に紹介していますが、実践となると感動モノです！！
とても大事なので、矩形選択が分かりにくかった人は、次で補してます！見てみましょう。
※矩形選択補足
補足です。2分で作ったので動画が雑かも・・・。
矩形選択にはさらに2つ方法があります！
- マウスホイールでドラッグ
- SHIFT+マウス右カチカチでドラッグ(windowsのみ)
どうでしょう！通常の選択と全然違いますね！！
ではどんどん行こう！！次の動画へGO！
③『CTRL+SHIFT+D』 行を複製
『CTRL+SHIFT+D』で選択している行を一行下に複製できます！
これも間違いなくコピペより早くて正確。使うべし！！
④CTRL+SHIFT+↑,↓ 行を前後と入れ替え
『CTRL+SHIFT+↑,↓』で行を前後と入れ替えできます！
といっても、イメージできないと思うので、百聞は一見に如かず！！動画見てみましょう。
魔法みたいに行を移動できます！
もちろん選択行を増やせばまとめて移動可能！
これで『CTRL+X』とはおさらば！！
⑤『CTRL+[,]』 複数行インデント
『CTRL+[,]』でインデントできます！わざわざ行の先頭に戻って、スペース打ってた人いませんか？？
そんなこともうしなくても大丈夫！！
複数行でも一瞬でインデント可能です。
どうでしょうか。
1行1行丁寧に先頭まで戻ってインデントしている暇があるでしょうか！
答えは否！断じて否！！
今日からあなたのインデントの負担は軽減されました！
おまけ！次回予告動画
次回予告です！完全に悪ノリです笑
何してるでしょうか！
普段のコーディングはこんな感じか、もっと早くて複雑だと思います・・・
次回は応用編、NG集、実際のコーディングでの使用方法、このどれかをやりたいです！
ありがとうございました！