
- Shopify
- 2025.02.16
Web業界では、この数年で新たな開発ツールがたくさん登場しています。ツールを使いこなして作業している人とそうでない人では、当然コーディングのスピードが大きく変わります。
単価を上げようと考えたときには受注金額に目を向けがちですが、「作業効率を上げて時間単価を上げる」という視点も重要です。浮いた時間を使ってほかの仕事をすれば、さらに収入を上げることもできます。
そこで今回は、デイトラWeb制作コースの責任者を務めるショーヘーがおすすめの、Web制作でコーディングを爆速にするツールを4つご紹介します!
これからWeb制作を学ぼうとしている方だけでなく、すでにWeb制作をしている方にも役立つ情報ばかりですのでぜひご覧ください!
コーディングスピードを上げるために欠かせないツールを4つご紹介します。
まだ使ったことのないツールがある方は、ぜひチェックしてみてください!
VSCode(Visual Studio Code)は、Microsoft社が開発した無料で使えるコードエディタです。
特徴は「軽量」「シンプル」「拡張性が高い」の3つ。定番のツールなので、すでに知っているという方も多いでしょう。
VSCordのおすすめポイントは、拡張性の高さです。VSCordにはさまざまなプラグイン(拡張機能)があり、上手く組み合わせることでコーディングスピードを上げられます。
たとえば、次のようなプラグインがおすすめです。
VSCordとプラグインを組み合わせることで、すべて手書きで書いていた事とは比べ物にならないぐらい効率よくコーディングができます。
EmmetはHTMLやCSSを短縮して記述できる入力補完機能で、VSCordに標準装備されています。
たとえば、何も書かれていないHTMLファイル上で「!(びっくりマーク)+tabキー」を押すと、HTMLに必要な必須タグを一瞬で書けます。
初心者でも必須タグを覚える必要がなく、記述ミスも減らせるのでとても便利です。
また、Emmetは省略記法が使える点もポイント。スペルがわからなくても頭文字だけ覚えていれば、VSCordが出した予測変換をもとに記述できます。
省略記法だけでなく、便利なショートカットもたくさんあるので、ぜひ活用してみてください!
Figma for VSCodeは、VSCode上でFigmaで作成したデザインカンプを確認できるツールです。
デザインカンプとは?
サイトの設計図のこと。フォントや画像の大きさ、背景の色など細かな要件が書かれており、デザインカンプをもとにコーディングする。
従来はデザインカンプとエディターを別の画面で表示しなければならなかったため、画面を行き来しなければなりませんでした。
しかし、Figma for VSCodeの登場でその手間を省き、効率よく作業ができるようになったのです。
また、Figma for VSCodeは、デザインカンプを確認できるだけではなく、文字サイズやフォントなどの値を自動コピーできます。
Figmaで作成したデザインカンプをもとにコーディングするときに、Figma for VSCodeは欠かせません。
Github Copilotは、コードを書き込むとリアルタイムで行動の提案や補完をしてくれるAIツールです。
AIはインターネット上の膨大な情報を持っているため、人間が調べたり考えたりするよりも圧倒的に速いスピードで解決にたどり着けます。
たとえば、Github Copilotを使うと次のようなことが可能です。
Github Copilotはアシスタントのように補助してくれるため、効率的なコーディングが実現します。
ただ、AIはあくまで提案をくれるツールであり、ベストな回答であるとは限りません。
提案が正しいかどうかの判断は人間がする必要があるため、丸投げはできないという点を押さえておきましょう。
最近新たなコードエディタ「Cursor」が登場し、注目を集めています。
Cursorは、ChatGPTを作ったOpenAIが出資している会社が作ったコードエディタです。
CursorはVSCordとは異なり、最初からAIが搭載されています。また、CursorはVSCordをベースに作られているため、VSCordで使えるプラグインは基本的にどれでも使えるのも特徴です。
しかも、Github Copilotの利用料が月額10ドルかかるのに対し、Cursoeは無料。そのため、SNS上ではVSCordからCursorに乗り換えたという声も増えています。
しかし、コーディングで言えば「VSCord + Github Copilot」のほうがおすすめです。理由は、Github CopilotとCursorはできることがほとんど一緒という点。
現状Cursorのほうが「ファイルを横断した提案に強い」「公式ドキュメントを参照したうえで提案できる」といった違いはありますが、VSCordでも今後のアップデートで対応すると言われています。
何より、CursorはVSCordをベースに作られてはいるもののVSCordではないため、Figma for VSCodeが使えません。
コーディングに必要な値を自動取得できるFigma for VSCodeが使えないとなると、作業効率がそれだけ落ちてしまいます。
よって、Web制作をするなら「VSCord + Github Copilot」のほうがおすすめです。
効率よくコーディングをするためには、ツールの活用が欠かせません。
今回ご紹介したものを使いこなせるかどうかで、作業にかかる時間は大きく変わります。
ツールの使い方を学んで、コーディングの作業負担を減らしていきましょう!
東京フリーランスは、1日1題のステップでWebスキルを身につけられる”デイトラ”を運営しています。
デイトラWeb制作コースは、実務レベルの本格スキルを学び、Web制作を仕事にしたい方におすすめのコースです。
HTML/CSSやjavaScriptを始めとした言語の基本からデザインカンプをもとにしたコーディング、WordPressのオリジナルテーマ作成まで、学習カリキュラムはなんと100日分!Web制作を網羅的に学べます。
また、中級・上級の最終課題はメンターによる課題レビューつき!品質を現場目線でチェックしてもらえるため、「自分は今どのくらいのスキルがあるのか」が客観的にわかります。
Web制作のスキルを身につけたい方は、ぜひデイトラWeb制作コースをチェックしてみてください!
ショーヘー(@showheyohtaki)
株式会社デイトラ代表。フリーランスプログラマーとして実績を重ねたのちに起業。現在はデイトラWeb制作コースの責任者も務めている。