- 1. Puppeteerを2系から3系にアップデートしたらError: Failed to launch the browser process!
- 2. Vue.jsでAPIのBasic認証をした
- 3. 新人に負けない本棚管理サイト その４（データベース検索編①）
- 4. Vue.jsでつくったサイトにfirebaseでユーザ認証してこっそり人の顔年齢を試して遊ぶ
- 5. プログラミング素人のIoTサービス開発 -ログイン認証-
- 6. JavaScript thisの挙動の不思議
- 7. Javascriptで電話番号のバリデーションと変換（E.164）に便利なライブラリの紹介
- 8. PuppeteerのBrowserFetcherクラス
- 9. [保存版]最新Node.js for Raspberry Pi Zero / 1 (ARMv6向け)
- 10. NestJSとGraphQLで開発用の環境を作成する
- 11. WSL 2 デビューするときの初期設定
- 12. Puppeteerのpuppeteerクラス
- 13. 【解説しながら】ターミナル上で動作するメモアプリをnodeで作ってみる。Part1
- 14. Node.jsで簡易サーバをつくる
- 15. たぶん10分で試せる。Azure Static Web AppにWebサイトをデプロイして独自ドメイン設定とFunctionsでAPI公開まで
- 16. Node.js 12+なら標準入力が超簡単に読める
- 17. Node.jsの非同期処理でつまづいたところ
- 18. Node.js, npm, yarn, gitの環境構築+コマンド解説
- 19. ESLint v7.1.0
- 20. console.logからの脱却 – node.jsでデバッグするには(Visual Studio Code編)
Puppeteerを2系から3系にアップデートしたらError: Failed to launch the browser process!
Puppeteerメモです。
Heroku上で利用していたPuppetterのバージョンを2系->3系にアップデートしたらエラー発生。
## Puppetterのバージョンを2系->3系にするとChromiumのバージョン違いで動かないっぽい
### Heroku上のログ
“`
Error: Failed to launch the browser process!
2020-05-27T21:22:10.217234+00:00 app[web.1]: /app/node_modules/puppeteer/.local-chromium/linux-756035/chrome-linux/chrome: error while loading shared libraries: libgbm.so.1: cannot open shared object file: No such file or directory
“`### Heroku上でインストールされているChromiumを更新する
> https://github.com/puppeteer/pup
Vue.jsでAPIのBasic認証をした
#はじめに
Vue.jsによる開発においてAPIのBasic認証の実装をしました。
エラーについての検索をした際に類似のケースで苦しんでいる方が国内外問わず多くいらっしゃったので、本記事では私が嵌ったエラーと解決策の一例について書いていきます。
当記事の使用言語はVue.jsとNode.jsです。###課題の切り分け
実装に当たって私が悩んだ点は大きく分けて下記二つとなります。
・CORSの不一致
・非同期処理の中でBasic認証が出来ない（404エラーが返ってくる）#####◎CORSの不一致
APIのBase URLに対してGETでデータの取得を初めて求めた際に、“`
Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
Origin ‘http://localhost:8080’ is therefore not allowed
新人に負けない本棚管理サイト その４（データベース検索編①）
# 目次
[新人に負けない本棚管理サイト その１（プロローグ）](https://qiita.com/moootoko/items/9a2282b018c1e78da04b)
[新人に負けない本棚管理サイト その２（環境構築編）](https://qiita.com/moootoko/items/615b0d135b6914d2c83c)
[新人に負けない本棚管理サイト その３（トップページ作成編）](https://qiita.com/moootoko/items/1aff180e4dd8d3b153d2)
新人に負けない本棚管理サイト その４（データベース検索編①）# 目標
– データベースに問い合わせしてデータを取得する
– 取得したデータを画面に表示する ←今回はここまで
– 検索できるようにする# データの準備
使用するデータベースは**MariaDB**です。
セットアップ方法はその２を参照してください。## テーブル作成
“`sql:CREATE_TABLE_Books.sql
CREATE TABLE Books(
title
Vue.jsでつくったサイトにfirebaseでユーザ認証してこっそり人の顔年齢を試して遊ぶ
### 概要
Vue.jsで作ったサイトをFirebaseにユーザー認証をお願いして、ログインしないと入れないページにして、人の顔年齢（Computer Vision API）で遊んで、freenomとNetlifyで独自ドメインで公開する
### できたもの
写真を入れると年齢をかえしてくれます。
### 環境
“`
macOS Catalina
Visual Studio Code 1.45.1
Node.js: v13.11.0
npm:6.14.5
Vue:@vue/cli 4.3.1“`
### 大まかな流れ
Vue.jsとFirebaseでユーザー認証ありのプロジェクトをつくる
↓
Computer Vision APIをつかって顔認識のぺーじをつくる
↓
freen
プログラミング素人のIoTサービス開発 -ログイン認証-
#はじめに
2020年3月からプログラミングの勉強を始めて、7月までにWebサービス制作に挑戦しているプログラミング素人の制作記録です。#自分の技術レベル
・ProgateでHTML/CSS、JavaScript、Node.JSを受けた
・Expressフレームワークでget通信とpost通信を扱えるようになってきた
・JSのPromeseの概念が少しだけ理解できてきた
・obnizを触ったことがある
https://note.com/hiromae/n/n4850983a3f92#目標制作物＆必要な技術ロードマップ
熱くなる季節に向けて、熱中症予防のための温度検知サービスの制作に取り組んでいます。身近な問題をIoTで解決できないか考えてみた
https://note.com/hiromae/n/n0e4a88bb501c■現在構想しているサービス像
制作のために今後身につける必要がある技術が山ほどあります。
“`js
function hoge() {
console.log(this);
}function foo() {
“use strict”;
console.log(this);
}hoge(); //globalオブジェクトが出力
foo(); //undefinedが出力
“`ほぼほぼ同じ関数ですが結果が変わってきます。
hoge関数は、globalに紐付けせずに実行してもglobalオブジェクトを参照し出力します。デフォルトでglobalオブジェクトが紐付けされているということです。しかし、strictモードでは関数がどのオブジェクトにも紐付けされていなければ、この値は未定義になります。したがって、strictモードだとデフォルトでオブジェクトの紐付けは行われないということです。
# thisの挙動(アロー関数)
“`js
console.log(this); //{} が出力
var hoge = () =>
Javascriptで電話番号のバリデーションと変換（E.164）に便利なライブラリの紹介
# 今回したいこと
– 日本の電話番号(03-1234-5678)などを、E.164表記(+81312345678)に変換したい
– ついでにバリデーションも出来るといいかも# 環境
– Node.js# ライブラリ
– [google-libphonenumber](https://github.com/ruimarinho/google-libphonenumber)Googleが提供している電話番号をバリデーションと自動フォーマット可能な[libphonenumber](https://github.com/google/libphonenumber)のnpm版である[google-libphonenumber](https://github.com/ruimarinho/google-libphonenumber)を使用します。
# google-libphonenumberの使用方法
## インストール“`
npm install google-libphonenumber
“`## 例１）’202-456-1414’を’US’のE164表記に変換
PuppeteerのBrowserFetcherクラス
今回はPuppeteerのBrowserFetcherクラスについて書いていきたいと思います。
## BrowserFetcherクラス
BrowserFetcherはChromiumとFirefoxの異なるバージョンをダウンロードして、管理することができます。BrowserFetcherはChromiumのバージョンを（”533271″にたいな）指定するrevision string上で操作します。revision stringは[omahaproxy.appspot.com](https://omahaproxy.appspot.com/)から得ることができます。と、言いたいところなのですが、確認したところ、存在しないものが多いので、[こちら](https://commondatastorage.googleapis.com/chromium-browser-snapshots/index.html)の方を見てください。
Firefoxの場合、BrowserFetcherはFirefox Nightlyをダウンロードして、（”75″にたいな）バージョン番号を操作します。Fi
[保存版]最新Node.js for Raspberry Pi Zero / 1 (ARMv6向け)
# ARMv6のサポート終了
2019年4月頃、Node.jsのVer.12のリリースとともにARMv6のビルドが提供されなくなりました。ARMv6を使うデバイスはだいぶ少なくなりましたが、ここにありますよ！Zero WHが！！
[RFC: Consider retiring the PI1s ARMv6 (downgrading support to “experimental”) · Issue #1677 · nodejs/build · GitHub](https://github.com/nodejs/build/issues/1677#issuecomment-486204349)
どうやら非公式ビルドというものを用意してくれているようです。ありがたや。
# Node.js unofficial-builds project
[Node.js Unofficial Builds Project](https://unofficial-builds.nodejs.org/)
[GitHub – nodejs/unofficial-builds: Unofficial bina
NestJSとGraphQLで開発用の環境を作成する
# NestJS と GraphQL で開発用の環境を作成する
#### 目次
1. NestJS のアプリケーションを作成
2. GraphQL の依存関係を構築する
3. mysql（docker）を用意する
4. mysql の依存関係を構築する## 1. NestJS のアプリケーションを作成
[NestCli](https://docs.nestjs.com/cli/usages)を用いて NestJS のアプリケーションを構築する。
cli を install していない時は、上の URL から cli を install してアプリケーションを作成します。
“`termianl
$ nest new nestjs-graphql
$ npm run start:dev
“`[localhost:3000](http://localhost:3000)で下記画面が表示されることを確認します。
 をセットアップすることにしました。その際、とても詳しくて役に立ったのはこの記事です :heart_eyes:
> https://ascii.jp/elem/000/004/011/4011143/
Mac で Windowsが使えるようになったその勢いで、[Windows Insider Program](https://insider.windows.com/ja-jp/getting-started/) にも登録し、話題の WSL 2 をいち早く試すことにしました :v:
> 今回は MacBook Pro 13 (macOS 10.15.4) + Bootcamp + Windows 10 Home の組み合わせですが、純正の Windows 端末でもやることは同じだと思いますのでご参考になさってく
Puppeteerのpuppeteerクラス
# puppeteerとは
他の記事とかでも書いてあると思いますが、一応説明をしておくと、puppeteerはDevToolsプロトコルを使ってChromiumもしくはChromeを管理する高レベルAPIを提供するNodeライブラリです。今回はこのpuppeteerが面白そうだったので、このライブラリを調べたり使ったりしたことを残していきたいと思います。今回はpuppeteerクラスをやっていきたいと思います。
## puppeteerクラス
このクラスはChromiumインスタンスを立ち上げるためのメソッドを提供してくれます。この辺りは設定云々のところなので実証していくところはないです。メソッドは`connect`、`createBrowserFetcher`、`defaultArgs`、`executablePath`、`launch`の5つ。それぞれ説明していきます。
### connectメソッド
実際のURLを指定するかWebsocketのURLを指定してブラウザインスタンスにつなげるメソッド。
このメソッドは存在しているChromiumインスタンスに**のみ**
【解説しながら】ターミナル上で動作するメモアプリをnodeで作ってみる。Part1
今回の記事は【作成】・【解説】の二部構成になっています。
初学者が理解るように丁寧に解説して行きつつ、完成を目指していきます。
解説は良いから作り方だけ見せてくれやって言う方は、【作成】だけを見ていくことをおすすめします。
細かい説明を知りたい方は【解説】を読んで頂くと良いかと思います。
序盤は解説が多くなりますがご了承ください。
今回は、expressを使わずに実装していきます。
## ? 対象
– nodeを始めたばかりの人・なんとなく触ってみたい人
– ES6.ECMAScriptを基礎的なところまで理解している人## ? まずはディレクトリを作成しましょう♪ 【作成】
任意のフォルダに今回はmemoというディレクトリを作ります。“`:ターミナル
% mkdir memo
% cd memo
% touch app.js
“`
上記のコマンドは、メモディレクトリを作成→メモディレクトリを指定→app.jsを作成という流れになってます。app.jsが動作するか、適当にコードを書いてみたいと思います。
“`javascript:app.js
console.
Node.jsで簡易サーバをつくる
# install
“`bash
$ sudo apt install nodejs npm
“`“`bash
# 実行
$ node demo.js
“`# webserver using http module
– Node.jsはモジュールをrequire()で呼び出す
– createServer() メソッドを使ってWebサーバーを構築する
– 最後にlisten()でポート番号を指定すれば「localhost:8080」にブラウザからアクセスする
– createServer()の中身は、最低限の記述としてヘッダー情報とコンテンツを次のように記述する
– writeHead()は、responseオブジェクトのメソッドで、ヘッダー情報をレスポンスに書き出す。第１引数には**ステータスコード**を指定し、第２引数に**ヘッダー情報**を連想配列でまとめたものを指定する。“`javascript
var http = require(‘http’);
var server = http.createServer(function(request
たぶん10分で試せる。Azure Static Web AppにWebサイトをデプロイして独自ドメイン設定とFunctionsでAPI公開まで
AzureにStatic Web AppsというJAMstack向けなサービスが登場した模様で、プレビュー段階だけど試せたのでメモ残しておきます。
**無料らしい**（大事）
> 参考: [Azure App Service に Static Web Apps が登場！](https://k-miyake.github.io/blog/appservice-static-webapps/)
NetlifyやVercel同様に静的ホスティングだけじゃなく、Functionsも利用できるのが良いですね。
ドキュメントに[GitHub Actionsと連携して〜](https://docs.microsoft.com/ja-jp/azure/static-web-apps/github-actions-workflow)みたいなことが書いててなんでだろう的なこと思ったけどそういえば買収されてましたね（忘れがち）
## 作るもの: 静的サイト & API
AzureのStatic Web ApssにVue.jsで作った簡単なアプリをデプロイします。(いつまで置いてるか分からないの
Node.js 12+なら標準入力が超簡単に読める
# `process.stdin`は`for await…of`でループできる
Node.js 12から`stream.Readable`が非同期反復オブジェクト(Async Iterable)になりました。
当然`process.stdin`もAsync Iterableなので、`for await…of`文でループできます。
“`js:nl.js
(async () => {
const buffers = [];
for await (const chunk of process.stdin) buffers.push(chunk);
const buffer = Buffer.concat(buffers);
const text = buffer.toString();
const lines = text.split(/\r?\n/);
lines.forEach((line, index) => console.log(‘%d: %s’, index + 1, line));
})();
“`補足ですが、文字エンコーディングを
Node.jsの非同期処理でつまづいたところ
# 概要
以前の記事で、イベントループ方式の理解に苦しんだことについて記事にあげましたが、今回は、非同期処理についてつまづいたところを忘れないように記事にしてみようと思います。つまづいた経緯としては、Node.jsでローカルサーバーを構築し、リクエストを受け付けられるようになったところで、「リクエストごとに処理を変えたいなぁ」、と思ったことが全ての始まりでした。
# 環境
自分が実際につまづいた時の環境は、以下となります。– OS：Windows10
– ブラウザ：Chrome# やりたかったこと
– データを取得して、それをページに表示する。
最初はMVCモデルに基づいてプログラムを組もうと考えていましたが、少しめんどくさくなりそうだったので、簡単にデータを取得・反映させるページを作ろうと思いました。
# つまづいたところ
最初に記述したコードになります。
“`sample_node.js
// モジュールの取り込み
const http = require(‘http’);
const fs = require(‘fs’);
const path = re
Node.js, npm, yarn, gitの環境構築+コマンド解説
EC2にフロントエンド開発ができる環境構築をしていくぞ〜〜
あわせてコマンドが色々わからなかったので解説もしてみる
ところどころ間違えてそうなので直してほしい別にAWSじゃなくても、ローカルPCに環境構築するのでも同じだと後から気が付きました
なので、ローカルに環境構築したい人の参考にもなるはず環境: AWS Linux
（WindowsとかMacOSの人はこの記事は参考にならないよ）:zap:コメント大歓迎:zap:
## EC2インスタンスの立ち上げ & 接続
インスタンスを作ってなかったら[こっちの記事の1-4](https://qiita.com/jesuissuyaa/items/b0932540cc16edec6f03)を見てね
ここから先は、ターミナルからインスタンスにSSHで接続してる前提でいきます## gitのインストール
“`
sudo yum install git
“``yum`はAWS Linuxのパッケージマネージャーで、macOSの`brew`みたいなやつ
Linux系だと`apt-get`とかもあるけど、このインスタンスで
ESLint v7.1.0
前 [v7.0.0](https://qiita.com/mysticatea/items/0931a7d910fcb91733ee) | 次 (2020-06-05 JST)
ESLint v7.1.0 has been released! ?https://t.co/r2Dk1UBQoy
— ESLint (@geteslint) May 23, 2020
ESLint `7.1.0` がリリースされ
console.logからの脱却 – node.jsでデバッグするには(Visual Studio Code編)
## 前回のおはなし
若き開発者ヒロロはNode.jsでバックエンド開発を任されたがデバッグ方法がわからず、苦戦。
自力で調査しChrome DevToolでデバッグする方法を見つけ出し、なんとか`console.log`地獄は免れた。
しかし、普段利用しているVSCodeのデバッグツールを活用してより快適なデバッグ環境を作ろうと決意する。前回の詳細**「console.logからの脱却 – node.jsでデバッグするには(Chrome DevTool編)」**は[こちら](https://qiita.com/Hiroro0970/items/d48a865e8ba949bb666f)
## VSCodeでのデバッグ環境構築
公式ドキュメント(https://code.visualstudio.com/docs/editor/debugging) によればVSCodeでデバッグを有効にするにはあらかじめ設定ファイルに情報を記載する必要があるそうです。VSCodeを起動してデバッグメニューを開き、「create a launch.json file.」をクリックします。
その
