Node.jsで(黒い画面を怖がるデザイナーが)なにかやってみる(1)


黒い画面を怖がり続けて幾年月、Web制作会社からシステム開発会社に転職したのはいいけど、デザイン業務以外も覚えないといけない。IoTとかも勉強しないといけないし、サーバのこともこれからやっていかないといけない。Electronとかも面白そう。
Node.jsならjsだからほかの言語と比べてとっつきやすそうだし、ロゴも好きだし、情報もたくさんありそう。
ということではじめての黒い画面体験に、Node.jsを選びました。

同じように黒い画面を怖がる人たちにも参考にしてもらえるように、メモを残しておきます。
私はWindowsを使ってるのですべてWindowsの画面と言葉で説明していきます!

Node.jsをインストールする

さて、インストール方法を検索してみると、

  • Gitをインストールしないといけない
  • nvmを使えるようにしないといけない
  • npmコマンドを

・・・まて。

みんなが何を言っているのかわからん。

Gitからインストール?バージョンの上げ下げ?

知ったことではない。

ええいもうとりあえずインストールできればいいから!

ここにアクセスします!
そうするとこんなページになっています(2015/11/1現在)

公式ページですね。日本語版はまだないのか!

なんか5.0.0ってメジャーアップデートしたばっかりってこと?
よくわからないけどそれが最新っぽいからクリックするよ!

ダウンロードされたファイルを実行すると、よくあるインストール画面みたいなのが出てきました。
何を言っているかわからないけど、これだけ盛り上がってて大問題起きたとかいうニュースも聞かないので信じます!
言われるがままインストールを進めます。

インストールが完了したら・・・

いよいよ黒い画面・・・

(;゚д゚)ゴクリ…

黒い画面を使ってHello World

ここでひとつ気を付けないといけないことが。

通常、「黒い画面」というのは「コマンドプロンプト」っていうやつなんですが、Node.jsを使ってなにかやる場合には専用の黒い画面を使う必要があります。
さっきインストールしたときに一緒にインストールされているので、これを使いましょう。
もしうまくいかなかったらとりあえず右クリックで「管理者として実行」でいいんじゃないかな?(てきとー)

普段の黒い画面コマンドプロンプトを起動するとこんな画面なんですが、

こっちのコマンドプロンプトだと1行目がもう全然違いますね。

npmってなんだろう…
npmがセットアップされた環境だよって…?
nはnodeだよね…
pは…さっき管理者権限で実行したから、パーミッション…?それとも、パッケージ的な何か…?
mって?マネジメント…?マスター…?

・・・とりあえず今使わないと思うしあとで調べるね!!

で、たぶんこれでインストールはできてるから、ここから何をしたらいいかな?

たとえばこの記事を見てみると

それではお待ちかねのHello Worldをやってみましょう。Node.jsはコマンドライン上で動作しますが、Webブラウザ上で動作確認をしてみます。

(・∀・)イイネ!!

基本のHello Worldかつ、Webブラウザ上で確認ってところが、私でもわかりそうだ!これやる。

記事のとおり、テキストエディタでjsファイルを作ります。

わかりやすいようにとりあえずC直下にファイル置いちゃいました。
ここで、黒い画面を使って

とか書いてEnterバシーン!すると、このファイルをそのまま実行しちゃうんで、つまりどういうことかというと、エディタでファイルが開きます。
私の場合は、.jsファイルはDreamweaverで開いちゃうのでDreamweaverの中世ヨーロッパの貴族みたいなが女性がババーン!って出てきます。

これは簡単なことで、何かをするときには「node」コマンドを使います。
参考にしている記事はMacでやってるのでよくわかんねって思いましたが、だいたい勘でこんな感じで書きます。

node example.js

そしてEnterバシーン!

おおっ(゚д゚)!

できてるできてる!(∩´∀`)∩ワーイ

そして記事のとおり、http://localhost:8124にアクセスしてみると…

ワーイヽ(゚∀゚)メ(゚∀゚)メ(゚∀゚)ノワーイ

それにしても…

作ったjsファイルが何をしているのかもわかっていないし…

localhostって結局どういうことなのっていうのもわかっていないし…

8124ポートってなんなのなんでこんな番号なのっていうのもわかっていないし…

npmってなんなのって調べるのも忘れそうだし…

まだ、なにもわかっていませんし、何もできていませんね。先は長そうです。

黒い画面を使う、っていうだけでメンタル的にもすり減って、ここまでで大変疲れましたので、今回はここまで。

スポンサードリンク

菜摘

Web制作がメインですがときどきフライヤーデザインやCDラベルなどDTP系もやってます。 デザイナーだったはずがhtml/cssコーディングに目覚めた。 黒い画面は相変わらず怖い。 javascriptはこのごろちょっと頑張ってるよ。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です