このブログのはてなブックマーク数 このエントリーをはてなブックマークに追加

知らなきゃ絶対損するPCマル秘ワザ

知らなくて損したPC情報とかを分かりやすくメモする個人ブログ。
『月,水,金』の週3回更新!(予定)

このブログ内をキーワードで検索することもできます。
Loading



最新記事
  • iPhone:iOS12 にアップデートしてみた (09/21)
  • ツイッター:公式で「○○さんがいいねしました」が非表示可能に (09/19)
  • エクセル:テーブルの「フィルター」を一発ですべて解除する方法 (09/17)
  • 新型 iPhone 「XS」「XR」 と 「8」「X」 の違いをまとめてみた (09/14)
  • Affinity Photo:多機能で便利なスナップを使いこなす (09/12)
  • 管理人より
    2300万アクセス突破しました。ありがとうございます。

    ST3:「getElementsByClassName」と打つのが鬱なので楽したい

    このエントリーをはてなブックマークに追加
    操作画面


    こんにちは、さち です。

    普段、JavaScript を書くときは Sublime Text 3 を使っています。

    かの有名な「Emmet」は導入済みなんですが
    HTML, CSS にしか対応しておらず、JavaScript は未対応です。

    Emmet のように JavaScript でも楽に入力するには
    それ用の「スニペット」パッケージが別途必要です。

    ということで、スニペットパッケージを導入して
    何度も「getElementsByClassName」と打つ鬱とお別れしてみます。




    JavaScript は記述が面倒くさい

    1. 例えば、「getElementsByClassName」。
      やたら長くてキーボードで打つのが面倒です。
      操作画面

    2. 「console.log」は短いですが
      デバッグ(テスト)でよく使うものなので、何度も書くのが面倒です。
      操作画面

    JavaScript を書くときに楽をしたいのはもちろんですが
    記述が長いと、タイプミスをしやすいという現実的な問題もあります。




    JavaScript のスニペットを導入する

    JavaScript 用の「スニペット」パッケージを利用することで
    短い記述で必要な記述を呼び出せるようになります。
    (下記手順は、Sublime Text 3 に Package Control が導入済みの状態)

    1. 「Ctrl + Shift + P」キーを押して、コマンドパレットを開き、「install」と入力。
      「Package Control: Install Package」を選択して、「Enter」キーを押します。
      操作画面

    2. 「JavaScript snippets」と入力。
      操作画面

    3. 「JavaScript & NodeJS Snippets」を選択します。
      (どのスニペットパッケージを選ぶかは好みなので、別のものでもOK)
      操作画面

    4. インストールが完了すると、JavaScript のスニペットが使えるようになります。
      例えば、「gc」と打って「Tab」キー(「Enter」キーでも可)を押せば……
      操作画面

    5. 「getElementsByClassName」が入力されます。楽ですね。
      「document」が自動選択されるので、別の要素を使う時は上書きできます。
      「Tab」キーを押すと、クラス名(「class」の部分)にジャンプします。
      操作画面

    6. さらに、「cl」と打って「Tab」キー(「Enter」キーでも可)を押せば……
      操作画面

    7. 「console.log」が入力できます。
      引数部分が自動選択されるので、目的のもので上書きしましょう。
      操作画面




    短縮した記述が分からないとき

    スニペットの短縮記述はメソッド名の頭文字がほとんどですが
    分からないときは検索することもできます。
    (下記手順は、パッケージ「Japanize」で日本語化した状態)

    1. JavaScript ファイルを開いてるタブをアクティブにした状態で
      メニューの「ツール」→「スニペット」と進みます。
      操作画面

    2. 「Snippet:」と入力済みなので、目的のメソッド名を追記。
      一致するメソッド名の右端に短縮記述が表示されています。
      例えば、「addEventListener」なら「ae」と打って「Tab」キーを押せば良いわけです。
      操作画面

    表示中のファイル形式(JavaScript, HTML, CSS 等)に対応した
    スニペットのみが検索される仕様です。
    注意しましょう。




    スニペットを入れずに使っていたのが馬鹿らしくなるくらい
    JavaScript の記述が楽になりました。

    スニペットを導入する一瞬の手間を惜しんで
    面倒くさい記述に手間をかけ続けるのは、あまりに愚かでした……。

    手間から開放されたいのなら、楽をする努力が必要ですね。



    【参考ページ】

       → JavaScript & NodeJS Snippets - Package Control








    このエントリーをはてなブックマークに追加




    管理人だけが読めるコメントにする(返信はしません)
    【お知らせ】
    • コメントは承認制です。反映に時間がかかります。
    • Yahoo!BBはスパムコメントが多いため一部規制中です。
    • URLを含む投稿はできません。必要な場合は最初のhを削って下さい。
    • 記事に直接関係ない個人のトラブルにはお答えできません。
    • Android は使ったことがないので質問を頂いても答えられません。
    • その他詳細はこちら





    記事別の週間アクセス数ランキングです。こちらの記事もぜひ読んでみて下さい。

    2008-2018 知らなきゃ絶対損するPCマル秘ワザ  無断転載禁止

    ブログパーツ