- 1. HTML5/CSS3のみのコーダーがMEAN環境でゲームを作るまでの話（序）
- 2. 本当の初心者のためのNode.js超入門 ~環境構築編~
- 3. Raspberrypiで動体検知カメラを自作
- 4. Node.jsでperformance.now()を使用した際に”ReferenceError: performance is not defined”というエラーが出る
- 5. 音オペレーションで革命的なUXを！
- 6. Node.js の C++ によるアドオンで、AsyncWorker からイベントを受け取る
- 7. 第1回 – Web API と Web UI でファイルダウンロード(Web API 編)
- 8. Node+TypeScript+ExpressでAPIサーバ構築
- 9. node.jsからBigQueryを使う
- 10. 新しい Mac に Git と Node.js の環境を作る
- 11. 初学者が、LINE Botを作るまで
- 12. Cloud Functions for FirebaseとFirebase Hostingを試してみる
- 13. Node.jsでつくるNode.js-WASMコンパイラ – もくじ
- 14. WSL2でElectronを動かすの巻
- 15. Vue Web App Tutorial
- 16. Node.js でつくる WASMコンパイラー – 07：ユーザ定義関数を実装する
- 17. これからチーム開発に参加するUIデザイナーがGitHubでの開発フローをまとめた
- 18. node.jsでHTTPリクエストを受け取るAPIを作る
- 19. npm pack でnpmパッケージを圧縮する
- 20. AWS DynamoDBをjsでいじるときに非同期処理で詰まった話
HTML5/CSS3のみのコーダーがMEAN環境でゲームを作るまでの話（序）
#自己紹介
こんにちは！ちゃばこと、くぅじやすまさです。
このエントリは技術エントリではないのでタグはつけてないんですけどQittaって開発日記みたいなのも投稿していいんですか。プログラミングはクソ稚魚なんですけど…Qittaに登録した理由はエントリタイトルの通りです。
自分は2006年ごろからHTMLとCSSに触れて、それからメモ帳でコードをベタ書きしながらサイトを作ってきた化石です（WordPressに触れてPHPをかじったときでさえベタ書きでした）。恩師に化石って言われたので化石です。数年前からbracketやCodaを使いはじめて、今は身なりだけは文明人です。でもgitを使いこなせていないのでやっぱり化石かもしれません…『稚魚の化石』に改名しろ。
ともあれ。そんな化石さんには目標があります。
それは…**MEAN環境でゲームを作ること！**
…
……
おいおいHTMLとCSSと本当にちょっとのPHPしかできないクソ稚魚コーダーがプログラマーになろうだなんて無謀すぎないか？**無謀すぎるだろ。無謀だと思います。あなたは正しい。**
でもものづくりがしたい！（
本当の初心者のためのNode.js超入門 ~環境構築編~
# はじめに
今回このシリーズを書くに至った経緯として、この頃未経験から転職してプログラマーになる方とか増えている印象が強いのですが、プログラミングを教える際に色々と余計なことを教えてしまったり、逆に併せて教えるべきことが抜けていたりといったことが多いなと感じる部分があったので、「完全素人向けに教えるにはどこを教えたらいいだろう？」という自身の疑問を解決するためのまとめとして書くことにしました。
私自身も分かっていない部分多くあるので、一つ一つ再度勉強しながら書いていこうと思います。また、私同様に独学でプログラミングを始めた方の手助けになれればという気持ちですので、この気持ちに賛同していただける方はご指摘等頂けると幸いです。（もちろん初学者の方はご質問いただいても構いませんのでお気兼ねなく!）少々前置きが長くなってしまいましたが、今回はNode.jsについて基礎的な内容と環境構築方法について見ていこうと思います。
今後Pythonなども同様の内容を書いていこうと思いますので、ご興味ある方はそちらもご覧頂ければと思います。# Webアプリケーションについて
Node.j
Raspberrypiで動体検知カメラを自作
#はじめに
自宅のセキュリティを強化したいと思ってRaspberryPiで監視カメラを自作。セキュリティサービスや高価な監視カメラを買う前にちょっと試してみたいという方向け。
具体的には、玄関前やリビング窓の不審者を検知しLINE通知させる仕組みとしている。将来的にはLINEBotにメッセージを送ると撮影させる事も考えたい。#準備するもの
・RaspberryPi Zero WH
・カメラモジュール
を使用した際に”ReferenceError: performance is not defined”というエラーが出る
## TL; DR
以下のいずれかの方法でperformanceオブジェクトを宣言する。“`javascript
const performance = require(‘perf_hooks’).performance;
“`
もしくは“`javascript
const { performance } = require(‘perf_hooks’);
“`## 詳細
“`javascript
var t0 = performance.now();
console.log( ‘Do something’ );
var t1 = performance.now();
console.log(“Call to doSomething took ” + (t1 – t0) + ” milliseconds.”);
“`上記のようなコードをNode.jsで実行すると`ReferenceError: performance is not defined`というエラーが出た。
Node.jsで[Performance API](https://developer.
音オペレーションで革命的なUXを！
### まえふり
もう年末が近いですね。
1999年の大みそかから2000年になった時に将来の不安よりドキドキ感が強かったもんですがもうあれから20年近く時間が過ぎてしまったんですねー。
AIやらマネージドサービスやらで、がしがしプラットフォーマーが世の中をひっぱってってくれているんですが、– 「[XXX ] [検索] (カチッ)」とかいうCMに出てくるやつ
– （ラジオで）「番組へのお便りはなんちゃらアットマークにメールください」こういうのいい加減めんどくさいUXなんでやめたら良いと思うんです。20年前のURL一字一句手打ちとどう違うのかと。
どんなに短くなっても復活の呪文を打つのが変わらないならおんなじかと。ITリテラシー問題とするのであれば音声認識、言語処理がリテラシーが低い人にも使い易く人気ですが
スマートスピーカーのウェイクワードって恥ずかしい。日本人が消極的なんじゃなくて普通にヘンに見える。
言霊とか人形供養とかセンシティブに魂を扱って来た遺伝子がそう思わせてるんじゃないか。（因果推論）QRもスマホだしてアプリさがしてうごかしてQRコードにか
Node.js の C++ によるアドオンで、AsyncWorker からイベントを受け取る
# はじめに
最近、必要があって Node.js の Native アドオンを作りました。
その中で、外部とのデータやり取りで AsyncWorker を使っていたのですが、
値を受け取るときに Callback を使うサンプルはたくさんあるのですが、
イベントで返すサンプルが見つからなくてハマったので、ここに作り方をメモしておきます。# 準備
現在、Node.js の Native アドオンの作成には色々方法がありますが、
今回のサンプルプログラムは、node-addon-api (N-API の C++ラッパー) を使っています。
（というか、他のやり方は「おまじない」だらけで、何が必要なのかがよくわからなかった・・・）アドオンは、node-gyp を使ってビルドするのですが、環境作成方法などについては、先人の方々の優良記事がたくさんありますので割愛します。
（node-gyp タグで検索すると、たくさん見つかります。）今回のサンプルプログラム作成に当たり、
https://qiita.com/Satachito/items/fa681ba96dc8e52ca7c1
第1回 – Web API と Web UI でファイルダウンロード(Web API 編)
## はじめに
今回から２回に分けてファイルをダウンロードする簡単な Web API と Web UI のサンプルを紹介します。
第1回目の今回は [Node.js](https://nodejs.org/en/) + [Express.js](http://expressjs.com/) での Web API です。
第2回目は [Vue.js](https://jp.vuejs.org/index.html) + [Vuetify](https://vuetifyjs.com/ja/) で簡単な Web UI を作り、今回の Web API を叩いて実際にファイルをダウンロードします。1. Web API 編(←イマココ)
1. Web UI 編## 環境
OS: macOS Mojave 10.14.6
Node.js: 10.16.3
Express.js: 4.17.1## API 仕様(概略)
* GET
* URI
`/api/download`
* クエリパラメータ
`file=ファイル名`
ファイル名は `sample.png` or `sam
Node+TypeScript+ExpressでAPIサーバ構築
# はじめに
Node+TypeScript+ExpressでAPIサーバを作っていきます。
本記事はTypeScript環境の構築からAPIサーバの作成までの流れを記した初心者向けな記事になります。本記事で紹介する技術は以下になります。
– Node.js
– TypeScript
– ts-node
– express
– swagger**作業環境**
“`
OS: Windows 10 Pro
Node: 12.1.0
npm: 6.9.0
“`# TypeScript+Node環境の構築
## Node環境でTypeScriptを始めるには
※手元のOSにNode.jsがインストールされていることを前提に始めます。
まずは適当に作業ディレクトリを作成して、その中に**typescriptパッケージ**をインストールしましょう。
“`
PS C:\Users\user\Desktop> mkdir project; cd project;
PS C:\Users\user\Desktop\project> npm init -y
PS C:\U
node.jsからBigQueryを使う
久しぶりに触ったらハマった（ハマる要素はありませんが）のでメモ。
## 前提
* BigQuery側でデータセットおよびテーブルが作成されている。
* 適切なサービスアカウントが作成され、認証用のjsonが（カレントに）ダウンロードされている。## 準備
“`bash
mkdir bq-test
cd bq-test
npm init -f
npm install –save @google-cloud/bigquery
touch index.js
“`## 実装
index.jsを実装します。下記のような感じ。
“`js:index.js
const { BigQuery } = require(‘@google-cloud/bigquery’);const bigquery = new BigQuery({
projectId: ‘your-project-id’,
keyFilename: ‘path/to/key.json’
});const query = “select * from test.members”;
//
新しい Mac に Git と Node.js の環境を作る
# どうでも良い前置き
5 年ぶりぐらいに Mac を買い替えました。
今までの買い替えの際には移行アシスタントを使って環境をそのまんま移行していましたけれども、これまでも Mac 買い替えのたびに前の端末から移行を繰り返して来ており、もはや不要な設定やソフトも沢山ある状態でした。
と言うわけで今回は、昨日までの弱虫だった自分を脱ぎ捨てて新しいワタシに生まれ変わろうと言う趣旨で、移行アシスタントに頼らずゼロから環境を作ることにしました。
データの大部分を iCloud に置く運用にしていたので端末固有の情報に対する依存性が下がって来ているのもその決断を後押ししています。とは言え、ローカルの開発環境はローカルに作らなければなりません。
と言うわけで、新しい Mac に開発環境を作る流れの記録です。# この記事でやること
– `Xcoce コマンドラインツール`のインストール
– `Homebrew` のインストール
– `Git` のインストール
– `Node.js` のインストール
– `Visual Studio Code` のインストール
– その他、細々したもの
初学者が、LINE Botを作るまで
###はじめに
製作者がLNE Botを作るまでの道のりを、日記代わりに付けているものです。
初学者の参考になれば、幸いです。
Qiita初投稿のため、見辛い部分はあると思われます。
下記のページを参照しながらの制作を行なっております。
[LINEのBot開発 超入門（前編） ゼロから応答ができるまで](https://qiita.com/nkjm/items/38808bbc97d6927837cd)<開発環境>
MacBook Air (13-inch, 2017)
OS:Mojave
バージョン：10.4.6##Node.jsをインストール
Node.jsを使用して、Bot本体を作成します。フォルダーの作成&移動
“`
$ cd ~
$ mkdir -p App/bot
$ cd App/bot
“`
npm initコマンドでpackage.jsonファイルを作成“`
$ npm init
“`
すると、下記の画面が発生。
npm initコマンド を実行する前段階が整っていないため、発生している。“`
-bash: npm: command
Cloud Functions for FirebaseとFirebase Hostingを試してみる
## やること
Cloud Functions for FirebaseとFirebase Hostingを試してみようと思います。
html/cssの静的ファイルのデプロイ、jsファイルの動的ファイルのデプロイ、html/css/jsの動的サイトのデプロイ、の3パターンを試してみようと思います。## Firebaseを使うための準備
Firebase CLIをインストールとログインをします。
“`bash
~$ npm i -g firebase-tools
“`インストールが完了したらプロジェクトディレクトリを作成＆移動してFirebaseにloginします。
“`bash
~$ mkdir firebase-sample
~$ cd firebase-sample
~$ firebase login
“`loginしたらFirebase ConsoleでFirebaseプロジェクトを作成しておきます。今回は「myproj」という名前で作っておきましょう。
Firebaseプロジェクトを作成したらinitしていきます。“`bash
~$ fireb
Node.jsでつくるNode.js-WASMコンパイラ – もくじ
# はじめに
「RubyでつくるRuby ゼロから学びなおすプログラミング言語入門」(ラムダノート, Amazon) という本に感銘を受けて、自分でもNode.jsで小さなプログラミング言語を作ってみるシリーズをやってみました。「[ミニインタープリター](https://qiita.com/massie_g/items/3ee11c105b4458686bc1)」「[ミニコンパイラー](https://qiita.com/massie_g/items/3ba1ba5d55499ee84b0b)」ときて、三部作(?)の最後はミニNode.jsからWASMを生成する小さなコンパイラーに取り組んでいます。
# 前提環境
今回は私の環境である macOS 10.14 Mojave を前提にしています。また Node.js v10.13 で動作を確認しています。
# Node.js-WASM コンパイラー目次
– [WASM コンパイラー – 01：WASMで定数戻り値を返す](https://qiita.com/massie_g/private/3c627db366ed20b8b7
WSL2でElectronを動かすの巻
こんにちは！
お鍋が美味しい季節になってまいりました。おさむです。
WSL2＋Electronな環境を構築する機会がありましたので、やり方をシェアしたいと思います。# この記事のゴール
WSL2環境下にて、Electronで作成した画面が表示出来るところまで# 前提
1. WSL2のセットアップが完了している
2. Ubuntu 18.04 LTSのOSイメージを使用している（たぶん他のディストリでもいける）# やりかた
## ①Node.jsとnpmのインストール
apt-getで入れてしまいましょう。“`bash
# Node.js
$ sudo apt-get install -y nodejs# npm
$ sudo apt-get install -y npm
“`## ②プロジェクトの作成
[Electron Documentation](https://electronjs.org/docs/tutorial/first-app) に従い、npmのプロジェクトを作成します。“`bash
# ディレクトリを作成し、その中に移動
$ mkd
Vue Web App Tutorial
# 11月16日 Web Application 製作入門
[富山IT勉強会#4](https://toyama-it.connpass.com/event/151572/) のハンズオン資料をまとめたものです。
非エンジニア、およびWebアプリ未経験者を対象に簡単なWebアプリ(SPA)を作成するハンズオンを行います。## このハンズオンのゴール(目的)
– **必要最低限の知識で** Webアプリを作れるようになる(概念、環境構築 ～ Local環境での動作確認)
– 今後、更にレベルアップしていく際の切り口を共有する## おことわり
一日(4h ほど)で行う予定であるため、最低限知っていれば取りあえずアプリが作れる程度に厳選しております。
そのため、かなり内容は端折っておりますのでご了承ください。
また、私自身プログラミング経験はWindowsアプリケーションがほとんどで、
Web関係は直近一年弱程度ですので情報にはかなり偏りがあります。
また、誤情報等、お気付きの場合にはご指摘頂けると幸いです。## やること
– JavaScript入門(環境構築〜変数、制御構文
Node.js でつくる WASMコンパイラー – 07：ユーザ定義関数を実装する
# はじめに
Node.jsで小さなプログラミング言語を作ってみるシリーズを、「ミニインタープリター」「ミニコンパイラー」とやってきました。そして三部作(?)の最後として、 ミニNode.jsからWASMを生成する小さなコンパイラーに取り組んでいます。
– [Node.jsでつくるNode.js-WASMコンパイラ – もくじ]( https://qiita.com/massie_g/items/c663095759a80c53c126)
– 前回の記事 … [06：文字列出力を実装しFizzBuzzを実現する](https://qiita.com/massie_g/private/2bbd6a914f1abdac195a)## これまでの取り組み
– [Node.jsでつくるNode.js（ミニインタープリター） – もくじ](https://qiita.com/massie_g/items/3ee11c105b4458686bc1)
– [Node.jsでつくるNode.jsミニコンパイラ – もくじ](https://qiita.com/massie_g/item
これからチーム開発に参加するUIデザイナーがGitHubでの開発フローをまとめた
##これからチーム開発に参加するUIデザイナーがGitHubでの開発フローをまとめた
##注意
– (自分用備忘録です)
– (開発初学者です)###前提
– 環境構築が終わっていてローカルホストが立ち上がっている状態
– リモートリポジトリのcloneがローカルに完了している###いつもはじめにやること
0-1.開発が決まったら、作業リボジトリにXDなどのデザインデータのリンクを貼った開発issue を立てる
– issue番号はメモっておき、あとでbranch名に使う0-2.githubに接続する
`$ ssh github`0-3.ターミナルでcloneした作業レポジトリ(ローカル)まで移動する
ターミナルでの操作
`$ cd git`
`$ cd 作業リポジトリ名`準備完了！
###フロー
1. レビュワーがGitHubのPull requestsにrelease noteを切ってるのを確認する
例) master from release/0.0.1
2. Pull requestsの項目の一番を見る 上のvが最新のrele
node.jsでHTTPリクエストを受け取るAPIを作る
#はじめに
今回はNode.jsのフレームワークであるExpressでHTTPリクエストを受け取るアプリケーション？を作りたいと思います。
利用用途としては* しっかりリクエスト送れてるの？
* Expressとかnode.jsでAPIを作ってみたいといったことが想定されます。私の場合は主に、というか9割前者ですね。JMETERでリクエストが正しく送れているか確認したかっただけです。
#実装
##下準備
まず以下のコマンドを実行します。この時、プロジェクトのディレクトリ内で行いましょう。“`
> npm init
“`
あとはダイアログに従い、入力するだけです。
すると`package.json`が作成されると思います。次にExpressをインストールします。
“`
> npm install express -save
“`
このコマンドをたたけばいろいろダウンロードされ、環境が整います。##実行するファイルを作る
“`index.js
const express = require(‘express’)
const app = expres
npm pack でnpmパッケージを圧縮する
node_module内のファイル(主にandroidのbuild.gradleなど)を編集した際に`npm pack`のコマンドを使用して変更を加えたパッケージを.tgzファイルにして、package.jsonの読み込み先を.tgzファイルに必要がある。
### 手順
例：`react-native-maps`の`build.gradle`を編集した時
– 編集したパッケージのフォルダに移動(`node_modules/react-native-maps/`)し、.tgzファイルを生成
“`
npm pack
“`
– custom_modulesフォルダを作っておき、生成された.tgzファイルをcustom_modulesフォルダに移動する
– 読込先を.tgzファイルに変更する“`
npm i react-native-maps-0.24.2.tgz
“`– package.jsonの読み込み先が変更されているか確認する
“`package.json
“react-native-maps”: “file:custom_modules/react-nat
AWS DynamoDBをjsでいじるときに非同期処理で詰まった話
# AWS DynamoDBをjsでいじるときに非同期処理で詰まった話
## 初めに
このお話は、単に私がJavaScriptの非同期処理を理解していなかっただけなので、プロの皆さんでしたら余裕で回避できる問題だと思います。
私みたいな初学者で、同じようなことに詰まっている方がこの記事を見て解決していただけたら幸いです。
## 私がやりたかったこと
DynamoDBのCRUD操作を関数内で行い、実行結果を戻り値として受け取る といったことをしたかったのですが、戻り値に値が入っていない状態で返されてしまいました。
“`javascript
// 問題のあるコード
function getHoge(){
let hoge;let params = {
TableName: ‘table’,
Key:{
“id”: “01”
}
};documentClient.put(params, function(err, data){
if(e
