【初心者コーダー必見】コーディングのスピードを上げる3つのコツみなさんは、コーディングするスピードは早いですか?突然こんな質問されても「うーん...どうだろう」と思う方が多いのではないでしょうか。コーディングの速さも立派なスキルです。「コーディングできます」と言ってもあまり作業スピードが遅ければプロの世界で通用しません。今回はコーディングスピードを上げる方法を紹介します。コーディングスピードが上がれば、費用対効果が高くなり、効率的に稼ぐことができます。コーディングで特に大事な3つの要素コーディングするときあなたはどのようなことを意識していますか?コーディングするときに意識するべき、重要な要素は以下の3つです。・コーディングスピード・デザイン通りのコーディング・メンテンス性の高いコーディング今回、紹介するのはコーディングスピードです。具体的な方法を紹介します。Text」「Atom」「Brackets」などメジャーなエディタで使用できる拡張機能です。コーディングの記述量を減らすことができ、作業時間を大幅に短縮できます。Emmet公式ホームページ:https://emmet.io/コーダーの方には、必須の機能といえる拡張機能です。具体的な使い方を説明します。HTMLを記述するまずは、EmmetでHTMLを記述しましょう。「h1」と記述して、タブキーをクリックしてください。<h1><//h1>このように表示されたと思います。次は「h1〜h6」を試しましょう。<h1><//h1><h2><//h2><h3><//h3><h4><//h4><h5><//h5><h6><//h6>もちろん、短縮して記述できるのは「hタグ」だけではありません。次は、「ulタグ」と「liタグ」を記述しましょう。「ul」と記述して、タブキーをクリックしてください。<ul></ul>このように、表示されます。次は、この「ulタグ」の中に「liタグ」を入れましょう。「ul>li」と記述して、タブキーをクリックしてください。<li></li></ul>このように、記述されたと思います。「>」を使えば、子要素として記述することが可能です。次は、「ulタグ」の中の「liタグ」の数を増やしましょう。「ul>li*6」と記述して、タブキーをクリックしてください。<li></li></ul>このように、記述されたと思います。「*」を使えば、数字で指定した数だけ子要素を記述することが可能です。「()」を使えば、以下のように記述できます。「ul>(li>a)*6」と記述して、タブキーをクリックしてください。href=""></a></li></ul>「liタグ」の中に「aタグ」を入れることができました。グローバルメニューなどをコーディングするときに便利な方法です。これ以外にもこのように記述することができます。「ul>li*6>a」と記述して、タブキーをクリックしてください。href=""></a></li></ul>上で紹介した記述方法をとは異なりますが、結果は同じです。「+」を使うことで隣接要素を記述できます。「dl>dt+dd」と記述して、タブキーをクリックしてください。<dl><dt></dt><dd></dd></dl>このように、「+」を使うことで隣接要素を記述できます。隣接要素を複数記述したい場合は、「()」で括ることで記述できます。「dl>(dt+dd)*6」と記述して、タブキーをクリックしてください。<dl><dt></dt><dd></dd><dt></dt><dd></dd><dt></dt><dd></dd><dt></dt><dd></dd><dt></dt><dd></dd><dt></dt><dd></dd></dl>「{}」を使うことでテキストを入力できます。「ul>li*6>a{グローバルリンク}」と記述して、タブキーをクリックしてください。href="">グローバルリンク</a></li></ul>また、「$」を使うことでテキストを入力できます。「ul>li*6>a{リンク$}」と記述して、タブキーをクリックしてください。href="">リンク6</a></li></ul>「id名」と「class名」などはEmmetではこのように記述できます。・id名:div#idname・class名:div.classname「div#idname」と記述して、タブキーをクリックするとこのようになります。id="idname"></div>また、「div.classname」と記述して、タブキーをクリックするとこのようになります。id="classname"></div>Emmetは、、htmlテンプレートをすぐに記述することも可能です。「!」と記述して、タブキーをクリックするとこのようなHTMLのテンプレートが記述されます。charset="UTF-8"><title>Document</title></head><body></body></html>また、「html:5」と記述して、タブキーをクリックするとこのようなHTMLのテンプレートが記述されます。charset="UTF-8"><title>Document</title></head><body></body></html>「!」と「html:5」を記述して、タブキーをクリックしても結果は同じです。「!」の方が記述量が少ないのでおすすめです。CSSを記述する次は、CSSの記述方法を学びましょう。EmmetにおけるCSSの特徴について説明します。EmmetにおけるCSSの特徴は以下の2つです。・「-」(ハイフン)で構成されているプロパティは、それぞれの頭文字を入力すれば自動的に記述される・「-」(ハイフン)を先頭に入力すると、ベンダープレフィックスが自動的に記述される文字で説明しても理解するのは、難しいと思います。実際にコードを見て、学びましょう。「padding」「margin」を適用するときは、このように記述してください。「p10」と記述して、タブキーをクリックするとこのように記述されます。10px;「m10」と記述して、タブキーをクリックするとこのように記述されます。10px;「top・right・bottom・left」はこのように記述します。10px;//「ml10」と入力また、このように記述することでそれぞれに値を指定できます。auto;//p0-auto単位も指定することが可能です。フォントサイズを例に単位の説明をします。「px・em・rem・%」の指定は、このようになります。・px:指定なしでピクセルに変換される・em:「e」と入力して変換される・rem:「r」と入力して変換される・%:「p」と入力して変換される実際のコードは、このようになります。他にもこのような記述方法があります。absolute;また、Emmetはベンダープレフィックスにも対応しています。「box-shadow」の場合、このように記述します。color;「box-sizing」の場合、このように記述します。content-box;「transition」の場合、このように記述します。time;「border-RADIUS」の場合、このように記述します。10px;などなどEmmetには、様々なスニペットが登録されています。他にもスニペットが用意されているので、一度確認してください。Emmetスニペット一覧:https://docs.emmet.io/cheat-sheet/また、Emmetに登録されているスニペットは、カスタマイズすることも可能です。スニペットのカスタマイズは、「snippets.json」ファイルで設定できます。Sassを使うCSSをより効率的に記述するには、Sassを使うのがおすすめです。Stylesheets」の略称です。「メタ言語」とも呼ばれますが、CSSをより効率的に記述できるようにした拡張版だと考えてください。Sassを使うことで、作業効率が上がるだけではありません。変数や関数を使用することで、見やすくなり保守性が高くなります。Sassの使い方について説明します。実際にSassの使い方を説明します。Sassを使うための下準備から始めましょう。任意(デスクトップやダウンロードなど)の場所にフォルダを作成してください。そのフォルダの中に以下のファイルとフォルダを作成します。・index.html(ファイル)・css(フォルダ)・scss(フォルダ)さらに、「cssフォルダ」と「scssフォルダ」の中に以下のファイルを作成してください。・cssフォルダの中に「main.css」ファイルを作成する・scssフォルダの中に「main.scss」ファイルを作成するここまでできたら、次はコマンドでの操作になります。Macの方はターミナル、Windowsの方はコマンドプロンプトを開いてください。次に現在使用しているファイルの階層まで移動しましょう。コマンドによる階層移動は「cd」コマンドでおこないます。デスクトップにフォルダを作成した場合、このようなコマンドになります。/Desktop/(フォルダの名前)移動できたら、現在の階層が正しいのか知るために「pwd」コマンドを入力しましょう。pwdこのコマンドを入力すると現在の階層が表示されます。次は、sassのコードをcssに変換するためのコマンドを入力します。以下のコマンドを入力してください。scss:cssこのようなコマンドを入力すると、自動的にsassファイルに記述したコードをcssのコードに変換されます。ここまでできたら下準備は完了です。実際にコードを見て、sassの使い方を理解しましょう。sassを利用する1つのメリットとして、コードの冗長化を防ぐことができます。親子関係の要素をcssで記述するとこのようになります。underline;}このように「.main」という記述が重複しています。cssでは、子要素にスタイルを適用する場合、親要素を同時に書くのが一般的です。これでは「.main」というコードを記述する分時間が掛かります。sassを利用すれば、そのような時間を短縮することが可能です。例として以下のコードを見てください。}}sassは、入れ子形式で記述します。このように記述することで、親要素を記述しなくても子要素にスタイルを適用することが可能です。上のsassコードを自動変換すると1つ上で紹介したcssと同じコードになります。入れ子開式で記述できるだけでもとても便利ですが、sassには便利な機能が他にも搭載されています。作業効率を上げるために必須の機能を紹介するので、ぜひ参考にしてください。子セレクタと隣接セレクタの指定sassでは子セレクタと隣接セレクタは、このように記述します。}}「+」「>」は1つスペース空けることで、自動的にスタイルが適用されます。上のコードを自動変換したcssコードがこれです。1rem;}親セレクタの参照sassで親セレクタを参照する方法は、&(アンバサンド)を使用します。&(アンバサンド)をこのように記述すると親セレクタを参照できます。}}上のコードを自動変換するとこのようになります。right;}変数sassではプログラミングのように変数を使用できます。変数を使用することで、コードの記述量をグッと減らせます。変数名の前に「$」をつけることで、変数を作成することが可能です。それでは、実際にsassのコードを見てみましょう。#FFFF00;}importを使ったファイル分割sassは、importを使ったファイル分割が可能です。「import」を使って読み込みたいファイルのパスを記述します。読み込ませたいファイルの名前の先頭には「_」をつけます。実際のコードを見てみましょう。"/base/_reset";このように記述すること外部にあるcssファイルを読み込むことができます。mixinmixinはプログラミングの関数にあたるような機能です。複数のスタイルを定義しておき、他の場所で呼び出せます。実際のコードを見てみましょう。section_ttl_set}上のコードを変換すると、以下のようになります。center;}設計図は紙に書く「レイアウト・id名・class名」などは、一度紙に書くのがおすすめです。頭の中で設計を考えていても、途中であいまいになったり、上手く整理できていないこともあります。頭を整理する意味でも紙に書きましょう。その際、細部まで丁寧に記述する必要はありません。おおまかに、間違いのないように書いてください。まとめいかがでしたか?今回は、コーディングスピードを上げる3つのコツについて説明しました。基本的には、「Emmet」「Sass」を使うことで作業時間を大幅に短縮できます。id名やclass名などの命名規則などを自分であらかじめ決めておくことで、命名に迷う必要がなくなり時間短縮につながります。色々な方法を試してください。書いてるッス!記事のカテゴリートリカコーダー歴10年in北海道トリカです!ペットの白文鳥を肩に乗せながら毎日楽しく仕事をしています。webページもコードも綺麗に作りますよ!期日厳守は勿論、丁寧なコミュニケーションを心がけています。クリエイティブを最大限に活かし、迅速な対応をモットーとするくまwebです。