nvm で作る Node.js の環境構築（+ Hello world）
はじめに
react の環境構築をしようとしたところ、npm が必要でした。
npm は Node.js のパッケージ管理ツールで ruby でいう gem みたいなものでしょうか。
ということで、今更感満載ですが、Node.js をインストールして npm コマンド実行出来るようにして、ついでに Node.js で Hello world やってみようと思います。
環境
Mac OS X Yosemite 10.10.5
git 2.5.4
nvm のインストール
nvm は Node.js のバージョン管理マネージャです。
Node.js を複数バージョンインストールして簡単に切り替えできるツールです。
ruby でいう rbenv や rvm みたいなものですかね。
インストール
$ git clone https://github.com/creationix/nvm.git ~/.nvm && cd ~/.nvm && git checkout `git describe --abbrev=0 --tags`
パスを通す
$ . ~/.nvm/nvm.sh $ nvm --version 0.30.2
以下を、~/.bashrc 等に追記して、起動時に読込むようにします。
export NVM_DIR="$HOME/.nvm" [ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm
バージョンアップ
nvm をバージョンアップする場合は、以下のコマンドを実行します。
cd ~/.nvm && git pull origin master && git checkout `git describe --abbrev=0 --tags
Node.js のインストール
続けて Node.js をインストールします。
インストールバージョン確認
$ nvm ls-remote
v0.1.14
...
v5.4.0
v5.4.1
v5.5.0
奇数バージョンは最新機能版、偶数バージョンは長期サポート版
ということらしいので、僕の環境では特に安定版を使う理由はありませんが、せっかくなので両方入れてみます。
インストール
$ nvm install 4.2 Downloading https://nodejs.org/dist/v4.2.6/node-v4.2.6-darwin-x64.tar.gz... ######################################################################## 100.0% WARNING: checksums are currently disabled for node.js v4.0 and later Now using node v4.2.6 (npm v2.14.12) $ nvm install 5.5 ######################################################################## 100.0% WARNING: checksums are currently disabled for node.js v4.0 and later Now using node v5.5.0 (npm v3.3.12)
WARNING 出てます？
バージョン確認
$ node -v v5.5.0 $ npm -v 3.3.12
インストール確認
ls コマンドを使うと、インストール済みのバージョンを確認することが出来ます。
$ nvm ls nvm ls v4.2.6 -> v5.5.0 node -> stable (-> v5.5.0) (default) stable -> 5.5 (-> v5.5.0) (default) iojs -> N/A (default)
両方インストールされたことが確認できますね。
バージョンの切替え
use コマンドを使用して、使用するバージョンを切替えることができます。
$ nvm use 4.2.6 Now using node v4.2.6 (npm v2.14.12) $ node -v v4.2.6 $ npm -v 2.14.12
デフォルトバージョンの指定
毎回 use でバージョン指定をしなくてもいいよう、デフォルトで使用するバージョンを指定しておきます。
$ nvm alias default 5.5.0
Hellow Node.js
ついでに、Hello world やっておきます。
サンプルファイル作成
以下のコードをhello.js というファイル 名で保存します。
const http = require('http'); const hostname = '127.0.0.1'; const port = 1337; http.createServer((req, res) => { res.writeHead(200, { 'Content-Type': 'text/plain' }); res.end('Hello World\n'); }).listen(port, hostname, () => { console.log(`Server running at http://${hostname}:${port}/`); });
実行
以下コマンドを実行します。
$ node hello.js
Server running at http://127.0.0.1:1337/
ブラウザで http://127.0.0.1:3000/ にアクセスすると、以下の画面が表示されるはずです。
まとめ
nvm をインストールしてから同じようなツールとして nodebrew があることを知りました。
nvm は bash 以外と相性が悪いらしいので、z-shell 使ってる人は nodebrew 使ってるみたいですね。
nvm の環境壊して nodebrew に切り替えるのは面倒なので、差し当たり nvm をそのまま使おうと思います。
何かのタイミングで切り替えるかもしれないけど。
始めて Node.js のコードを見ましたが、Hello world だけだとよく分からないですね。
使う機会があれば本格的に勉強すると思うけど、Elixir / Phoenix の方が個人的には気になります。
いずれにしても、また別の機会に使ってみようと思います。
これで npm コマンドが使えるようになったので、React に必要なパッケージをインストール出来るようになりました。
ちなみに、npm と似たもので bower があるけど、両者の違いが分からない・曖昧な人はこの記事がすっきりさせてくれるはずです！
qiita.com
それでは！
参考
https://github.com/creationix/nvm
http://liginc.co.jp/web/programming/node-js/85318
2016年にやりたいこと50個
はじめに
目標は他人に宣言すると確率が上がるそうじゃないですか。
なので、2016年にやりたいことを晒しておきます。
心理学でいうと「宣伝効果」と言うみたいですね。
目的は、自分に適度にプレッシャーを与えることです。
年末、達成していないものがたくさんないように1年過ごしたいと思います。
こういうのは元旦にやるべきなんだろうけど、、、
やりたいことリスト
優先度順ではなく、ただの羅列です。
出来たものは打ち消し線。
（2016/04/01 更新）
- iOSアプリをリリースする
- iOSでゲームアプリをリリースする
- Andoroidアプリをリリースする
- Railsでサービス作って公開する
- JSの苦手意識を克服する
React触る- Anglar 触る
- CSSの苦手意識を克服する
- TOEIC を受ける
- TOEIC 600点
- 英文をスラスラ読めるようにする
- 英語でやりとりできるようにする
- 英語で海外の人とコミュニケーションできるようにする
- 海外に行く
- OSSにコミットする
- パブリックな場でプレゼン or LTをする
- ブログに100記事投稿する
- ブログで合計はてブを100個獲得する
- はてブが100個以上つくエントリーを書く
- ブログの読者50人
- Qiitaの Contribution を 100 にする
- Qiitaに 20記事投稿する
- 海外のエンジニアと知り合いになる
- ハマルビに行く
- 東京の面白そうな勉強会に行く
- 夏に家で快適に仕事ができる環境を整備する
- 個人事業主登録する
- 来年に青色申告できるように準備する
- ポートフォリオつくる
- 息子を勉強好きにする
- 息子をサッカー少年団にいれる
- 高橋さんに会う
- 本を24冊読む
- 技術書を12冊読む
- 伊藤さんに会う
- 鮒谷さんのコンサル受ける
- 朝5時起きの習慣をつける
- 慢性化した蕁麻疹を治す
- 年収◯◯万を超える
- Twitter のフォロワー数1000人
- 富士山登る
- ハーフマラソンを2時間で走る
響け！ユーフォニアムを見るガールズパンツァーを見る- 腹筋を割る
- 株で10万円もうける
毎日日記を書くことを習慣化する- 撮りためた動画の整理をする
- AWS使う
- ハイレゾのコンポを買う
Rails で datetimepicker を使用する手順
はじめに
Rails で Bootstrap の datetimepicker を適用する手順をまとめます。
Rails で datetimepicker の適用方法を検索すると、以下の2つの gem が使われています。
今回使用するのは、bootstrap3-datetimepicker-rails の方。
datetimepicker-rails は simple-form を使用する際の gem なので今回は使いません。
環境
Mac OS X（Yosemite）
ruby 2.2.3
Ruby on Rails 4.2.4
適用手順
Gem インストール
Gemfile に以下を追加。
gem 'momentjs-rails', '>= 2.9.0' gem 'bootstrap3-datetimepicker-rails', '~> 4.17.37'
bunlder でインストール。
$ bundle install
assets の JS と CSS を修正
/app/assets/javascripts/application.js に以下を追加。
//= require bootstrap + //= require moment + //= require bootstrap-datetimepicker //= require_tree .
/app/assets/javascripts/common.js を以下の内容で作成。
$(function(){ $('.datepicker').datetimepicker({ format : "YYYY/MM/DD", icons: { previous: "fa fa-arrow-left", next: "fa fa-arrow-right" } }); $('.datetimepicker').datetimepicker({ format : "YYYY/MM/DD HH:mm", icons: { time: "fa fa-clock-o", date: "fa fa-calendar", up: "fa fa-arrow-up", down: "fa fa-arrow-down", previous: "fa fa-arrow-left", next: "fa fa-arrow-right" } }); });
/app/assets/stylesheets/application.css に以下を追記。
*= require bootstrap-datetimepicker
フォームを修正
class 属性に datepicker を指定すると、日付選択の datetimepicker が表示されます。
<div class='input-group date datepicker'>
<%= f.text_field :deadline, class: 'form-control' %>
<span class="input-group-addon">
<span class="fa fa-calendar"></span>
</span>
</div>
class 属性に datetimepicker を指定すると、日時選択の datetimepicker が表示されます。
<div class='input-group date datetimepicker'>
<%= f.text_field :deadline, class: 'form-control' %>
<span class="input-group-addon">
<span class="fa fa-calendar"></span>
</span>
</div>
日本語化
次に日本語化をします。
/app/assets/javascripts/application.jsに moment/ja.js を追加。
//= require moment + //= require moment/ja.js //= require bootstrap-datetimepicker //= require_tree .
これだけ。
アプリケーションを再起動してフォームを確認すると、日本語になっているはずです。
（datetimepicker の locale: 'ja' 指定は不要でした。）
以下、datetimepicker を適用したサンプルページです。
https://aqueous-peak-8185.herokuapp.com/tasks/new
まとめ
こうして手順をまとめると、簡単に datetimepicker を適用できますね。
日付選択は苦手なフォームの1つでしたが、これで苦手意識はなくなりましたｗ
だた、表示するまでに あーでもないこーでもないとかやっているうちに1時間以上かかってしまったことは内緒です。
