Webサイトを作る上で知っておきたいコーディング力を上げるコツとお役立ちツール15選

Webサイトを作る上で知っておきたいコーディング力を上げるコツとお役立ちツール15選

自分の思い通りにコーディングして、webサービスをリリース出来たらカッコいいですよね。

今回はフロントエンドまわりのコーディング・スキルアップ術や役立ちそうなツールをご紹介させて頂きます。

目次
  1. コーディング力を上げるための手順
  2. 基礎学力の習得
  3. 優れたデザイン・サイトをチェックする
  4. コードの解析
  5. HTMLスケッチ
  6. チョット働いてみる
  7. コーディングに役立つエディタ・ツール5選
  8. Adove Dreamweaver
  9. コーディング・チェックツール9選
  10. コーディングのトレーニング・サイト2選
  11. まとめ

コーディング力を上げるための手順

photo:EpisodeIt

基礎学力の習得

独学で習得したコーディング術には、よく抜けている部分があります。

体系立ててHTMLやCSSを基礎から学ぶことで、将来的な技術力UPにつながります。

☞ HTML と CSS の基礎学習なら CodeCamp

優れたデザイン・サイトをチェックする

Webのコーディング手法は、現在進行形で進化しています。

トレンディーなサイトを見ることでモチベーションが上がると共に、新しいコーディング術の発見にもつながります。

AwwwardsThe Webby Awards、参考になります

コードの解析

普段色々なwebサイトを見ていると、んっ、と思うようなデザインも見かけると思います。

そんな時はソースコードを拝見して、どんなふうにデザインを設定しているのか自分なりに解析してみましょう。

分からないなりにもコードを見て分析していくと、解明できると思いますよ。

ちなみに私が最近『んっ』と思ったサイトは、アニメーション画像がラップしている下記のwebデザインです。スマホサイトでもキレイに配置されていて、面白いな、と思いました。

bitbank.com

HTMLスケッチ

Wikipediaなどの既存サイトを元に、模写するトレーニング方法になります。

ソースコードを見ずに、自分で予測しながらマークアップしていくと必然的にコーディング力がついてきますね。

チョット働いてみる

もしコーディング力を活かした仕事がしたいと思っているならば、業界のことを知る上でもアルバイトからスタートしてみてはいかがでしょうか?

indeed

コーディングに役立つエディタ・ツール5選

Adove Dreamweaver

Adove Dreamweaver

video:Adobe

有償にはなりますが、webデザインとコーディング機能を兼ね備えたAdobeDreamweaverを使うと、コーディングが捗ります。

Photoshopのデザインファイルを読み込んでコーディングできるなど、Photoshopベースの現場ではDreamweaverが人気です。

ただし、いくらDreamweaverが優れているからと言っても、HTMLやCSS、JavaScriptの知識は必要になってきます。

Coda2

photo:kyoji-kuzunoha.com

Mac https://panic.com/jp/coda/

Windows http://www.codawindows.com/

コーディングに必要な機能がすべてそろっている、という噂の高機能ツールになります。

本家Mac版のCode2は、9800円で利用できます。

Brackets

Bracketsは、Adobe社から無料で提供されているテキストエディタになります。

標準でNode.js機能を搭載しているので、コーディング内容がライブでブラウザに反映され作業が捗ります。

ASP.NETベースのコーディングなら

Microsoft社が提供しているwebフレームワーク『ASP.NET』を使ったコーディングならMicrosoftVisualStudio

Coding the Web(Chrome App)

photo:chromewebstore

ブラウザ上でHTML、CSS、JavaScriptを編集し、出力確認ができる無料のChromeAppになります。

テキスト編集、保存、ブラウザ確認という一連の手間が、一つの画面で完結できます。ちょっとしたCSSやJavaScriptのテストに向いていますね。

コーディング・チェックツール9選

W3C Markup Validator

code-w3c

HTMLの記述ミスを教えてくれる有り難いサービスです。

URL、ファイルのアップロード、直接記述の3種類からHTMLシートの内容をチェックしてもらうことができます。

W3C CSS 検証サービス

code-w3c-css

先ほど紹介したW3C Markup ValidatorのCSS版です。

Code Beautify

code-code-beautify

単なるコードの検証にとどまらず、より美しくコンパクトなコードを提唱してくれるwebサイトになります。W3CCSS検証サービスでは問題なかったコードも、CodeBeautifyにかかるとダメ出しだらけです。

CSS LINT

code-css-lint

CSSコード・チェッカーサイトになります。

CSSLINTのいいところは、入力したコード全体を表示しながらエラーや注意があるコード部分をハイライトして教えてくれるところです。

部分的にエラーコードを切り抜かれて表示されるより、全体を見ながら検証できるのでコーディング初心者にとっては作業しやすいと思います。

Stylizer

http://s3.amazonaws.com/download.skybound.ca/media/elevator.win.mp4

編集したいwebページをStylizerが読み込み、簡単にCSS編集できます。

Chromeの検証機能に比べるて、編集したいCSSのプロパティを直感的に操作できます。

またページ内にどれだけCSSファイルが存在し、どれだけの要素が含まれているか総合的に確認することができます。

要ソフトインストール79ドル(2週間無料)

RapidCSS

HTMLとCSS、JavaScriptのデバッグ作業を手伝ってくれるWindows用のソフトになります。

スペルチェックをはじめ、W3C Markup Validator機能も搭載しています。

要ソフトインストール29.95ドル(1カ月無料)

JSHint

code-jshint

ブラウザ上に入力したJavaScriptコードをライブで検証してくれるwebサイトになります。コーディングしながら間違いに気付けるので、作業効率を向上させてくれます。

JQuery Spell Checker

jQueryを利用するときに参考にしたいコーディング・チェックツールです。code-jquery-checker

開発中のwebサイトにもjQueryプラグインとして実装できますので、簡単に修正箇所を見つけ出すことができます。

jQuery Spellchecker

軽量タイプのjQueryスペルチェッカーになります。またGrunt対応モデルでもあります。

コーディングのトレーニング・サイト2選

Dash

coding-dash

スマホ使用不可/初心者対象

ブラウザ上のチュートリアルに従ってHTMLやCSS、JavaScriptのコーディングを行っていきます。

タイプしたコードは即時出力に反映されますので、スピード感をもってコーディングを学習することができます。

学習内容は、『パーソナルwebサイト』『レスポンシブ対応のブログ・テンプレート』『簡単なビジネスサイト』などなど盛りだくさんです。

TEST DOME

code-testdome

スマホ△/初心者・中級者対象

プログラマー仲介サイトが公開している実践型のプログラミング・テストになります。

Webサービス部門では基本的なHTMLからBootstrapやJavaScriptなどのコーディングテストを体験できます。問題を解く時間も計測されますので、より実務的なコーディング力を身に付けることができます。

まとめ

コーディング力って地道な努力が必要なイメージがありますが、今回ご紹介させて頂いたようなツールやトレーニング・サイトを使うと、楽しくスキルアップできそうですね。HTMLやCSS、JavaScriptの基礎学習がまだの方は、CodeCampご検討下さい🙋

オシママサラ
ライター
オシママサラ

関連記事