Quantcast
Channel: Node.jsタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8691

【解説しながら】ターミナル上で動作するメモアプリをnodeで作ってみる。Part1

$
0
0

今回の記事は【作成】・【解説】の二部構成になっています。
初学者が理解るように丁寧に解説して行きつつ、完成を目指していきます。
解説は良いから作り方だけ見せてくれやって言う方は、【作成】だけを見ていくことをおすすめします。
細かい説明を知りたい方は【解説】を読んで頂くと良いかと思います。
序盤は解説が多くなりますがご了承ください。

📗 対象

  • nodeを始めたばかりの人・なんとなく触ってみたい人
  • ES6.ECMAScriptを基礎的なところまで理解している人

📗 まずはディレクトリを作成しましょう♪ 【作成】

任意のフォルダに今回はmemoというディレクトリを作ります。

ターミナル
% mkdir memo  
% cd memo
% touch app.js

上記のコマンドは、メモディレクトリを作成→メモディレクトリを指定→app.jsを作成という流れになってます。

app.jsが動作するか、適当にコードを書いてみたいと思います。

app.js
console.log("起動してます")

下の写真の様になっていれば、成功です。
スクリーンショット 2020-05-25 21.31.25.png

nodeで開くときは

% node app.js

このように node というコマンドを使って開きます。
しかし、コレだとコードを更新するたびにコマンドを入力しないといけないので、非常に面倒です。
後ほど紹介しますが、nodemonというnpmを使用していきたいと思います。

📗 require関数を使ってみる 【解説】

requireは直訳すると、「必要とする」という意味になります。
この関数は外部ファイルを呼び出すための関数で、nodeファイルの中で自由に使えるようになります。
呼び出すファイルのことを、「モジュール」や「パッケージ」などと呼ぶこともあります。

require関数が呼び出せる対象は
1. コアモジュール、ビルトインモジュール(nodeをインストールした時点で自動的に使えるようになっているツール群のこと)
2. 独自に作成したオリジナルファイル(ディレクトリに自分で作ったファイルとか)
3. npmパッケージ(npmで取得してインストールして呼び出す)
この3つが主に呼び出せるものとなります。

require関数には、ファイルパス、モジュール名、パッケージ名などを文字列として渡します。

コアモジュール

公式ドキュメントは
https://nodejs.org/api/documentation.html
こちらになります。全部英語なので、得意な人は読んでみても良いかもしれません。私は一ミリも読めません。勉強します!

📗 コアモジュールfsを使う 【解説】

今回はfsというコアモジュールを使っていきます。file sytemの頭文字をとってfsだと思います。
また、今回はappendFileというメソッドも使ってみましょう。
appendFileは、指定したファイルが無ければ、ファイルを作成し、次に情報を追加します。

app.js
constfs=require('fs');//fsを使えるようにrequireするfs.appendFile("greeting.txt","Hello,world",function(err){//greeting.txtがなければ作成、そのファイルの中にHello,worldという情報を入れる。if(err){console.log(err);}});

エラーが起こった場合のif文を書いていますがそこはあまり気にしなくていいです。
実行してみましょう。

ターミナル
% node app.js

画面は前回同様に、起動していますよ という文字が出ています。
ではどこに変化が出ているのでしょうか?
エディタを見てみます。
スクリーンショット 2020-05-26 11.42.13.png

このように、greething.txtファイルができており、中にはHello,worldの文字列が格納されています。
再度、

ターミナル
% node app.js

と行うと、スクリーンショット 2020-05-26 11.43.44.png
このように、新しいファイルはつくられず、文字列だけが追加されているのがわかります。
簡単な記述で、ファイルの作成や情報の追加が出来ることがわかったと思います。

コアモジュールosを使ってみる【解説】

os(オペレーティングシステム)のコアモジュールを使って機能を追加してみます。
パソコンのシステムの基本的な操作や情報取得を行うオブジェクトです。
今回は、
os.userinfo()
というメソッドを使います。
文字通りuserの情報を入手するのが目的です。

app.js
constfs=require('fs');constos=require('os');//fs同様 osをrequireする。letuser=os.userInfo();//user変数に、os.userInfo()というuserの情報を入れる。console.log(user);

ではプログラムを実行してみましょう。
スクリーンショット 2020-05-26 11.58.37.png
このように、自身のPCの情報などが取得できたかと思います。

では実際にosプロパティを使ってみましょう。
先程fsで記入したコードを活用します。

app.js
fs.appendFile("greeting.txt","こんにちは!"+user.username+"さん!ようこそ",function(err){if(err){console.log(err);}});

node app.jsで実行してみましょう。
すると、
スクリーンショット 2020-05-26 12.06.17.png
このように、さきほどusernameに入っていた情報が出力されます。

オリジナルファイルを扱ってみる【解説】

自身で作成したファイルをrequireさせるにはどうしたら良いでしょうか?
適当にファイルを作ってみます。今回はcontents.jsを作成しました。
その中に、console.log("contentsが稼働しております。")など適当なメッセージログを書いて保存してください。

では、requireしてみましょう。

app.js
// 省略 constの下に書いてくださいrequire("./contents.js"); //引数として渡すのは、モジュール名ではなく、相対パスになります。./は忘れずに書きましょう。

保存してnode app.jsで立ち上げると、ターミナル上に、contents.jsで記入したコードが出力されているはずです。

ただ、このやり方は別ファイルの処理を行うだけです。
では、contens.js内で宣言したものをapp.jsで使うにはどうしたら良いでしょうか?
それには、moduleというものを使います。
moduleオブジェクトはrequireと同じようにnodeにおいてグローバルなもので、どこでも使える物となっています。

moduleを使う上で、中身を知る必要性があるので、contents.jsにて

contents.js
console.log(module);

そして、ターミナルでapp.jsを立ち上げてください。
スクリーンショット 2020-05-26 12.52.37.png
注目してほしいのが、exports:{}という部分になります。
このexportsに付属するものとして定義することで他のファイルから呼び出せるようになります。

では、先程書いたconsole.log(module)は削除して、情報をcontens.jsの中に身長の情報定義していきたいと思います。

contents.js
module.exports.height=178;
app.js
constcontents=require("./contents.js");//先程requireしたcontents.jsを変数化してあげる。fs.appendFile("greeting.txt","こんにちは!"+user.username+"さん!あなたの身長は"+contents.height+"cmです。"以下コード割愛//このように、既存のコードに追加してnode app.jsを行ってください。

すると、greeting.txtに、こんにちは!〇〇さん!あなたの身長は178cmです。というように出力されていると思います。

関数の場合も同じです。

contents.js
module.exports.addNote=(){console.log("addNote");return"new note";
app.js
letresult=contents.addNote();console.log(result);

実行すると、コンソール上にaddNote new note と出力されていることが確認できます。

以上が、require関数による外部ファイルの処理、module.exportsによるファイルの外部化と呼び出しについての解説になります。

📗 npm init(初期化) install について【作成】

npm initを入力することでnodeに欠かせないnpmパッケージが利用できるようになります。
ターミナルにて

% npm init

と入力すると下の画像のように色々と聞かれます。
スクリーンショット 2020-05-26 15.20.55.png

これは、アプリケーションの初期設定となります。gitに上げるときはgit repositoryに記入したりしてください。
今回は、ここの説明は省略します。とりあえず、入力したら何も考えずに連打してOKです。
すると、ディレクトリにpackage.jsonができています。
中をのぞくと先程ターミナル上で聞かれた内容が書いてあると思います。

これでnpmパッケージをインストールする準備ができました。

npmパッケージは2種類のインストール方法が存在します。
1つ目はターミナルから入力していきます。

ターミナル
% npm install パッケージ名 --save

こうするとpakage.jsonの
"description": "",この中にnpmパッケージが入力されます。
2つ目は、上記のパッケージが格納される場所に直接書くことでインストールできます。
expressを入れてみましょう。(実際は入れなくていいです。)

pakage.json
"description":{"express":"*"//"*"は最新版という意味です。}

このようにして、npmパッケージを導入してきます。

nodemon導入【作成】

コレまでの解説を見てきて、

% node app.js

これを毎回打つのが凄いめんどくさいなと思いませんでしたか?
コードに変更を加えたら自動で更新してくれればいいのに、というニーズを叶えてくれるのが
nodemonというnpmになります。

nodeで開発を行う上で必須のnpmとなりますので、今回はPC自体にインストールしたいと思います。

sudo npm install nodemon -g

-gはグローバルという意味でパソコン自体にインストールするということです。

すると、passwordを聞かれますので、ご自身のPCのパスワードを入力してください。

インストールができたら早速nodemonでファイルを起動してみましょう。

% nodemon app.js

では、app.jsのconsole.logの文字を適当に変更してみてください。
ターミナル上で自動的に再読み込みされているのがわかると思います!

長くなりそうなので、今回は以上となります!
今回は、ほとんど説明ばかりになってしまいました、申し訳ありません。

次回のための準備【作成】

app.js
console.log("app.js起動中");const=require("fs");constcontents=require("./notes.js");
contents.js
console.log("contents.js起動中");

こんな感じに、jsファイルの余分なコードを削除した状態から始めます。

📗 次回予告

今回の内容を踏まえた上で
次回から本格的にメモアプリを作って行きたいと思います。


Viewing all articles
Browse latest Browse all 8691

Trending Articles