個人の開発環境構築-Dream Driven Development(夢駆動開発)

個人でこれからプログラミングを始めようという場合に、どのような開発環境を作ればよいのかを考えていきます。
一言でプログラミングといっても、Web系、スマホ系、インフラ系、組み込み系などいろいろあるのですが今回は特にWeb系で考えます。

Web系開発のレイヤー
HTML + CSS 開発環境
javascript開発環境
- ページ移動の試験
ruby/python開発環境(CGI開発)

Web系開発のレイヤー

Web系開発といっても大規模になるとデータベースやロードバランサーなどインフラ系の話も出てきて奥が深くなってきます。
個人で始めるならまずはブログ作成などでも使えるhtml/cssから始めるのが良いでしょう。

HTML+CSS : 固定のwebサイトを手動で書ける
javascript : 動きのあるwebサイトが書けるようになる
Python/Ruby/PHP : ユーザからの入力に応答するサービスが書ける
データベース(mysql/postgresql..): 会員制サイトなどが書ける
クラウド(aws,google cloud,azure等): 大規模展開
ネットワーク(Cisco, Juniper等): インフラ構築

上にあるほど個人向け、下に行くほど会社員や就職向けの技術になるかと思います。

なお、この記事では「無料ブログ」や「WordPress(ワードプレス)」はWeb系開発とは認めていません。

HTML + CSS 開発環境

この段階ではテキストエディタとブラウザがあれば始められます。
例えば以下のファイルを作成して同じディレクトリにおいてブラウザで開くとページが見れます。

<html>
	<head>
	</head>
		<link rel="stylesheet" href="./style.css">
	<body>
	<h1>title</h1>
	<p>hogefuga</p>
	</body>
</html>

index.html

p {
	color:red;
}

style.css

index.htmlをブラウザで開くと確認できます。
この環境でウェブページの作成とレイアウトの基本は学べます

javascript開発環境

ページ内で動作するjavascript(メニューの出し入れとか)であれば、html/cssと同様にテキストエディタとブラウザがあれば十分です。
先程のファイルに以下を追加します。

<html>
	<head>
	</head>
		<link rel="stylesheet" href="./style.css">
		<script type="text/javascript" src="./test.js" ></script>
	<body>
	<h1>title</h1>
	<p>hogefuga</p>
	</body>
</html>

index.html

window.addEventListener('DOMContentLoaded', function() {
	alert("hello")
}

test.js

こちらもindex.htmlをブラウザで開くとアラームウィンドウが開いて動作が確認できます。

ページ移動の試験

javascriptでページの移動(ページ遷移)の開発・試験が行いたい場合は、小さなウェブサーバーを立ち上げると便利です。
その場合、Linux系の環境を構築するのが手っ取り早いです。

Windowsの場合

Windows10のストアからUbuntu環境(WSL:Windows Subsystem for Linu上に構築)をインストールするだけでLinux環境が手に入ります。

Macの場合

ターミナルを開くとLinux環境となっています。(← WSLが出る前はこのためにエンジニアでmacブームになった)

Linux専用マシン

Ubuntu等のサイトからダウンロードして構築することができます。サーバー系の開発では便利ですが、html/css/javascriptの開発では使い慣れたwin/macのほうが良い気がします。

各環境でrubyやpythonを入れたら、以下のコマンドでwebサーバーを立ち上げることができるので、上記のindex.htmlファイルのあるところで立ち上げてみましょう。

python3 -m http.server 8080

pythonのwebサーバー起動

ruby -run -e httpd . -p 8080

rubyのwebサーバー起動

立ち上げたらブラウザでhttp://localhost:8080/にアクセスすればindex.htmlの内容が表示されます。

ruby/python開発環境(CGI開発)

web上でユーザの入力に対応してサービスを提供する場合、pythonやrubyでCGIと呼ばれるプログラムを書くことになります。
javascriptのページ移動の試験で書いたのと同じ環境(Windows=>WSL(Ubuntu)、Mac=>ターミナル、Linux(Ubuntu))があれば開発には困りません。
作成する場合には先程のindex.htmlのあるディレクトリの下にcgi-binというディレクトリを作成し、そこに作成したプログラムをおきます。
webサーバーを立ち上げる場合、pythonではcgiモジュールの読み込みが必要となります。

python3 -m http.server 8080 --cgi #cgi のときはcgi-binフォルダに.py入れる

pythonのwebサーバー起動

例えばとある僕のCGIプログラムの開発ディレクトリ構成はこんな感じになっています。

.
├── test.html
└── cgi-bin
    ├── ranking.py
    └── ranking.cgi

小さなプログラムであればこれくらい小規模な構成で十分作成できます。
僕の趣味で作ったwebツールは↓↓↓こんな感じです。

DrivenDevelopment.jp エンジニアとブロガーのためのお役立ちサイト
エンジニアとブロガーのためのお役立ちサイト。お役立ちツールも作っています。

意外と小規模な環境で始められるので、挑戦してみてください。

enjoy!

個人の開発環境構築