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

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

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

あわせて読みたい

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

JavaScriptの学習方法

1. マンガJavaScript読む
2. 改訂新版JavaScript本格入門読む
3. Webページで使われているような部品をJSで作る(タブ、フォーム、ドロワーメニュー、スライドショー、オリジナルゲームを作る、検索ボックス、ページネーション)
4. APIリクエストで得たデータでコンテンツを作る

— フロントエンドエンジニア (@terrace_tech) June 30, 2020

jQueryAPI文書　日本語目次

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

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

つるぴよ

「ブックマークレット」について学んでくよ。

「ブックマークレット」って何？？

ねこまる

つるぴよ

ブラウザの「ブックマーク」や「お気に入り」に保存してそれらを呼び出すことで実行するアプリケーションだよ！

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

<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
・ファイル操作や通信などの各種処理（モジュールという部品を読み込むことで可能）
・ローカルアプリケーション開発にも使える

Node.jsの環境開発の構築

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

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

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

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

nodist -v
npm -v
node -v

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

プログラムの実行

つるぴよ

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

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

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

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

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」というバッチファイルを作っておくと便利だよ！

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」の「モジュール」とインストールコマンド】

• fs-extra（ファイル操作強化用のモジュール）

npm install fs-extra --save

npm install klaw-sync --save

npm install encoding.japanese --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」に引数などの情報が入っています。

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

●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);

今回は「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
ファイルサイズ　２２１

引数：　D:\fileInt\index.js
ファイルサイズ　５５１

引数の数：２

マンガJavaScript第２４話、２５話　まとめ

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

武骨日記

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

フォローはこちら