Windowsで無料でできるWeb開発環境の構築手順を解説します[前編]
皆さんこんにちは。
今日は、Web開発を始めるにあたってWindowsのPCで環境を構築する手順を紹介したいと思います。Web開発といえばMacを使っている方が大半だと思います。確かに、Linuxベースに作られているMacのほうが便利なのは事実ではあると思いますが、Windowsでも環境構築さえしっかりできれば、あとはMacと同じように開発を進めることができます。尚、本記事に記載している手順は現在Web開発をしている僕が実際に行った内容です。以下の3点です。
- フロントエンド開発の材料となる、Webデザインをするための環境構築
- HTML5/CSS3/Bootstrap4/Javascript等を使ったフロントエンドの開発環境構築
- Ruby on Railsを使ったバックエンドの開発環境構築(on Docker)
1本の記事ですべてを解説すると長くなりそうなので、2本に分けて紹介したいと思います。
今回は「1.フロントエンド開発の材料となる、ウェブデザインをするための環境構築」と「2.HTML5/CSS3/Bootstrap4/Javascriptを使ったフロントエンドの開発環境構築」の2点について紹介していきます。
■1.フロントエンド開発の材料となる、Webデザインをするための環境構築
僕がWebデザインをするために使っているのは、「Adobe XD CC」です。「Sketch」というツールが王道なのですが、Macでしか使えません。「Adobe XD CC」はAdobeに会員登録すれば無料プランで利用できますし、日本語での情報も豊富に公開されているのでおすすめです。
下記のURLからダウンロードできます。
※「体験版」と書いてありますがすべての機能を利用できますのでご安心ください。
ダウンロード後は、画面の指示に従ってインストールを進めてください。
Adobe製品は「Adobe Creative Cloud」と呼ばれるツールに統合されており、Xdもここからインストールされます。
インストールが完了してピンク色の「Xd」アイコンがデスクトップに配置されれば正常に完了しています。
Webデザインをするために僕が行った構築作業はこれだけです。あとは、Xdで新しいデザインページを作成していくことができます。デザインを行う際に便利なプラグインや小技がいくつかありますので、別の記事で紹介したいと思います。
■2.HTML5/CSS3/Bootstrap4/Javascriptを使ったフロントエンドの開発環境構築
<2-1.エディタ>
無料でフロントエンドの開発環境を構築する際にインストールしたのがGitが開発している定番のエディタ「Atom」です。こちらもXdと同様に、下記の公式サイトからダウンロードして画面の指示に従うだけでインストールできます。簡単ですよね？
「Atom」はファイルの拡張子によって、適切にコマンドの補完をしてくれるので開発スピードアップ+ミス削減につながる他、左のペインでフォルダ構成を表示してくれるので複数ファイルでの開発がとてもスムーズになります。
インストールが完了して起動できたら、「ファイル」→「環境設定」→「+インストール」を開きパッケージをインストールしていきます。たくさんの便利なパッケージが用意されています。とりあえず以下の8つを検索してインストールしておきましょう。
color-picker
pigments
maximize-panes
tag
emmet
file-icons
remote-edit
selection-highlight
ここまでAtomについて紹介してきましたが、僕は現在利用していません。最初はAtomを使っていたのですが動きが非常に重いことが多かったため、「Sublime Text3」という別のエディタに切り替えました。こちらは80アメリカドル支払うことで永久ライセンスを取得できるのですが、トップバーに「Unregistered」と表示されるのとたまにポップアップで買ってねアピールをされるのを気にしなければ、評価版として無料で使えます。超高速で動作しますので、インストールして利用してみることをおすすめします。
下記の公式ページからダウンロードできます。使ってみて気に入ったら、80ドル支払って気兼ねなく使いましょう。
AtomもSublime Textも最終的にはお好みで利用すればよいと思いますが、今のところ僕はSublime Textを利用しています。(ライセンスも購入しました。)
<2-2.ブラウザ>
さて、ここまでで1.ウェブデザインをして、2.HTML/CSS等でコーディングする、ところまでできる状態になりました。そのあとに必要なのが3.動作確認する、ために必要なのがブラウザです。Webアプリを利用するユーザがどんなブラウザからアクセスしてきても正常に表示されているか確認できるように、複数のブラウザをインストールしておくことをおすすめします。今回はWindowsでの開発ですので標準でインストールされている「Internet Explorer」、「Microsoft Edge」に加え、最近は特に一般的な「Google Chrome」、その他に「Firefox」をインストールしておくとよいと思います。また、端末依存で表示が変わる場合がありますので、iPhoneやAndroidがあるとより充実します。残念ながら、Appleのブラウザ「Safari」はWindows対応を終了していますので本ブラウザでの動作確認はMacかiPhoneでしかできません。AndroidについてはWindowsで動作するエミュレータ「Nox」をインストールして利用しましょう。
こちらからダウンロードでき、インストールするだけで動作します。
Noxのインストールが完了してandroidが起動してきたら、標準ブラウザに加えてここでも「Google Chrom」をインストールしておくとよいと思います。
ここまでで、「Webデザインをするところからブラウザで確認しながらコーデイングする」という一連の開発プロセスを実施できる環境が整いました。この環境があれば、静的なWebページやJavascript/jQuery等を利用した動的なWebページを開発することができます。
次回は後編として、Webアプリケーションの開発環境構築手順をご紹介していきます。
僕が行ったのは、Windows上にDockerでコンテナを作成して、その上にRuby on Railsをインストールするというものです。
今回の記事で紹介したアプリは「ダウンロードしてインストールする」だけで利用できましたが、次回は少し設定や操作が必要ですので、図を用いてより具体的に説明していきたいと思います。
本記事の内容について質問や意見がありましたら、コメント欄からお気軽にお問い合わせください。
今回も最後まで読んでいただき、ありがとうございます。
