ブログタイトルのとおり、ネットブックでプログラミングをしてみたいと思います。
やってみるのはnode.js環境でのフロントエンドの開発です。まずはnode.jsをインストールしてindex.htmlを表示させます。その後、jQueryを使ったjavascriptを書いて動かしてみたいと思います。
cmder・Sublime Text・nodistのインストール
nodeをインストールする前に、入れておくと便利なツールとしてcmderとSublime Textをインストールします。インストールしていなくてもnodeは使えますが、両方共軽量で使いやすいため入れておいても損はないと思います。
コマンドプロンプトを使いやすくするcmder
Sublime Text3(公式)
次にnodeをインストールしていくわけですが、開発環境としてWindowsにnodeをインストールする場合は「noodist」をお勧めします。
nodistとは複数バージョンのnodeをインストールして切り替えながら使うことができるツールです。nodeのnpmを使って開発していると、特定のnodeバージョンでしか動作しないパッケージもあります。その都度nodeをインストールし直すのは面倒ですが、nodistを使っていれば簡単にnodeのバージョンを切り替えることができます。
nodistのインストール方法や使い方については以下の記事を参考にしてください。
Windowsにnodeをインストール
index.htmlを表示する
では実際にコードを書いてhtmlを表示させましょう。
まずはnodeでルーティングするために必要なExpressをインストールします。Expressはcmder(コマンドプロンプト)からnpmを使ってインストールすることができます。
|
1 |
npm install express |
そして、index.htmlを表示させるためのjsファイルはこんな感じです。
[app.js]
|
1 2 3 4 5 6 7 8 9 10 11 |
var http = require( 'http' ); var express = require( 'express' ); var app = express(); var server = http.createServer( app ); app.use( express.static( __dirname ) ); app.get( '/', function ( request, response ) { response.redirect( '../index.html' ); }); server.listen( 3000 ); |
あとindex.htmlを用意しましょう。
[index.html]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!-- index.html --> <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>サンプル</title> </head> <body> <div style="margin: 20px auto 0 auto; font-size: 32px;"> Hello World ! </div> </body> </html> |
これで準備は完了です。早速nodeでサーバを起動して、index.htmlを表示させてみましょう。サーバ起動するコマンドはこれです。
|
1 |
node app.js |
ブラウザを開いて「http://localhost:3000」にアクセスするとindex.htmlの内容が表示されているかと思います。
jQueryを使う
これでindex.htmlは表示できるようになったので、フロントエンド側のコーディングができます。jQueryを導入して、簡単な変更を加えてみましょう。
まずはindex.htmlを変更します。scriptタグを2つ追加してdivをdisplay:none;で非表示にしています。
[index.html]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>サンプル</title> </head> <body> <div style="margin: 20px auto 0 auto; font-size: 32px; display: none;"> Hello World ! </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script src="sample.js"></script> </body> </html> |
そして、sample.jsというファイルを追加します。
[sample.js]
|
1 2 3 |
$(function() { $( 'div' ).fadeIn( 1000 ); }); |
これで再度index.htmlを表示させると「Hello World」の文字がフェードインするようになったかと思います。
まとめ
早足でしたが、node.jsを使ってhtmlを表示し、javascriptを使ったコーディングまでできることを確認しました。
このくらいのサイズならネットブックのような低スペックパソコンでも、全く問題なく作業できました。ひとまずフロントエンドのプログラミングの勉強はこのネットブックでやっていけそうです。
今後はさらにGruntやYeomanなども試していきたいと思います。
