What's New Qiita

20200711のNode.jsに関する記事は6件です。

  • 投稿日：2020-07-11T22:25:36+09:00

新しいMacでNode.jsのインストールからVue.js + nuxt.js + Vuetifyで開発環境手順(zsh対応版)

概要

macOS Catalina におけるフロントエンドの開発環境作成
Catalinaからbashからzshが標準になったため、zshでの環境構築方法を記載
※ バージョンは全て2020年6月30日時点のものです
新しいものが入っていても基本的には問題ないはず

brew

Mac用のパッケージ管理ソフト

インストール
$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

coreutils

GNUコマンドを使用する

インストール
$ brew install coreutils

jq

JSONを成形、絞り込みを行う

インストール
$ brew install jq
例
$ echo ‘[{“hoge”: “hoge”, “fuga”: “fuga"}]’ | jq

xz

圧縮、解凍

インストール
$ brew install xz
例
$ xz -z hoge
$ xz -d hoge.xz

wget

ファイルのダウンロード

インストール
$ brew install wget
例
$ wget -r http://………/download.zip

確認

上記でインストールしたパッケージが表示されることを確認

$ brew list

nvm

Node.jsのバージョン管理ツール

nvmのGitHubを参照して最新バージョンをインストールする
https://github.com/nvm-sh/nvm#install-script

インストール
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
環境設定
$ vim ~/.zshrc

vimが起動するので~/.zhrcに下記を追加

~/.zshrc
export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

ターミナルを再起動

バージョン確認
$ nvm --version

0.35.3

Node.js

JavaScript実行環境

インストール可能なバージョンを確認
$ nvm ls-remote --lts | grep Latest

v4.9.1 (Latest LTS: Argon)
v6.17.1 (Latest LTS: Boron)
v8.17.0 (Latest LTS: Carbon)
v10.21.0 (Latest LTS: Dubnium)
v12.18.1 (Latest LTS: Erbium)

お好きなバージョンをインストール
基本的には最新で良いと思います。

インストール
$ nvm install v12.18.1
バージョン確認
$ node -v

v12.18.1

npm

JavaScriptのパッケージ管理システム

yarn

npmと同じくパッケージ管理システム
今回はyarnを使用する

インストール
$ npm install -g yarn

serverless

Serverless Application(AWS, Azure, GCPなど)を構成管理デプロイするためのツール

インストール
$ npm install -g serverless

npmのライブラリを確認

バージョン確認
$ npm ls --depth=0 -g

/Users/[ユーザー名]/.nvm/versions/node/v12.18.1/lib
├── npm@6.14.5
├── serverless@1.74.1
└── yarn@1.22.4

Nuxt.js

vueのフレームワークの1つ
Routerの記述をする必要がなくなってめっちゃ便利

インストール
// プロジェクトを作成したいフォルダに移動
$ cd ***/*** 
$ yarn create nuxt-app <my-project>

上記コマンドを入力すると対話型のインストーラーが起動します
入力内容は下記を参考に自分に適したものを選択してください

? Project name: (my-project)

? Programming language: (Use arrow keys)
> TypeScript

? Package manager: (Use arrow keys)
> Yarn

? UI framework: (Use arrow keys)
> Vuetify.js

? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◉ Axios
 ◉ Progressive Web App (PWA)
 ◯ Content

? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◉ ESLint
 ◉ Prettier
 ◯ Lint staged files
 ◯ StyleLint

? Testing framework: (Use arrow keys)
> None 

? Rendering mode: (Use arrow keys)
> Single Page App 

? Deployment target: (Use arrow keys)
> Server (Node.js hosting) 

? Development tools: 
 ◉ jsconfig.json (Recommended for VS Code)
 ◯ Semantic Pull Requests

インストールが完了したら下記のコマンドを実行

$ cd <my-project>
$ yarn dev

? Are you interested in participation? (Y/n) 
n

http://localhost:3000/
アクセスしてVueのアイコンが表示されれば構築完了

あとはかっこいいWebサイトを作ってください！

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-11T18:33:20+09:00

Node.jsで作る簡単なWebアプリケーション

今回はNode.jsで作成する簡単なアプリケーションの作り方を解説していきます。
※nodeとnpmはインストール済みであることを前提としてます。

プロジェクト作成

まず、プロジェクトを作成していきます。
今回はsampleという名前のプロジェクトを作成します。

package.json作成

vacode上で先ほど作成したフォルダを開き、
ターミナルで下記のコマンドを実行し、package.json を作成していきます。

npm init

このとき、プロジェクト名などを聞かれまずが、
entrypointのみ"app.js"に変えましょう。

必要となるパッケージをインストール

必要となるパッケージをインストールしていきます。

今回使うのは下記の3つのパッケージです。
・express
・ejs
・bootstrap

それではインストールしていきましょう。

インストールは以下のコマンドで実行できます。
npm install express ejs bootstrap --save

インストールが完了すれば準備OKです。

必要なディレクトリを準備

次に、必要なディレクトリやファイルを用意します。
スクリーンショット 2020-07-11 18.01.07.png

このような状態にしましょう。

bootstrapの中身については、
node_module/bootstrap/distの中をコピーしてください

app.jsの中身を記述する

まず、必要最低限の中身を書いていきます。

app.js
var express = require('express');
var app = express();

app.listen(3000);

続いて、テンプレートエンジンの読み込みを行います。

app.js
var express = require('express');
var app = express();

app.set("view engine", "ejs" );//テンプレートエンジンの読み込み

app.listen(3000);

次に、静的ファイルの配信を行います。

app.js
var express = require('express');
var app = express();

app.set("view engine", "ejs" );//テンプレートエンジンの読み込み

app.use('/public', express.static(__dirname + '/public'));//静的ファイルの読み込み

app.listen(3000);

最後に、ルーティングを記述したファイルを呼び出します。

app.js
var express = require('express');
var app = express();

app.set("view engine", "ejs" );//テンプレートエンジンの読み込み

app.use('/public', express.static(__dirname + '/public'));//静的ファイルの読み込み

app.use('/', require('./routes/index.js'));//ルートにアクセスしてきたときのルートファイル

app.listen(3000);　

これで、app.jsの中身はOKです。

ルーターを作成

次に、routes/index.jsの中身を書いていきます。

routes/index.js
var router = require('express').Router();

router.get('/', (req, res) => { //getでルートにアクセスしてきたときの処理
  res.render("index.ejs");
});

module.exports = router;

Viewを作成

最後にアクセスした際に表示されるページのViewを整えます

views/index.ejs
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="/public/third_party/bootstrap/css/bootstrap.min.css" />
</head>
<body>
  <div class= "container">
    <h1>サンプル</h1>
    <P>Node.js + Expressで簡単なWebアプリケーションができました</P>
  </div>
</body>
</html>

※注意点
・bootstrapを使用するので"container"を忘れずに
・拡張子はhtmlではなくejs

これで全ての準備が整いましたので、以下のコマンドを実行して確認してみましょう。

node app.js

ターミナル上では待機状態になっているはずなので、Chromeを立ち上げてlocalhost:3000にアクセスしてみましょう。

スクリーンショット 2020-07-11 18.23.04.png

うまく表示されたのではないでしょうか。

以上になります。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-11T17:05:38+09:00

GAS Webpack利用時にエディタが重くならないようにする

対象

  • Google Apps ScriptでWebpack、Claspを利用してWebアプリケーションを開発している方向け
  • 利用しているエディタはVisual Studio Code

解決したい課題

WebpackでバンドルしたソースをGASのエディタにアップロードすると、重すぎて開かない...ということが起こります。これの回避を今回したいと思います。

結論

Webpackバンドルされたファイルに改行を挿入すれば改善されます。

詳細

Visual Studio Code等もそうですが一行の文字数が増えると結構重くなります。GASのエディタもそんな要領で出力されたソースに改行を加えてるとすんなり開けるようになりました。

私の場合の改行の加え方を以下に記載致します

Visual Studio Codeでバンドルされたソースコードを開く

バンドルされたファイルを開いて下さい。設定によりこの時点の見え方は様々だと思いますが、取り急ぎ開いて下さい。

Ctrl + Fで置換を実行する

置換で以下のようにして下さい
1. 検索は「;」置換は「;\n」と設定する
2. 一括置換を行う
image.png
3. Claspでエディタに送信する

上記手順で送信すれば、問題なく開く事が出来ると思います。
※ なお、こんな事をしなくてもWebpackの設定変えればいいじゃん、というご指摘があれば是非頂きたいです。（探したのですが見つからず）

注意点

ただし、GASのエディタはそもそも重いソースファイルには不向きにつき勿論沢山バンドルして重たくなったソースに幾ら改行を追加しても重いです。

以上です

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-11T14:33:40+09:00

icu4c がバージョンアップしたせいでphpが動作しなくなったときの解決策

背景

php artisan list など php のコマンドが実行できなくなった。
php -v すら動作しない。

$ php -v
dyld: Library not loaded: /usr/local/opt/icu4c/lib/libicui18n.66.dylib
  Reason: image not found

調査

かるく調べてみたところ、 brew yarn install (あまり自信がないがたぶんこれが原因)により、 icu4c がバージョンアップされてしまい、依存関係が崩れてしまったためのようだ。

$ brew info icu4c
icu4c: stable 67.1 (bottled) [keg-only]

どうやら、エラーから察するにこれをv66系にダウングレードする必要がありそう。

ちなみに、phpは phpenv でコントロールしていて、 php7.2.24 で稼働しているのだが、 新しめのバージョン(php7.3.11) の場合は依存関係がクリアであるため問題なく動作する。

$ php -v
PHP 7.3.11 (cli) (built: Feb 29 2020 02:50:36) ( NTS )

解決策

で、過去のバージョンに切り替えるのだが、過去のバージョンがCellerに残っているとき以下に各バージョンが出てくる。

$ brew info icu4c
icu4c: stable 67.1 (bottled) [keg-only]
C/C++ and Java libraries for Unicode and globalization
http://site.icu-project.org/home
/usr/local/Cellar/icu4c/67.1 (258 files, 71.2MB)
  Poured from bottle on 2020-07-08 at 12:10:46
（ここにずらっとバージョンがならぶ）
From: https://github.com/Homebrew/homebrew-core/blob/HEAD/Formula/icu4c.rb

その場合、 brew switch icu4c 66.1 みたいな感じで切り替えが可能だが今回はないので、過去コミットから取得してくる必要がある

// Formula へ移動
cd /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core/Formula

// コミットを確認ん
$ git log --oneline icu4c.rb
88b9cc7898 icu4c: update 67.1 bottle.
e7d9d76421 icu4c 67.1
22fb699a41 icu4c: update 66.1 bottle.  <-ここに戻したい
c78114de12 icu4c 66.1
a806a621ed icu4c: update homepage and url (#44812)
896d1018c7 icu4c: update 64.2 bottle.

// 戻したいバージョンにアップデート
// これで古いバージョンをインストールする状態になった
$ git checkout 22fb699a41 icu4c.rb
Updated 1 path from f3a60216be

// reinstall
$ brew reinstall icu4c

// バージョンの再確認
$ brew info icu4c
icu4c: stable 66.1 (bottled) [keg-only]

ダウングレードができたので、もう一度 php -v を試してみます。

$ php -v                                                                                                                                                                      (git)-[feature/add_official_account_report]
PHP 7.2.24 (cli) (built: May  3 2020 10:40:39) ( NTS )

無事動きましたとさ

参考文献

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-11T14:33:40+09:00

icu4c がバージョンアップされたせいでphpが動作しなくなったときの解決策

背景

php artisan list など php のコマンドが実行できなくなった。
php -v すら動作しない。

$ php -v
dyld: Library not loaded: /usr/local/opt/icu4c/lib/libicui18n.66.dylib
  Reason: image not found

調査

かるく調べてみたところ、 brew yarn install (あまり自信がないがたぶんこれが原因)により、 icu4c がバージョンアップされてしまい、依存関係が崩れてしまったためのようだ。

$ brew info icu4c
icu4c: stable 67.1 (bottled) [keg-only]

どうやら、エラーから察するにこれをv66系にダウングレードする必要がありそう。

ちなみに、phpは phpenv でコントロールしていて、 php7.2.24 で稼働しているのだが、 新しめのバージョン(php7.3.11) の場合は依存関係がクリアであるため問題なく動作する。

$ php -v
PHP 7.3.11 (cli) (built: Feb 29 2020 02:50:36) ( NTS )

（今回はphpとの依存関係で発生しているが、他のものとの依存関係は発生すると思うので、どちらかをアップグレード、またはダウングレードして合わせる必要がある。今回はダウングレードを選択した。）

解決策

で、過去のバージョンに切り替えるのだが、過去のバージョンがCellerに残っているとき以下に各バージョンが出てくる。

$ brew info icu4c
icu4c: stable 67.1 (bottled) [keg-only]
C/C++ and Java libraries for Unicode and globalization
http://site.icu-project.org/home
/usr/local/Cellar/icu4c/67.1 (258 files, 71.2MB)
  Poured from bottle on 2020-07-08 at 12:10:46
（ここにずらっとバージョンがならぶ）
From: https://github.com/Homebrew/homebrew-core/blob/HEAD/Formula/icu4c.rb

その場合、 brew switch icu4c 66.1 みたいな感じで切り替えが可能だが今回はないので、過去コミットから取得してくる必要がある

// Formula へ移動
cd /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core/Formula

// コミットを確認ん
$ git log --oneline icu4c.rb
88b9cc7898 icu4c: update 67.1 bottle.
e7d9d76421 icu4c 67.1
22fb699a41 icu4c: update 66.1 bottle.  <-ここに戻したい
c78114de12 icu4c 66.1
a806a621ed icu4c: update homepage and url (#44812)
896d1018c7 icu4c: update 64.2 bottle.

// 戻したいバージョンにアップデート
// これで古いバージョンをインストールする状態になった
$ git checkout 22fb699a41 icu4c.rb
Updated 1 path from f3a60216be

// reinstall
$ brew reinstall icu4c

// バージョンの再確認
$ brew info icu4c
icu4c: stable 66.1 (bottled) [keg-only]

ダウングレードができたので、もう一度 php -v を試してみます。

$ php -v                                                                                                                                                                      (git)-[feature/add_official_account_report]
PHP 7.2.24 (cli) (built: May  3 2020 10:40:39) ( NTS )

無事動きましたとさ

参考文献

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-11T13:18:51+09:00

【AWS】EC2インスタンスにnode.jsをインストールしてサンプルプログラムを実行

環境

Windows 10 Home
Tera Term 4.105（Macの人はTerminal）

前提

・Amazon Linux EC2
　－SSH接続可能
　－アウトバウンドのHTTP接続が可能

node.jsをインストール

ec2-linux
$ cd ~
$ wget https://nodejs.org/dist/v12.18.2/node-v12.18.2-linux-x64.tar.xz

公式サイトから最新バージョンのリンクを取得
image.png

node-v12.18.2-linux-x64.tar.xz

ec2-linux
$ cd ~
$ wget https://nodejs.org/dist/v12.18.2/node-v12.18.2-linux-x64.tar.xz

tarファイルがあることを確認

ec2-linux
$ ls
$ node-v12.18.2-linux-x64.tar

拡張子がxzになっているのでtarに変換

ec2-linux
$ mv node-v12.18.2-linux-x64.tar.xz node-v12.18.2-linux-x64.tar

解凍

ec2-linux
$ tar xvf node-v12.18.2-linux-x64.tar

色々出力されて止まったら解凍完了
image.png

実行コマンドがインストールされるnode-v12.18.2-linux-x64/binにパスを設定して移動

ec2-linux
$ export PATH=$PATH:~/node-v12.18.2-linux-x64/bin
$ cd node-v12.18.2-linux-x64/bin

app.jsというサンプルプログラムを用意

app.js
const http = require('http');

const hostname = 'localhost';
const port = 8080;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello World');
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

実行

ec2-linux
$ touch app.js
$ vim app.js

~~~~~~サンプルプログラムを貼付け(vimコマンドは各自お調べください)~~~~~~

$ node app.js
Server running at http://localhost:8080/
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧