Webプログラミングで使用しているツール紹介

雑記
スポンサーリンク

こんにちは朱夏です。

今回は、自分がWebプログラミングで使用しているツールを紹介していこうと思います。
これだけあればWebサイトを作成していく上で困ることはほぼないと思います。

  • Visual Studio Code
  • GoogleChrome
  • localbyflywheel

 

Visual Studio Code

コードを書くためのエディタとして使用しています。

HTML、CSS、JavaScript、PHPあたりを書くのには、個人的にこれが最強だと思っています。
私のお気に入りポイントは以下。

  • コードの予測変換が優秀
  • ハイライト機能で見やすい
  • 背景が黒いので目が疲れない

コードの予測変換はとても便利です。
HTMLのタグ打ちするのに”p + Enter”と入力するだけで<p></p>まで入力してくれるので入力が早くなるだけでなく、閉じ忘れ防止にもなっています。

ハイライト機能はコード書く上でかなり見やすくなるので、個人的には必須です。

私の個人的な感覚かも知れませんが、背景が白いエディタを使っていると、眩しくて目が疲れやすい気がします。

 

GoogleChrome

Webページ作成で結果を確認するのに必要なブラウザ枠です。

 

その中でもChromeが選ばれる理由は、デベロッパーツールですね。

デベロッパーツールはかなり便利です。
他の人が作ったサイトのコードを覗いたり、自分の作っているサイトの状態を確認するのにも使えます。
良く使っているのは要素の有効エリアの確認ですね。
デベロッパーツール上でマウスカーソルを任意のコードにホバーすると、ページ上の表示部分がハイライトされます。
それと同時に、marginやpaddingの幅も色違いでハイライトされるので、表示のずれを修正する時などにはとてもお世話になっています。

 

localbyflywheel

ローカル開発環境を構築してくれるツールです。
WordPressテーマやPHPを書くときにはこれが無いと確認できません。
以前はXAMMPやMAMPを使用していましたが、localbyflywheelに落ち着きそうです。

 

localbyflywheelを使う理由は以下。

  • WordPressインストール機能が付いている
  • データベースも自動生成
  • WordPress開発に特化した機能が多い

こんな感じです。
WordPressのテーマ作成などを行うのであれば、localbyflywheel上で作成するのが一番やりやすいと思います。
ローカルサーバー構築時にWordPressインストールが出来て、データベースも自動で作ってくれて、localbyflywheelのコンソールからWordPressの管理画面、サイト表示、ディレクトリを開くなどのボタンもそろっています。
私がMAMPやXAMMPを使用していた時は、データベースを作成するのにかなり手間取ったのですが、今ならlocalbyflywheelを使えば一瞬で環境の準備ができますね。

 

あとがき

というわけで、私が使っているツールを紹介しました。
かなり評価の高いツールばかりですし、使っている人が多いので、困った時もググれば大体答えが出てくるというのも使っている理由になります。

この3つだけあればWebサイト作成のためのコードはほぼほぼ書けます。
あとはひたすらコードを書いていきましょう。

今回はここまでです。
次回もよろしくお願いします。

 

タイトルとURLをコピーしました