【プログラミング入門の入門】Node.jsとかいうチートアイテム

javascript

プログラミング Node.js

こんにちは。継続の錬金術士なおキーヌです。

ブログ毎日更新は205日目になります。

第3回目は配列を覚えて1つずつ取り出す方法を覚えました。

今回はちょっと趣向を変えてNode.jsというJavaScriptが便利になるツールを導入してみます。

Node.jsは簡単にいうとJavaScript強化パーツと思ってください。

シンプルなJavaScriptだけだと相当時間をかけてプログラムを組まないと
すごいことができないので、正直時間の無駄です。

もしすでにあるものをお金をかけないと使えないというのであれば、
独自で開発してしまってもいいのですが誰でも無料で使えるのであれば、
それを使って独自のものを作った方がいいでしょう。

Node.jsは詳しくいうと小難しい話になるので、省きます。

使ってみるともう戻れないと思うほどのチートツールです(笑)

それではプログラミングの入門の入門第4回目始めましょう。

  1. 車輪の再発明をするなら新たなものを作れ
  2. 強化されたJavaScript、Node.jsをインストールしよう
  3. 黒い画面でハッカー気分を味わおう
  4. メモ帳を卒業しよう

車輪の再発明をするなら新たなものを作れ

リキくんのやりたいことが実現するまであと少しだね。
配列にまとめたデータをファイルとして書き出すには素のJavaScriptではすごく面倒くさいんだ。

そうなのか。やってるとなんでもできそうな感じがしたけどそう上手くいかないんだな。

今でこそ大体なんでもできてしまう言語になっているけど、元々JavaScriptはホームページに動きつけたり制御するためによく使われていて、
ファイルを読んだり書いたりする機能はそこまで強くなかったんだ。

じゃあ今は別に問題はないってことなんじゃないのか?

JavaScriptの能力は動かす大元、つまり使ってきたもので言えばブラウザの性能によって左右されるんだ。
今の時代のブラウザであればファイルの読み書きも昔に比べれば楽にできるようになったけど、それでも自分で1から書くとものすごく面倒くさいんだよ。

じゃあ今は別に問題はないってことなんじゃないのか?

ここで1つ、リキくんに質問するよ。
沢山ネジを締めなければいけない仕事があります。でも手動で締めていたら納期に間に合わない時間になりました。リキくんの目の前にはメーカーが作った立派な電動ドライバーと、1つ1つの部品に分解されている状態の電動ドライバーがあるとしたら、リキくんならどっちを使う?補足すると分解されているものは組み立てれば隣にある立派な電動ドライバーとまったく同じ性能になるんだ。

そりゃお前、すでに組み立てられているドライバーに決まってるだろ。なんで時間もないのにわざわざ分解されているものを組み立てないといけないんだよ。それなら手動でネジ回した方がいいんじゃないか?

完璧な答えをありがとう。

まてよ……そんな簡単な質問をするってことは裏があるってことだよな。もしかすると自分で作った方がいいとかか?確かに自分で作ったら知識も増えるし今後の役にも立ちそうだ。

いやいや、正解か不正解かで言えばリキくんの最初に答えたことが正解だよ。

???どういうことだ???

既に便利なものが世の中にあるのに、あえて0から同じものを作るのは車輪の再発明といってね。
詳しく書くと長くなるから意味はググってほしいんだけど、
結論を言うとそんなことしてる暇あれば便利なものを使ってもっと便利なものを生み出せってことなんだ。

確かにそうだな。で、JavaScriptとそれがどんな関係があるんだ?

ここからが本題だよ。JavaScriptを元に便利な機能を沢山詰め込んだツールがあるんだ。
それを使えばまるでドラ◯もんのように道具を取り出して使うだけで難しいことが一瞬で実現できてしまうんだ。

なにぃ!?そんな夢見たいな便利なものがあるのか!なんで先にそれを教えてくれないんだよ!

強化されたJavaScript、Node.jsをインストールしよう

確かに今から教えようとしていることを始めにやればすごく効率がいいかもしれない。
またちょっと話がそれちゃうけどゲームでの例え話として、最初からオープンワールドで自由にやれってゲームと、
ストーリーがちゃんと組み込まれていて最初はレールに沿ってから好きにシナリオを分岐させられるゲーム、どっちがいい?

俺は断然後者だな!いきなり放り出されるゲームは続いた試しがないんだよ。
レールプレイングゲームとか言われようと、俺はシナリオがちゃんとしていて強くなってから後々隠し要素とか探しまくるゲームが好きだぜ!

ボクが今教えているのはリキくんの好きなゲームと同じ感じで、
今から覚えてもらうことはオープンワールドで要素は用意したからあとは自由にしろって放り出されるゲームと同じ感じなんだ。

???

前置きが長くなってごめんね。
使ってみれば今言ってきたことが体感できるようになると思うんだ。
それじゃあ下記のURLにアクセスしてみて。

Node.js
https://nodejs.org/ja/

使っているOSによって表示が違うけど、Windowsの場合はアクセスすると↓の画像のようになるよ。

LTS?と最新版ってどっちをダウンロードしたらいいんだ?

基本的にプログラミング系のダウンロードするものはLTS(LongTimeSupportの略)を選択しておくといいよ。

……よし、ダウンロードしたぜ。インストールしていいのか?

うん、基本的に指示通りにインストールしてくれたらいいよ。こだわりがある人はインストールドライブとかを変更するけどわからない場合はそのままいれちゃって分かるようになってきたらアンインストールしてもっかい入れ直せばいいよ。

Windows版であればNode.jsはインストーラーを使った方が簡単にインストールできます。

こう言うソフトは進化が早く、今まで使えてた機能で作ってたのに新バージョンだと使えなくなった!とかがあるので、
そういうときに他のバージョンを使いたいってときがよくあります。

専用のソフトを使ってバージョンを切り替えて管理できるソフトがあるんですが、
今はそんなことする必要がありませんので、後から覚えてしまえばいいです。

Node.jsの話に戻りますが、過去に私が導入について書いた記事もあるので、
そちらも見ていただければより入門しやすくなります。

javascriptでプログラミングを始めるためのNode.js入門

それではリキくんとトモカズくんの対話に戻りましょう。

黒い画面でハッカー気分を味わおう

よし!インストール完了したぜ!で、これどうやって使うんだ?アプリらしきものはないみたいだけど……

Node.jsは基本的にはあの黒い画面で使うんだよ。

なにぃ!俺もハッカーになれるのか!?

みたいな体験は出来るよ。とりあえず黒い画面……Windowsで言うとコマンドプロンプトを立ち上げてみようか。

コマンドプロンプト?

キーボードのWindowsキーを押すか画面左下のWindowsマークを押して「cmd」とキーボードで打ち込んでみてよ。

おぉ、コマンドプロンプトってやつが出てきたぞ!起動して良いか?

うん、立ち上げてみてよ。ハッカーが使ってるような黒い画面がでてくるよ。

おぉ!すげぇ!なんか起動しただけでそれっぽいぞ!

その画面で「node -v」って打ち込んでエンターを押してみて。

(カタカタカタ……タンッ)

お!?なんか「v10.16.0」って出てきたぞ!

-v っていうのはバージョンを調べるコマンドなんだ。ちなみにボクのは結構古いから「v8.11.3」って出るね。

バージョンが違うとなんか問題あるのか?

基本的なことはあんまりかわらないんだけど、さっきも言ったように使えてた機能が
最新バージョンではより便利なものに変わって前のものが廃止されたりするんだ。

なるほどな、格闘ゲームのバージョンアップでハメ技が修正されたりするようなもんか

うん、ゲームもプログラムだからね。そう思ってくれればいいよ。

で、これどうやって使うんだ?まさかバージョンを表示するだけじゃないよな?

流石にそれはないよ(笑)
またバージョンの確認になるけどちゃんとインストールされているかどうか知りたいから「npm -v」ってやってみて

(カタカタカタ……タンッ)

またバージョンが出てきたな。なんだこれ?Node.jsってやつとはまた違うのか?

node.jsで使うプログラムを管理するソフトなんだ。
ちなみにnpmは「Node Package Manager」の略なんだよ。

なんかよくわからんな……

それじゃあNode.jsを体験してみようか。
「node」とだけ打ち込んでエンターを押してみて

ん?なんか>ってのだけ出てきたぞ。

node.exeというソフトが立ち上がった証拠なんだ。
ここに半角で「1+1」って打ち込んでエンターを押してみてよ。

> 1+1
2
>

2が表示された!ってあたりまえだろ!

そうだね。パソコンは超高性能電卓みたいなもんだから計算なんかできてあたりまえなんだ。
それじゃあ次はこれを打ち込んでみて

> text = "Hello Node.js!"
'Hello Node.js'

変数に入れた文字が表示されたぜ。これがどうしたんだ?

じゃあ、「text[6]」って打ち込んだらどうなると思う?

そりゃ文字列は文字の配列だから……「N」……あっ!

気付いたみたいだね。そう、nodeを起動するとJavaScriptが動くようになるんだ。
今まではメモ帳にhtmlとしてJavaScriptを埋め込んでブラウザを起動して~ってやってたでしょ?
nodeはnodeそのものがJavaScriptエンジンだからブラウザが無くてもうごくんだ。

でもこれじゃプログラミングっていうよりもなんかチャットみたいだな。

これは対話形式といって正直あんまりこれで使うことはないかな。
ボクはシステムを作っている時にこの命令はこういう時どんな挙動になるんだろうって
軽く調べたいときに一々ブラウザを立ち上げないで確認できるから便利なんだ。

俺にはまだそんなことはできそうもないな……

まぁ必要な時が来たらでいいよ。それじゃあ終了させるために「Ctrl+c」を2回続けて押してみて

元に戻ったぜ。

これでNode.jsを使えるようになったから、ファイルの書き出しとかも凄く楽になったよ。
次回でリキくんのやりたいことがほぼ出来上がるんじゃないかな。

やはりなんかよくわからんが、進んでいるってことはわかるぜ!

メモ帳を卒業しよう

最後に余談だけどこれからずっとメモ帳でプログラミングするのは凄く効率が悪いんだ。
メモ帳ってアンドゥ、つまり1つ前に戻るが1回しかできないの知ってた?

あぁ、ペイントとかだと結構前に戻れるんだがメモ帳だと1つ戻って一つ進むの繰り返しだからちょっとイライラしてたんだ。

これからは高機能なテキストエディタを使っていくことをオススメするよ。

よくわからん、説明してくれ。

さっきも言ったようにメモ帳だとアンドゥが1回しかできないけど高機能テキストエディタだと設定した回数戻れちゃうし元にも戻れちゃうんだ。
更に文字を置き換える置換機能やちょっと特殊な「正規表現」っていうあいまいな検索とか置換もできるんだ。

ちかん……

典型的なボケはいいよ……置換って言う前に置き換えるって前置きしたでしょ。

す、スマン……

他にもメモ帳だと設定しないと黒一色だったけど、プログラミングやHTMLを組んでいる時全部黒だと凄く見辛くなってくるんだ。
高機能テキストエディタだと自動で色分けしてくれたり、閉じ忘れたカッコとかも教えてくれたりするんだよ。

なんかすげぇな!オススメの高機能テキストエディタを教えてくれ!

そうだね、黒い画面だけで完結したいならキーボードだけで完結する「vi」やviを高機能にした「vim」や「Emacs」ってのがあるんだけど、
正直な所今のリキくんでは難しいかもしれないね。結構特殊な操作だから下手したらプログラミングが嫌いになっちゃうよ。

そ、それは困るな……黒い画面カッコいいけど使いにくいのは嫌だ。

これも慣れなんだけどね。ボクも最初は凄く苦手だったけど仕事でサーバー管理とかしていると嫌でも使わなきゃならなくなって覚えたって感じだね。

トモカズでも辛いのに俺が出来るわけがないだろ……他になんか使いやすいのはないのかよ?

最近ボクが使っているのはMicrosoftが出している「Visual Studio Code」ってエディタなんだけど、
ボクが過去に使ってたモノで言うと無料ならサクラエディタTeraPad、有料だけど凄く使いやすい秀丸EmEditorっていうエディタがシンプルでオススメだよ。

どれも聞いたことないな……

確かにプログラミングとかしないとメモ帳やエクセルで事足りるからね。

いっぱいあると迷うな……トモカズ!決めてくれ!

そうだね……ボクとしては「Visual Studio Code」一択かな。

じゃあそれだ!早速ダウンロードしてインストールしてくるぜ!

他のエディタでもある機能だけど、特に何もしなくてもさっきの黒い画面も一緒に使えるから使えば使い込むほどすっごい便利だよ。
なんたってこれが無料なのが驚きだよね。これあったら他要らないって言う声が大きく聞こえてくるほど便利なエディタだよ。

トモカズも使ってんだったらわからなければ聞けばいいし決定だな!

えぇ……ちょっとはググって自分で調べるって言う発想をしようよ……

頼りにしてるぜ!トモカズ!

もう、しょうがないなぁ……

トモカズくんはVisualStudioCode(以下VSC)を進めてきたけど、エディタは自分の使いやすいモノを選ぶのが一番です。

他にも無料で高機能のテキストエディタはたくさんあるので色々試して自分のやりたいことに合うテキストエディタを見つけてみましょう。

私は色々使ってみてVSCに落ち着きました。

サイドバーにファイル一覧、下画面にプロンプト、上画面にテキストエディタって感じでプログラミングするうえではとても便利なエディタです。

今回でNode.jsの導入が完了したので次回はNode.jsを体験しながらファイル入出力をやってみたいと思います。

それでは。