- 1. TypeScript で実装した Robots をリファクタリングしてみた (まだCUI ver.)
- 2. Typescript ts-node できない を解決
- 3. vue cliとは
- 4. grpc-nodeでエラー時にerrdetailsを返却する
- 5. npm scripts内の`echo`でダブルクォートを出力させたい
- 6. typeorm チュートリアル 一部抜粋 (+勝手に補足)
- 7. [Vueサーバサイドレンダリング] webpackでoutput.libraryTarget should be commonjs2 と怒られた話[Vue SSR]
- 8. OvernightJSでNode+Express+TypeScriptなAPIサーバーを構築する
- 9. 描いて理解するイベントループ
- 10. VS Codeでサイト制作環境構築
- 11. アレクサでライトやエアコンをコントロールしましょう（まだできない）
- 12. [OCI] Computeインスタンス上にNode.jsのWebアプリケーション環境を構成して、MySQL Database ServiceのDBシステムにアクセスしてみた
- 13. Node.js + socket.io の簡易チャットアプリをコンテナ化したメモ
- 14. Dockerfile、docker-compose.ymlを作ってwindows10、Linux、ラズパイでnodejsを動かす
- 15. 【node+Vue】ストア+APIを経由してサーバで作ったバイナリファイル受け取りダウンロードさせる
- 16. WindowsのNode.jsのバージョンマネージャー
- 17. Module
- 18. Botpressで作るチャットボットにAWSインフラエンジニアの仕事をさせよう
- 19. React とか いろんなところ で役に立つ三項演算子
- 20. node-sassがDeprecatedになるとのことでNuxt.jsのsassをアップデートした
TypeScript で実装した Robots をリファクタリングしてみた (まだCUI ver.)
ちょっとは TypeScript やってる感が出たと思うよ…
# はじめに
[前回の記事で実装した Robots ](https://qiita.com/takanassyi/items/db1e16aaf076bfaafe79)の TypeScript コードがあまりにも…ということでリファクタリングしてみました。
# クラス図
– ちょっと真面目に Robots をクラス設計を考えてみました。
– [MVCパターン](https://ja.wikipedia.org/wiki/Model_View_Controller)を意識して設計しました。
– Model 相当が Robot クラスでロボットの動きなどのルールを管理するロジックの担当。
– View 相当が Field クラスでターミナル上に表示する画面に関する処理の担当。
– Controller 相当が Game クラスでユーザーからの操作を受け付け、Robot, Field クラスとの連携を担当。#これで解決
公式？ドキュメントだと以下のように書いておりましたmm
https://www.npmjs.com/package/ts-node“`
# Local
vue cliとは
## vue-cliとは
>cliはCommnad Line Interfaceの略で、コマンドラインを使ってvue.jsで開発を行うための前準備を支援してくれるツールです。開発はプロジェクトという単位で行います。vue-cliを使ってプロジェクトの作成を行う際、プロジェクトで利用する機能のインストールも一緒に行うことができます。webpackも一緒にインストールされるでプロジェクトを作成すればすぐに開発を開始することができます。
https://reffect.co.jp/vuevueで開発するための道具ってことか。
## インストール方法(node.jsがインストールされている必要がある。)
“`
$ npm install -g @vue/cli
“`## プロジェクトの作成
“`
$ vue create vue-application
“`
このコマンドを実行した後に、こういう選択画面が表示される。“`
Vue CLI v4.4.6
? Please pick a preset: Manually select features
? Check
grpc-nodeでエラー時にerrdetailsを返却する
# grpc-nodeでエラー時にerrdetailsを返却する
gprcのバックエンドとしてnodeを選択するとフレームワークとして公式のgrpc-nodeが選択に上がると思います
https://github.com/grpc/grpc-node正常系はそつなく実装できるのですが、エラー時にGoなどで言うところのerrdetailsを利用したくなったときに苦労したのでその覚書
(正確にはerrdetailsと呼ぶのかは分かりませんがGoのパッケージ名がerrdetailsなのでそう呼んでます)## errdetailsって何？
gRPCのフレームワークが用意しているエラーの詳細を記述できるメッセージオブジェクトです
例えば、REST-APIを設計するときなどにjsonのエラーオブジェクトも設計する必要があると思うのですが、
統一的なフォーマットがなく(一応RFC7807という規格はあるが従っていることが少ない)、設計時に揉めるであろうことが予測されますそこで、gRPCが用意しているメッセージオブジェクトと仕組みを利用することで、設計時に疲弊しなくて済みます
下の実装例
npm scripts内の`echo`でダブルクォートを出力させたい
# TL;DR
こんなことを
“`sh
echo \”
“`npm scriptsで再現したければ、こう書きます。
“`json:package.json
“scripts”: {
“double-quote”: “echo \\\””
}
“`# 目的
こんなシェルコマンドを叩いて、
“`sh
echo { \”home\”: \”$HOME\” } > home.json
“`変数を展開したJSONファイルを作りたかったんですね。
“`json:home.json
{ “home”: “/home/myname” }
“`しかもnpm scriptsに書きたかったんです。
# npm scriptsでは挙動が違う
シェルで実行するときのままこう書くと、
“`json:package.json
“scripts”: {
“create-json”: “echo { \”home\”: \”$HOME\” } > home.json”
}
“``npm run`は正常終了するものの、出来上がるフ
typeorm チュートリアル 一部抜粋 (+勝手に補足)
# 概要
– typeorm[^1]のチュートリアルが和訳されていない一部抜粋して和訳してみました．
– 基本的にDeepL翻訳で和訳して一部意訳しました，
– typescriptで上から実行してもエラーが発生するので，一部書き換えていきます
– “Creating a many-to-many relation”多対多リレーションの作成を解決できないのでそこまで# 実行環境
– 使用言語: typescript
– node: v14.14.0
– データベース: MySQL# 前準備
MySQLでデータベースを予め作成します．
設定は，
ユーザー名:root， パスワード:password， データベース名:typeorm_tutorial
ポート: 3306(デフォルト)，
にしました．
GUIアプリケーションはtableplusを使用しました．# クイックスタート
typeormのプロジェクトを作成します．
## typeorm をインストール
npmを使ってインストールします．-gで一度インストールすればOK“`shell
npm install type
[Vueサーバサイドレンダリング] webpackでoutput.libraryTarget should be commonjs2 と怒られた話[Vue SSR]
# Vue SSR 公式ガイドに沿って実装したら怒られた
公式ドキュメントを参考にして、Vue SSR を実装しようとしたところ、
webpackを経由してサーバーバンドルを作ろうとしたら、タイトルの通り怒られた。
`vue-ssr-server-bundle.json` が出来上がらない。。。[公式ドキュメント]
https://ssr.vuejs.org/ja/guide/[バグ]
“`
[vue-server-renderer-webpack-plugin] webpack config `output.libraryTarget` should be “commonjs2”.[webpack-cli] Uncaught exception: Error: Entry “app” not found. Did you specify the correct entry option?
[webpack-cli] Error: Entry “app” not found. Did you specify the correct entry option?
a
OvernightJSでNode+Express+TypeScriptなAPIサーバーを構築する
日本語情報が全く見当たらないExpressのTypeScript decoratorである[OvernightJS](https://github.com/seanpmaxwell/overnight)を使ってみたので、導入方法をざっくりまとめます。
Node/ExpressでTypeScriptを使う方法については、簡単に書きはしますが本筋ではないので詳細は他を当たってください。[このあたりとか](https://qiita.com/notakaos/items/3bbd2293e2ff286d9f49)参考になります。
# 前提環境
– Node 12.18.4
– Express 4.17.1
– TypeScript 4.0.3開発環境でのTypeScriptの実行には[ts-node](https://github.com/TypeStrong/ts-node)と[ts-node-dev](https://github.com/whitecolor/ts-node-dev)を使います。ts-node-devはコード修正するとホットリロードしてくれるのでとても楽。
描いて理解するイベントループ
# はじめに
早速ですが Node.js で次のコードを実行したときの出力がどうなるのかわかるでしょうか？
“`js:setTimeoutに0秒を指定
console.log(“start”);setTimeout(function() {
console.log(“Hello!!!”);
}, 0); // 第２引数は 0 ミリ秒 = 0 秒待つ？console.log(“end”);
“`実は、出力は以下の順になります。
“`:実行結果
start
end
Hello!!!
“`「なんで？」と思った人向けに、順を追って解説します。
「あたりまえじゃないか」と思った人はブラウザバックしてしまいましょう。[^help][^help]: ずっと Java をやっていて JavaScript はほぼ初心者です。初心者なりの理解を書いた記事なので、誤りがあったらコメント欄でやさしく教えていただけると嬉しいです。
# 1. イベントループ
この記事では JavaScript の実行環境を「ワンオペで黙々と作業をこなす従業員」に例えて説明します。
まず
VS Codeでサイト制作環境構築
#はじめに
底辺コーダーが自分のために記録している、node.jsを使った際のサイト制作環境構築メモです。
そのため、もっと効率がいい方法や記述方法があると思いますが、あくまで一例として見てください。#対象者
* Windows所有者（?は知らん）
* HTMLとかCSSは大体理解してる
* Scssを触ってみたけど、変換が一々めんどくさい
* node.jsって何をどうしたらいいのか意味不明#目指す形（基本楽がしたい）
* Scssを更新した際に自動でCSSに変換
* 変換したCSSを自動で任意の場所に置きたい
* CSSを最終的に圧縮してmin形式にも対応#フォルダ構成
root/
├ assets/
│ ├ css/
│ ├ img/
│ ├ js/
│ └ scss/
├ gulpfile.js
├ index.html
└ package.json#1.node.js 導入
噂の「node.js」を下記からDLしてきて導入します。
https://nodejs.org/ja/
###「node.js」って何ですか？？？
そんなあなたに…[これ]
アレクサでライトやエアコンをコントロールしましょう（まだできない）
# モチベーション
最近、プロトアウトでIoTに関する授業を受けました。メインはObnizで、いくつかセンサーやアクチュエータを試しました。授業の内容を復習のため、何か面白いことを作ろうと思いました。
みんなさんは眠いのに、ライトのリモコンを見つけられなかったことがありますか。その時、拍手でライトをオンにできると、いいじゃないですか。それで、今回、obnizでリモコンの信号を模倣してライトやエアコンをコントロールする制作を作りたいと思います。# 概要
そんな制作を作るために、2つ部分が必要です。1番目はデバイス（エアコンやライト）のコントロールする部分です。
2番目は人間のコマンドを認識する部分です。## リモコンのしくみ
リモコンは[赤外線](https://ja.wikipedia.org/wiki/%E8%B5%A4%E5%A4%96%E7%B7%9A)もしくはラジオで動いています。うちのリモコンは赤外線（以下はIRとする）のほうです。
IRリモコン（送信機）は、特定のバイナリコードを表す赤外線のパルスを送信します。 これらのバイナリコードは、電源オン/オフや音量アップ
[OCI] Computeインスタンス上にNode.jsのWebアプリケーション環境を構成して、MySQL Database ServiceのDBシステムにアクセスしてみた
#はじめに
Computeインスタンス上に構成したNode.jsのWebアプリケーションから、MySQL Database ServiceのDBシステムにアクセスしてみた時の手順です。
（2020年10月現在）#構築イメージ
#作業の流れ
1.VCNの構成
2.ネットワーク・セキュリティ・グループの作成
3.MySQL DBシステムの作成
4.Computeインスタンス（APサーバ）の作成
5.パブリックIPの作成
6.ComputeインスタンスへのパブリックIPの割り当て
7.MySQLクライアントのインストールと設定
8.Node.jsのインストールと設定
9.firewalldの設定
10.SELinuxの設定
11.MySQL DBシステムの接続情報の確認
12.アプリケーションで使用
Node.js + socket.io の簡易チャットアプリをコンテナ化したメモ
# 背景
Node.js + socket.io の簡易チャットアプリをコンテナ化した時のメモ# リンク集
#### [Node.js Web アプリケーションを Docker 化する](https://nodejs.org/ja/docs/guides/nodejs-docker-webapp/)
Hello Worldを返す簡易Node.jsサーバーを作ってコンテナ化するドキュメント。ほぼ忘れかけているNode.jsの記憶を取り戻すことができた。#### [Socket.io#Get Started](https://socket.io/get-started/chat/)
socket.ioを使って簡易的なアプリを作ることができる# サンプルコード
“`json:package.json
{
“name”: “docker_web_app”,
“version”: “1.0.0”,
“description”: “Node.js on Docker”,
“author”: “shogo suzuki”,
“main”: “socket_ser
Dockerfile、docker-compose.ymlを作ってwindows10、Linux、ラズパイでnodejsを動かす
以前書いた下記、記事の続きでDockerfileとdocker-compose.ymlを作って、動かす手順まで今回記載します。
https://qiita.com/MCYamamoto/items/4d424af9573fa90edf61## 最終的なフォルダ構成
まず、最終的なフォルダ構成です。
下記のようになります。“`
baseフォルダ
+docker-compose.yml
+cont
+env
+Dockerfile
+deploy //デプロイ対象のソースコード(今回はnodejs)
+package.json
+package-lock.json
+build
+jsファイルたち
+share //ホストとコンテナの共有フォルダ
“`## Dockerfileをつくる
[参考URL]
https://qiita.com/pottava/items/452bf80e334bc1fee69a全体的な流れとしては、上記を参考にした。
インストール必要なものをインストールしながらコマンドをメモして、最終的なD
【node+Vue】ストア+APIを経由してサーバで作ったバイナリファイル受け取りダウンロードさせる
リアクティブでSPAでなければ、サーバサイドにPOSTしてファイルをダウンロードさせれば簡単だけど
v-router とか使うと簡単には行かず、困ったのだけれど、
以下の方法で受け渡しできたので備忘録として記載しておく。【仕様】
・ダウンロードボタンを押すと、サーバ側で作成されたファイルをダウンロードする。【前提】
・vue から直接サーバ側へはPOSTできない。(ルーターが邪魔する。)
・ストア＋API経由でサーバ側とのデータのやり取りはできる。【サーバ側実装】
今回は、API経由でデータが渡されると、サーバ側でファイルを作成し、base64エンコードした内容を
json形式で { DATA: xxxx } として返すようにした。【クライアント側実装】
こんな感じ
今回の肝は以下の2箇所。
・base64 をデコードする部分
・blobファイルをダウンロードさせる部分。“`
methods: {
/**
* ダウンロード
*/
async download() {
let info = { // api に渡す引数があれば、こんな感じ
WindowsのNode.jsのバージョンマネージャー
メモ。
Nodistでやってみたが、JetBrains製品で上手く認識されなかった。
nvm-windowsというのがあり、Googleも推奨してるらしいので、それを入れたら上手く行った。https://github.com/coreybutler/nvm-windows
### インストール
https://github.com/coreybutler/nvm-windows/releases
ここから、nvm-setup.zipなやつを落としてくるあとはウィザードに従ってインストール。
### 動作確認
バージョンの確認“`bat
nvm version
“`インストール済みのバージョンの確認、初期では当然ない。
“`bat
nvm list
“`インストール出来るバージョンの確認
“`bat
nvm list available
“`### nodeのインストール
コマンドプロンプトとかは管理者権限で立ち上げるみたい。14.15.0のインストール
“`bat
nvm install 14.15.0
“`14.15.0を使
Module
# ES6のモジュールシステム
## 1. 概要
あるファイルから別のファイルの関数や変数を参照したいときに、モジュールシステムを利用する。参照元では、importコマンドを使って外部のファイルを指定し、参照先では、exportコマンドを使って関数や変数を外部に公開する。
公開の方法として、大きく分けて、Named ExportsとDefault Exportsがある。両者はimport/exportコマンドの使い方が異なるので、章を分けて説明していく。
## 2. Named Exports
基本的には、以下のように、公開したいものの頭にexportを付ける。
“`javascript
// car.js
export const MAX_SPEED = 200;export function getSpeed() {
retrun speed;
}export function setSpeed(x) {
speed = x;
}
“`あるいは、以下のように、ファイルの最後にまとめて書くこともできる。
“`javascript
// car.
Botpressで作るチャットボットにAWSインフラエンジニアの仕事をさせよう
忙しい日々が続いていて、自分の部下が欲しいーー！でも、教えるのは面倒。。。それ以前に人がいない。。。そう感じた時に自分の仕事をボットにやらせればいいんじゃないか？！と思いつき、開発？育成？することにしました。
# 完成イメージ
ボットに処理を依頼するとボットがansibleでsarコマンドなどを対象サーバー上で実行し、その実行結果をチャットに表示します# 前回書いた記事
https://qiita.com/drafts/e87634e7bef42ed2dfe1/# 環境
EC2(AmazonLinux2)
ALB
Nginx
Botpress# 参考リンク
https://botpress.io/# Botpressインストール
“`
mkdir botpress
wget https://s3.ama
React とか いろんなところ で役に立つ三項演算子
# React とか いろんなところ で役に立つ三項演算子
三項演算子とは以下のようなもの
“`js
isflag ? console.log(“いいよ”) : console.log(“ダメだよ”);
“`if 文だと
“`js
if (isflag) {
console.log(“いいよ”);
} else {
console.log(“ダメだよ”);
}
“`## 何が役に立つの？
三項演算子は、非常にスマートに書ける。
しかし、見にくいコードが見にくくなってしまう。
という問題があるらしい
## 使いどころ アロー関数
js には、アロー関数というのがある。
“`js
() => console.log(“アロー関数”);
“`map や Object.key などでよく私は、使います。
ここで、if 文を書くとします。“`js
const a = [1, 2, 3, 4, 5];
a.map((data) => {
if (data == 2) {
console.log(data);
}
});/
node-sassがDeprecatedになるとのことでNuxt.jsのsassをアップデートした
node-sass(LibSass)って長らく使ってたイメージありますね。
> [LibSass is Deprecated](https://sass-lang.com/blog/libsass-is-deprecated)
こちらに記事にあるようにLibSassっていうC++で書かれたライブラリを使った非推奨になるとのことで、これを使ってるnode-sassも非推奨になり、Dart製のSassを使ってねという感じになる模様です。
* https://www.npmjs.com/package/node-sass ← 今まではよく使われていたけど今後非推奨
* https://www.npmjs.com/package/sass (Dart Sass) ← 今後はこっちが推奨今回Node.jsのv15系にアップデートしたのでnode-sassのバージョンも上げようかと思って調べてたら発見しました。
## 環境
* Node.js v15.0.1
* Nuxt.js v2.12.2元々v14系で動かしてたけどアップデートさせてみました。
## node-sas
