★★【写真付き】短期間でヒゲ脱毛チャレンジ！結果はいかに…！★★
CREATE

【効率UP】HTML・CSSコーディングにおすすめ便利ツール6選！【2019年】

  /
thm01

これまでにweb制作会社で5年半、フリーランスになって4年の計10年間ほどコーディング業務を行ってきました平凡です。

今回はコーディング作業における、効率化と便利なツールをいくつかご紹介します。
これからコーディングを仕事にしていきたい。プログラミングを始めてみたいとお考えの方はご参考にしていただけると嬉しいです。

WindowsとMac間でファイルのコピー&ペーストが出来るマウス！複数PCを自由に行…

テキストエディタ

img01

皆さん大好きテキストエディタ。

誰しもがいつかは「どのエディタが最高・・？」と考えた事があろうツールの一つだと思います。
私は、Instagramで海外のプログラマーに「使いやすいテキストエディタを教えてください」とインタビューしてました。
2015年くらいでしたが「webstorm」や「Atom」が人気だった記憶があります。
ひと昔前は、起動や処理が悪くて使いにくいと感じていたエディタもアップデートを重ねる事で、今では各段に使いやすくなっています。
エディタによって特徴があるので、実際に使ってみて自分に合った物を使いましょう。

Sublime Text

https://www.sublimetext.com/

  • とにかく処理が早くてシンプルなUI
  • プラグインが多数で応用力が高い

入門編として触りやすいエディタ
10年以上前から人気があり、動作が軽くてプラグイン多数の応用性が高いエディタ。
とにかくスムーズでシンプルなエディタを使いたい方にオススメ。

Atom

https://atom.io/

  • 開発元 : GitHub
  • UIが使いやすく、デザインのカスタマイズが細かく出来る
  • エディタ内で構築中のHTMLをプレビュー表示が可能

エディタの背景に画像を設定する事が出来る。前の制作会社で、アニメキャラクターを設定して萌え萌えしていたプログラマーがいたのは良い思い出

Visual Studio Code

https://code.visualstudio.com/

  • 開発元 : Microsoft
  • アップデートが頻繁に行われており、日々進化している
  • デバッガが優秀

個人的にはNo.1のエディタ
UIも見やすく、検索やファイルを開いた際の処理速度も高速でパフォーマンス良し

Brackets

http://brackets.io/

  • 開発元 : Adobe
  • 日本語化が標準搭載
  • ブラウザ連動のHTMLプレビューが可能

HTML上でCSSを編集出来る「クイック編集」が人気
その他にも、ファイルを保存すると自動でブラウザを更新してくれる「プレビュー機能」やCSS内でPhotoshopのようなパレットを開いて色の変更が出来る機能が便利です。
初心者プログラマーにオススメです。

【高速化】さくらサーバーでWordpressが遅いと感じたら見直すべき3つの事

オンラインで作れるパーツ

ここでは、web上で実装したいパーツやレイアウトを作成する事が出来るサービスをご紹介します。
特にグラデーションやFlexboxは設定も細かく、自分で記述すると複雑で長くなってしまいますよね。
オンラインのGUIを使って、効率良くコーディングをしましょう。

最適化

年々進化するリッチコンテンツ化によってWebページは肥大化しています。
読み込みするデータが大きくなればなる程、ページ表示速度は遅くなります。
そこで、コーダーの私達はHTML, CSS, Javascriptのソースの他、画像の最適化を行う事でwebページ読み込み速度をスピードアップさせる必要があります。 

画像の最適化

画像の圧縮は非常に重要です。
下記サービスを使う事で、画質劣化を最小限に抑えつつファイルサイズを40%～80%軽減させる事が出来ます。

  • COMPRESSOR
    JPG, GIF, PNG, SVGファイルに対応

  • TinyPNG
    最大20ファイル、5MBまで複数ファイルのアップロードが可能

コードの最適化

コード内のスペースや改行やコメントアウトもデータとして扱われます。
微々たるものですが、無駄な記述を削除してコードを軽量化しましょう。
CSSに関しては、SASS, SCSSを使うと構築しながら自動圧縮してくれますので是非覚えましょう。構築スピードも向上します。

ページの表示速度が遅い？サーバーを変えないと改善されないかも？

サイト調査ツール

Wappalyzer

wappalyzer

https://www.wappalyzer.com/

参考にしたいwebサイトや競合サイトの調査に優れたサービス。無料で使用出来ます。
webサイト開発に使用された「CMS」や「プログラミング言語」「CSSフレームワーク」「javascriptライブラリ」と様々な情報が把握できるようになります。

Webサイトの点数をチェックしよう | PageSpeed Insights

公開する前にwebサイトの点数をGoogleの提供する「PageSpeed Insights」で確認しましょう。
ページの読み込み時間を短縮する為に「改善できる項目」を確認する事が出来ます。

  • 最適化されていない画像
  • 未圧縮のコードファイル
  • サーバー応答時間の長さ
  • Javascriptの実行にかかる時間　など

ブラウザでの開発デバッグツール | Google DevTools

コーディングに必須ツール「Googleデベロッパーツール」
起動ショートカットは、Windowsの場合「F12」、Macの場合は「Command + Option + I」です。
HTMLのclass等の属性確認やCSSのスタイル調整が可能です。
その他にもjavascriptエラー内容やページ表示が遅くなっている原因を特定するのに非常に有益なツールとなっています。

FirefoxやSafariにも類似機能が搭載されています。

Google Chromeアドオン

Google Chromeにはデベロッパーの強い味方になるアドオンが豊富にあります。
個人的に普段使用しているアドオンをいくつかご紹介します。

Wappalyzer

URL : Wappalyzer

上で紹介したサービスのアドオン版になります。
調査したいwebサイトを開いた状態で、URLバー右側の「Wappalyzer」ボタンを押すと、サイト内で使用されている「CMS」や「プログラミング言語」「CSSフレームワーク」「javascriptライブラリ」が確認出来ます。

HTMLエラーチェッカー

URL : HTMLエラーチェッカー

  • 構築後のタグ漏れ確認が可能
  • 自動エラーチェック
img_error

User-Agent Switcher

URL : User-Agent Switcher

  • Google開発
  • ユーザーエージェント情報を手軽に変更

手軽にユーザーエージェント設定が出来るアドオン
操作が簡単なので、クライアント環境にインストールしていただいて閲覧する事も可能です。(使い方)
私はフューチャーショップを使ったweb案件構築時に使用しました。
※フューチャーショップでは開発中のCMSページを確認する為にユーザーエージェント処理を行う必要があります。

まとめ

本記事では「コーディングにおすすめ便利ツール」をご紹介しました。
思い付きで普段使用している便利ツールを書き留めました。

今後も作業効率が良くなるツールを追記していきますので、ご参考にしていただけると嬉しいです。

CSS HTML javascript 作業効率化 便利ツール
関連記事