【これがあれば大丈夫】Webエンジニアに必要なツールを紹介します

2018年11月19日

エンジニアに必要不可欠なツール

どうも、ブログ管理人のタクミです。本記事では主に次の内容を紹介します。

  • 【必須】エンジニアに必要不可欠なツール
  • 【助かる】あると便利なツール

この記事を書いている僕はWebエンジニアとして企業のホームページやランディングページのコーディングを行いながら、活動しています。

その中で、利用しているツールを中心に紹介したいと思います。必要不可欠なツールからあると便利であろうツールまで幅広く紹介します。どうぞ、よろしくお願いします!

【必須】エンジニアに必要不可欠なツール

  • テキストエディタ
  • FTPクライアントソフト
  • SSHクライアントソフト
  • Webブラウザ

コードを書くにはテキストエディタが不可欠

テキストエディタは簡単に言えばエンジニアがコードを書く環境を整えてくれるツールです。Webエンジニアは主にHTML・CSSやJavaScript、PHPなどをコーディングする必要がありますが、基本的にはテキストエディタ上で作業します。また、テキストエディタは色によるコードの分別、ディレクトリの表示、予測機能などがあるのでとても便利です。

エンジニアはコードを書くことから始まるので、まさに必要不可欠なツールと言っていいでしょう。下の画像はテキストエディタの一つであるBraketsの画面です↓

テキストエディタのBrakets

具体的なテキストエディタ(おすすめ)

  • Atom⇒GitHubが公開したテキストエディタ。WindowsとMacの両方で利用できる無料ソフト。
  • Brakets⇒Adobeが提供しているテキストエディタ。シンプルな見た目で使いやすい無料ソフト。

初心者の人は基本的に無料で使えるAtomかBraketsを使えば大丈夫です。どちらもエンジニアに人気のあるツールなのでおすすめです。

FTPクライアントソフトでサーバーにファイルをアップロード

FTPクライアントソフトはWebサーバー上にファイルをアップロードしたり、サーバー上からローカルにファイルをダウンロードしたりできるツールです。Webエンジニアは主にコーディングしたHTML、CSS、JavaScript、PHPなどのファイルをアップロードし、ネット上にWebページを公開するのに利用します。

コーディングしたファイルはサーバーにアップロードしないとみんなに見てもらえないので、FTPクライアントソフトは非常に重要です。

具体的なFTPクライアントソフト一覧(おすすめ)

  • Cyberduck⇒シンプルで直感的に利用できるFTPクライアントソフト。WindowsとMacの両方で利用可能な無料ソフト。
  • FileZilla ⇒WindowsとMacの両方で利用可能な無料ソフト。多くのエンジニアが利用している。

基本的にはCyberduckかFileZillaを使えば大丈夫です。どちらも無料で簡単にダウンロード・設定ができるのでおすすめです。

SSHクライアントソフトでリモート操作が可能に

SSHクライアントソフトはiPアドレスやポート番号を入力することで、外部のサーバーなどにアクセスすることができるツールです。サーバー上に何かしらの操作を行いたいとき(アプリケーションのインストールなど)に利用します。コマンド入力することでいろんな操作ができるので、幅広い活躍を見せます。

具体的なSSHクライアントソフト一覧(おすすめ)

  • TeraTerm⇒Windows上で動作
  • PuTTY⇒WindowsとMacの両方で利用可能
  • terminal⇒Mac OSにデフォルトで搭載されている

Windowsを利用しているならTeraTermかPuTTYをダウンロードしてインストールしましょう。Macを使っているなら初期状態でterminalが搭載されているので、そのままterminalを利用するのが良いでしょう。

Webブラウザでサイトのレイアウト等をチェック

Webブラウザはドメイン経由でWebサーバーにアクセスしてサイトを表示します。Webエンジニアは作成したWebサイトのレイアウトや挙動を確認するのに利用します。

特にCSSに関してはブラウザごとに対応が異なる場合があるので、入念なチェックが必要になります。コーディングしたサイトがどのブラウザでもレイアウトが崩れずに表示されていることは非常に大切です。

具体的なブラウザ一覧

  • Google Chrom
  • Microsoft Edge
  • Firefox
  • Internet Explorer
  • Safari

それぞれのブラウザをインストールしておくと良いでしょう。

【助かる】あると便利なツール

  • MAMP
  • Photoshop

MAMPでローカル環境を構築

MAMPはレンタルサーバー(エックスサーバー、ロリポップなど)やAWS(Amazon Web Service)などのサービスを利用せずにローカルでWebサイトを構築することができるツールです。WebエンジニアはWordPressのテスト環境としてMAMPを利用することがあります。

レンタルサーバーを利用せずにWebサイト・アプリなどのテストができるので、コストがかからず非常にお得です。

※ちなみにMAMPは「Macintosh」「Apache」「MySQL」「PHP」の頭文字をとったものです。PHPやMySQLを使ったWebアプリの開発環境にも使えます。

Photoshopで写真加工・サイトレイアウト

PhotoshopはAdobeが提供している写真加工ツールです。Webエンジニアはサイトのレイアウトを作成するときや画像編集するときに使います。また、デザイナーとの連携においてPhotoshopは重要な役割を果たすので、ぜひ購入しておきたいところです。