未経験から実務レベルのWeb制作スキルを学ぶ基礎講座 見てみる

【学習ログ16】 ブックマークレットとNode.jsについて

こんにちは!つるぴよ(@tsurupiyoo)です

JavaScriptを勉強してフロントエンジニアを目指しています!
今回は学習ロードマップの1番目「マンガJavaScript」を読んでのまとめ、アウトプットを記事にしています。

 

あわせて読みたい
【学習ログ15】 JavaScript jQueryフォーム操作・JSONについて こんにちは!つるぴよ(@tsurupiyoo)です JavaScriptを勉強してフロントエンジニアを目指しています! 今回は学習ロードマップの1番目「マンガJavaScript」を読んでのま...

 

目次

jQueryAPI文書 日本語目次

「jQuery」Ver3のリファレンスの日本語目次のリンク
元々のドキュメントのリンク

マンガJavaScript 第24話 ブックマークレット

つるぴよ
つるぴよ
「ブックマークレット」について学んでくよ。
「ブックマークレット」って何??
ねこまる
ねこまる
つるぴよ
つるぴよ
ブラウザの「ブックマーク」や「お気に入り」に保存してそれらを呼び出すことで実行するアプリケーションだよ!

作り方はこんな感じです。

<a href="javascript:alert(document.title+'\n'+location.href);">
    タイトル+URLを表示
 </a>

Webページの「<a>」タグの「<href>」の値として「JavaScript:プログラム」を書きます。

取得するもの
「document.title」→Webページのタイトル
「location.href」→WebページのURL
「alert」でダイアログ表示

マンガJavaScript第25話Node.jsを利用したローカルアプリケーション

【Node.jsとは?できることは?】
・Google ChromeのJavaScript実行エンジンを利用して、サーバー上のプログラムをJavaScriptで書くために作られたもの。
・Webブラウザ用のJavaScript
・ファイル操作や通信などの各種処理(モジュールという部品を読み込むことで可能)
・ローカルアプリケーション開発にも使える

【今までの開発は‥】
Webページ内のプログラム→JavaScript
サーバー上のプログラム→JavaScript以外の他言語
【Node.js登場後は‥】
Webページ内もサーバー上のプログラムもJavaScriptで開発可能に!

Node.jsの環境開発の構築

「Node.js」の開発環境を作るのに必要なバージョン管理ソフト
・Windowsの場合→「nodist
・Macの場合→「nodebrew」

実際に使用する際には「releases page – nodist」

から最新版の「NodistSetup」(NodistSetup-vX.X.X.exe)をダウンロードして「Node.jp」
環境をインストールしましょう。

インストールが完了したらコマンドプロンプトを起動して環境が整っているか確認します。

 

コマンドプロントを開ける方法
方法その1[Win+X]でメニューを出して「コマンド プロンプト」を選択。
方法その2 ①[Win+R]で「ファイル名を指定して実行」ダイアログを出す。
②「cmd」と入力して[Enter]キーを押す。
コマンドプロンプトに3つのコマンドを入れます。
①「nodist」②「npm」③「node」
enntaキーを押すとそれぞれのバージョが表示されます。「npm」とは?
「node package manager」の略。
「Node.js」用の各種ライブラリをインストールするのに使います。

nodist -v
npm -v
node -v

それぞれのバージョンが表示されれば開発環境の構築は完成!!

プログラムの実行

つるぴよ
つるぴよ
「Node.js」用のプログラムは「UTF-8」で書く必要があるよ!

まず以下の中身の「test.js」を作ります。
「test.js」

console.log("テスト出力");
作成したファイルのあるフォルダ内でコマンドプロンプトを起動する
<起動方法>
方法その3
①「Explorer」内で[Shift]を押しながら右クリックして、コンテキストメニューを開く。

② コンテキストメニューから「コマンド ウィンドウをここで開く」

方法その4
Explorer」のアドレス欄に「cmd」と入力して[Enter]キーを押す。

コマンドプロンプトが開いたらその中で以下のように入力します。

node test.js

「Node.js」で「test.js」を実行するという命令です。
同じコマンドプロンプトに以下のような結果がでます。

テスト出力

package.jsonの作成

①「package.json」というアプリの情報をまとめたファイルを作る
②このファイル経由でプログラムを実行する

「Node.js」ではディレクトリ(フォルダ単位)でアプリを作ります
例えばここでは「test」というディレクトリを作成します。
その後「Explorer」で「test」ディレクトリを開きます。
ディレクトリでコマンドプロンプトを開きます。そこで

npm int-y

というコマンドを実行します。
そうすると「test」ディレクトリに「package.json」というファイルが作成されます。
このファイル内に作成するアプリの各種情報が自動で記載されています。
コマンドの中の「-y」は「デフォルトの設定」という意味です。
作成されるアプリ名はディレクトリ名になります。

作成した「packgag.json」の中身はこんな感じです。

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

「”main”:”index.js”」という部分が実行するJavaScriptファイル名です。
「test」ディレクトリ内に「index.js」を作成します。
中身を以下のように書きます(※UTF-8で書くことを忘れずに)

console.log("テスト出力");

先ほど開いたコマンドプロンプトで以下のコマンドを実行します。

node .

結果

テスト出力

バッチファイルの作り方

つるぴよ
つるぴよ
「test」内に「run.bat」というバッチファイルを作っておくと便利だよ!

バッチファイルを作ることで毎回コマンドプロンプトを開かなくてよくなります。
【run.bat】

node.
pause

「pause 」を削除するか「::〜」で無効にすると

node.
::pause

モジュール

つるぴよ
つるぴよ
「Node.js」はモジュールという部品を利用してプログラムの機能を追加できるよ!

【モジュールの種類】
・「Node.js」に初めから含まれているもの
・「npm」を通じてネットからインストールするもの
・自作したもの(外部ファイル)

これらのモジュールをプログラムに読み込む時に使う関数
「require」 (英語で必要とするという意味)

実例をみていきましょう!
以下は「Node.js」に初めから含まれている「File System モジュール」を読み込んだところです。

const fs = require('fs');

「const」‥あとで中身を書き換えない「定数」として変数を定義するという宣言
「require 」関数を利用して定数「fs」に「File System モジュール」を読み込む。
定数を使った理由はあとで間違えて上書きしてしまわないようにするため。

上記のようにしてモジュールを読み込めるのは以下です
「Node.jsに最初から含まれているもの」
「npmを通じてネットからインストールするもの」

「npm」を利用したインストール

つるぴよ
つるぴよ
「npm」を利用して「モジュール」をインストールする方法をみていこう!

手順
①インストールするディレクトリでコマンドプロンプトを開く
②「npm install モジュール名 –save」というコマンドを入力
③Enterキーを押して実行
④「node_modules」というディレクトリが作成される
⑤その中に関連ファイルがダウンロードされ展開される
(※「npmWARN」という警告が出る場合もあるが気にしなく大丈夫)

【いくつかの「npm」の「モジュール」とインストールコマンド】

npm install fs-extra --save

自作モジュール

モジュール単位でプログラムを分割した方がプログラムが長くなったときは見やすいです。
【 myMod.js】

// モジュール用オブジェクト
var mod = {};
 
// モジュールの読み込み
var execSync = require('child_process').execSync;
 
// 命令を追加
mod.openUrl = function(url) {
    execSync('start ' + url);
};
 
// エクスポート
module.exports = mod;

「モジュール」内では「module.exports」内に格納したオブジェクトが外部から参照できます。
上記では「require(‘child_process’).execSync」で「child_process」の「execSync」メソッドを取り出してへんすに格納しています。

execSync」メソッド→アプリケーションやコマンドを実行するための命令。
start」コマンドを使ってURLを開いています。

自作した「モジュール」は相対パスで読み込めます。
(※この場合「./」が必須なので抜かさないように注意)

使い方

//モジュールの読み込み
const myMod = require('./myMod.js');

//URLを開く
my.Mod.openUrl('http://crocro.com');

引数

process.argv」に引数などの情報が入っています。

コード 入っている情報
process.argv[0] 「Node.js」のパス
process.argv[1] 実行されたファイル(自身)のパス
process.argv[2]
process.argv[3]

引数1
引数2

バッチファイルにドロップしたファイルの情報を表示するプログラムを作ろう!
先ほど実行用のバッチファイルを作成したのでそれを改良します。
以下のファイル構造とします。

●fileInf
┣index.js
┣package.json
┗run.bat

【run.bat】

node .%*
pause

「%*」の部分でドロップされたファイルなどの引数を、「Node.js」の引数として引き渡しています。
実行の際には、この「run.bat」に複数のファイルをドロップしてみてください。

【package.json】

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

【index.js】

'use strict'
 
// モジュールの読み込み
const fs = require('fs');
 
// 引数の情報出力
for (var i = 0; i < process.argv.length; i ++) {
    if (i == 0) {
        console.log('Node.js のパス:', process.argv[i]);
    } else
    if (i == 1) {
        console.log('自身 のパス:', process.argv[i]);
    } else {
        console.log('引数:', process.argv[i]);
        var stat = fs.statSync(process.argv[i]);
        console.log('ファイルサイズ', stat.size);
    }
    console.log('');
}
 
console.log('引数の数:', process.argv.length - 2);

 

「’use strict’」とは?
「厳格モード」でJavaScriptを実行するという命令。
・自由度が減る
・エラーが起きにくいプログラムを書くことができる。

今回は「Node.js」に初めから含まれている「File System モジュールを使う」
「const fs = require(‘fs’);」として定数「fs」を通して使うようにしましょう。

「process.argv」は配列になっているのでこの値を処理していきます!
配列の要素2以降は、ドロップしたファイルなどの情報が入っています。
「var stat = fs.statSync(process.argv[i]);」でファイル情報をえて、「stat.size」でファイルサイズを得ています。

実行した結果の一例をみてみましょう。
「run.bat」に「index.js」と「package.json」をドロップしています。

【結果】

Node.js のパス:
C:\nodist\v\nodev6.7.0\node,exe

自身 のパス:D:\fileInt

引数: D:\fileInt\package.json
ファイルサイズ 221

引数: D:\fileInt\index.js
ファイルサイズ 551

引数の数:2

マンガJavaScript第24話、25話 まとめ

ここまで学んだ内容をまとめます

ブックマークレット
Node.jsを利用したローカルアプリケーション
開発環境の構築
バッチファイル
モジュールの種類
「Node.js」に初めから含まれているもの
「npm」を通じてネットからインストールするもの
自作したもの(外部ファイル)
モジュールをプログラムに読み込む時に使う関数「require」
引数

 

 

もりけん塾を運営している森田賢二さんのブログはこちらから👇

武骨日記

Twitterフロントエンジニア(@terrace_tech)のフォローは👇

フォローはこちら

目次