コーディング業務で収入を上げる方法
Web制作のコーディング業務において
収入を上げる方法はいくつかありますが、
個人のコーダーとして収入を上げる主なやり方は
- 単価そのものを上げる
- コーディングのスピードを上げて時給単価を上げる
の2つです。
特に②については、学習初期からでも意識すれば実践できることで、コーディングのスピードが早ければ早いほど収入が上がります。
「時給を上げる」＝「コーディングのスピードを上げる」ことが一番手っ取り早いです。
今回はコーディングのスピードを上げるためにできる施策を紹介します！
かわてつ簡単に使えるものばかりを紹介します！
一つでも良いので使ってみてください！
コーディングのスピードを上げる方法4選
①Emmet
Emmetとは、HTMLやCSSを省略して記述できる拡張機能で、VS Codeを使用している方はデフォルトで搭載されています。
省略した記述に「tab」キーをクリックすることでコードが生成されます。
一から全てをコードで書く必要はなく、コーディングの効率化を図れます。
一例を簡単に紹介します。
要素を出す
使用したい要素を入力して「Tabキー」をクリックすることで、コードが生成されます。
p要素を出したい時は、「pを入力＋Tabキーを押下」のような形です。
クラス名
クラス名を使用したい場合は「.」＋「クラス名」を入力してTabキーを押下します。
「p-test」というクラス名をつけたい場合は、「.p-test」のような書き方ですね！
また、「.」の前に先ほどの要素（pやsection、header等）を記載することで「要素＋クラス名」を生成することができます。
他にも「ul>li>a」などの展開等、Emmetには様々なことができます。
この記事ではEmmetだけを深掘りすることはしませんが、使用していなかった人は最低限上記のことは実践してください。
「Emmet よく使用する」などで検索をすればたくさん出てくると思います！
②VS HTML to CSS
「VS HTML to CSS」はVS Codeの拡張機能で、HTMLからCSSにクラス名を一瞬で貼り付けることができる機能です。
下記の動画のように拡張機能から「VS HTML to CSS」を入力し、インストールボタンを押下すればすぐに使用できます！（私は既にインストール済みなのでアンインストールボタンが表示されています。）
使用方法はとても簡単で、
HTMLを選択した状態で「Option + X」を押下し、
貼り付けたいCSSファイルに「Command + V」でクラス名が入力されます！
また、「Option + X」を押す際はキーボードの入力が半角状態である必要があるので、注意しましょう！
（日本語入力の状態でしないようにということです！）
③コードスニペットを作成する
コードスニペットを簡単に説明すると、再利用可能なコードはストックして2回目以降のコーディングはコピペで済ませようってことです。
例えば、コーディングする際にヘッダーのコーディングや、ハンバーガーボタンの実装って毎回するじゃないですか？
他にも、アコーディオンメニューやモーダル表示など、頻繁に使用するものは多々あります。
それをいちいち調べたり一からコードを書くのは非常に効率が悪いです。
一度実装したら、次同じことを実装する際にコピペで済むようにコードをどこかにまとめておこうってことです！
まとめる方法は何でも良いです。
エクセルやNotionにまとめたりしても良いと思います。
私はNotionに以下のようにまとめています！
コピペするだけである程度の雛形は実装できるので、これをデザイン通りに適宜変更するだけで実装できます。
各実装ごとの、
●HTML
●CSS
●JS
などをまとめておいて、コピペで実装できる状態にしておきましょう！
時間がなくて、コードを書く時間もないという方は、
その実装で検索した記事などのURLを貼り付けておくだけでも良いです。
同じことを検索する行為が明らかに無駄なので、無駄な時間は排除しましょう！
コードスニペットで言えば、他にもVS Codeの拡張機能で、「Easy Snippet」というものがあります。
これはVS Code上で登録しておくと、登録したコードが一瞬で生成される便利な機能になります。
この記事では比較的簡単にできるものを優先的に紹介したいので割愛しますが、興味がある方はぜひ調べてみてください！
④Cursor
Cursorとはコードエディタで、AI機能を搭載しているものです。
（コードエディタとは、みなさんが普段使用されているVS Codeなどのことです！）
もっとわかりやすく言うと、
VS Codeの機能プラス、chatGPTが使用できたりコードを自動生成してくれるようなものです！
また、VS CodeをフォークしたものなのでVS Codeの拡張機能を引き継げることも便利です。
（VS Codeを使用している方はそのまま使用できるイメージです。）
下記の動画を見ていただくと、凄さが理解できると思います！
コードが指示通り自動で生成されていることがわかると思います！
このCursorについては、具体的なインストール方法と使用方法をまとめた記事を作成しています！
ぜひご覧ください！
この記事を読んでいただくとCursorの使用方法には困らないと思います！
まとめ
今回はコーディングのスピードを上げるために即実践できることを紹介しました。
例えば、単価5万円のコーディング業務を40時間（5日）でする場合の時給は1250円（日給1万円）ですが、20時間で行った場合の時給は2500円になります。
その空いた時間を娯楽に使用しても良いですし、同じ内容の業務をすれば収益は2倍になります。
コーディング業務においてスピードを上げることは収益を上げる近道なので、常に意識してください(^^)/
ここまで読んでいただきありがとうございました！
