- 1. wikipediaのワードを使った連想ゲームアプリを作ってみた【Node.js+express】
- 2. node-sass で ENOENT: no such file or directory, scandir が出るとき
- 3. gulp実行エラーでnode.jsのバージョンを変更する
- 4. WSL2のUbuntu20.04 でroot以外のユーザーでnpmコマンドが使えない
- 5. 【Node.js】 Dockerを用いてNode.js Express MySQLの環境を構築する
- 6. 憧れのギニュー特戦隊の誰に似てるか判定するLINEbotを作ったから、ぜってぇ見てくれよなっ！
- 7. AlexaとTodoistでやることリスト・お買い物リスト
- 8. Steinで複数条件（AND）でデータをとれない。。。⇒取れた メモ
- 9. オンライン配信授業で、手を挙げたら【●●さん】とさしてくれるwebアプリを作ってみた
- 10. [Node.js] response.writeHeadとresponse.setHeaderって何が違うの？
- 11. Chatwork に Node.js + TypeScript でメッセージを通知する
- 12. AmazonLinux node.js/typescriptのインストール手順
- 13. ハンズオン Node.jsの7章データストレージ(sqlite3)をTypescriptで試したメモ
- 14. フロントエンドやるなら入れておくべきESlintってなに？
- 15. Twitterのリスト内ツイートを取得する際の`slug`の確認方法
- 16. SIerエンジニアからWeb系フロントエンドエンジニアに転身するために今やっていること
- 17. expressでOpenAPI仕様のAPIを実装するときのTips
- 18. nodeJSとGoogleSpreadSheet(スプレッドシート)を連携する方法
- 19. ハンズオン Node.jsの7章データストレージ(file-system)をTypescriptで試したメモ
- 20. 【Nuxt.js】Vue CLIによりアプリケーション雛形を作るまで
wikipediaのワードを使った連想ゲームアプリを作ってみた【Node.js+express】
このアプリはいたってシンプルで、**wikipediaからランダムに取得したワードに関連した言葉を３つ入力するアプリ**です。
（めちゃくちゃ簡単なアプリです。ご承知おきください。）# 実装環境
ubuntu：18.04.5 LTS
node.js ：v10.14.2
express : 4.16.0+ github：https://github.com/Sparrow42/associate-app
#アプリの使い方
こちらがトップ画面です。「岐阜中警察署」と出ています。思いついたものなんでもいいので、３つ入力します。
Module Error (from ../node_modules/sass-loader/dist/cjs.js):
ENOENT: no such file or directory, scandir ‘*****/node_modules/no
gulp実行エラーでnode.jsのバージョンを変更する
###gulp実行エラー発生
“`
$ gulp
“`gulpを実行すると下記のエラーが発生した。
“`
ReferenceError: primordials is not defined
“`エラーの意味は、node.jsとgulpのバージョンが合ってないよということ。
ちなみにバージョンは下記
“`
$ node -v
v14.8.0$ gulp -v
CLI version: 2.3.0
Local version: 3.9.1$ npm -v
6.9.0
“`###上記エラーの対処方法は2つ。
1.gulpのバージョンを3系から最新の4系に変更する。
2.node.jsのバージョンを下げる今回はnode.jsのバージョンを下げる方法で対応する。
ちなみにnode.jsはhomebrewでインストールしていました。
“`
brew install node.js
“`ここでいろいろ調べてみるとnodebrewという便利なツールがあることを発見。
nodebrewとはnode.jsのバージョンを管理できるツールとのこと。
WSL2のUbuntu20.04 でroot以外のユーザーでnpmコマンドが使えない
#環境
– Windows 10 Pro
– WSL2
– Ubuntu20.04#状況
アプリケーション一覧からUbuntu20.04を起動し“`bash
sudo apt install npm
“`
でnpmをインストールした後,“`bash
npm –version
“`
実行すると,“`bash
-bash: /mnt/c/Program Files/nodejs/npm: /bin/sh^M: bad interpreter: No such file or directory
“`“`bash
sudo su
“`してからrootユーザーで実行すると普通にバージョン情報が出力される.
あと, PowerShell経由で`wsl`コマンドで実行すると発生しない.#改行コードをCRLFからLFへ変更
色々調べてると改行コードが悪さしてそうだったので,
CRLFからLFに変える無精してVSCodeで変更
###app.env
“`app.env
MYSQL_SERVER=mysql
MYSQL_USER=（ユーザー名）
MYSQL_PASSWORD=（パスワード）
MYSQL_DATABASE=(データーベース名)
“`
###docker-compose.yml:
node.jsコンテナとmysqlコンテナを管理するyml“`docker-compose.yml
version
憧れのギニュー特戦隊の誰に似てるか判定するLINEbotを作ったから、ぜってぇ見てくれよなっ！
# ギニュー特戦隊に入りたい
皆さんも（特に男性なら）、人生で一度はギニュー特戦隊に入隊したいと思いましたよね？
今回はその願いを少しでも叶えるべく、次のようなボットを作成しました。
＊ まさかそんな人はいないと思いますが、ギニュー特戦隊を知らない方は[こちらのwikipedia](https://ja.wikipedia.org/wiki/%E3%82%AE%E3%83%8B%E3%83%A5%E3%83%BC%E7%89%B9%E6%88%A6%E9%9A%8A)をご確認ください。ギニュー特戦隊識別bot完成！
僕はリクームでしたwww#protoout pic.twitter.com/52wTNdbfTu&mda
AlexaとTodoistでやることリスト・お買い物リスト
Todoistって、Amazon Echoと連携できるんですね！
しかもWebAPIが充実しているので、さらに連携の輪が広がりそうです。ちなみに、Todoistは、タスク管理ツールです。一般には、やることリストとか、買い物リストが挙げられますが、メモ的に使えて、かつ、期限を設定して予定を立てたり、失念するのを避けるのに役立ちます。
todoist
https://todoist.com/今回作成する全体の構成はこんな感じです。
すでに、todoistはAlexaとの連携をサポートしていますし、AndroidやiPhone用のアプリもありますので、その部分は特に難しいところはありません。
今回は、やることリスト・買い物リストの表示をWebページとして表示します。todoistはオフィシャルでWebAPIが充実していますし、npmモ
Steinで複数条件（AND）でデータをとれない。。。⇒取れた メモ
“`javascript
let userNameList = await store.read(tranSheet, { search: { group_no: groupNo.toString,date: today } }).then(data => {
return data
}).catch(e => console.log(e))“`
結果のデータを見ると、2つ項目を指定するのはできるのだが、
最初の条件しかきいてないように見える。確かに、この書き方だとANDかORかわからないもんね。
Steinのページには、Columnを複数指定できそうな記載があるのだが、、、
何を変えたわけではないが、なぜか取れるようになった。
`
オンライン配信授業で、手を挙げたら【●●さん】とさしてくれるwebアプリを作ってみた
#自己紹介
大学時代C言語を学んでから十数年以来のプログラミングを始めています。
本業はweb制作で、お客様から悩みや感じている課題についてに相談を受ける事も多いです。
LINEbotを中心に、webの技術を利用してどのようにお客様の悩みや課題を解決出来るのか、広く学んでいます！今回は、[Teachable Machine](https://teachablemachine.withgoogle.com/)というgoogleが提供する機械学習が簡単に行えるウェブブラウザツールを知り、普段の生活に取り入れてみる事にしました！
【オンライン授業でのメンタルサポートAI】
実際に小学校中学年の子どもがオンラインで配信される塾の授業を受けているのですが、テレビ同様一方通行の授業なので、子供のやる気に波があるんです。
すぐに画面からいなくなったり、気が付いたら違う事をしていたり。。。
やっぱり対面での先生の問いかけがあったら、もっと積極的に授業に参加できるのになとは思いますが、このようなご時世なのでオンラインの方が安心ですよね。家での経験だけではなく、オンライン授業が浸透してきいるな
[Node.js] response.writeHeadとresponse.setHeaderって何が違うの？
# はじめに
Node.jsを勉強していて、setHeaderとwriteHeadって何が違うの…？となったのでソースコードなどから調べてみました。# setHeaderのソースコードを見てみる
setHeaderの実装部分を示します。setHeaderはheadersに名前と値を格納しているだけということがわかります。
headersに値を格納しているので、例えばgetHeader(name)によって値を取得することができます。“`javascript
OutgoingMessage.prototype.setHeader = function setHeader(name, value) {
if (this._header) {
throw new ERR_HTTP_HEADERS_SENT(‘set’);
}
validateHeaderName(name);
validateHeaderValue(name, value);let headers = this[kOutHeaders];
if (headers === nul
Chatwork に Node.js + TypeScript でメッセージを通知する
## スクリプト
ちょっとしたツールを作成していて Chatwork 通知が必要になりましたため、作成しました。
“`typescript
import { escape } from ‘querystring’;
import fetch from ‘isomorphic-unfetch’export async function notify(
api_token: string,
room_id: string,
message: string,
self_unread?: 0 | 1
): Promise{
return await fetch(`https://api.chatwork.com/v2/rooms/${room_id}/messages`, {
method: ‘POST’,
headers: {
‘X-ChatWorkToken’: api_token,
‘Content-Type’: ‘application/x-www-form-urlencoded’,
}
AmazonLinux node.js/typescriptのインストール手順
typescriptを始めたくてAmazonLinuxにnode.jsとtypescriptをインストールしてみた。
まずはcurlでリポジトリを追加してyumでnode.jsをインストールする。“`
curl -sL https://rpm.nodesource.com/setup_14.x | sudo bash –
sudo yum install -y nodejs
“`これでLTSの14.x版がインストールされる。
次にnpmでtypescriptをインストールする。“`
sudo npm install -g typescript
“`これでtscが使えるようになり、typescriptのコンパイルができるようになった。
ハンズオン Node.jsの7章データストレージ(sqlite3)をTypescriptで試したメモ
## 概要
[前回](https://qiita.com/hibohiboo/items/c2b7f879ba61c97bd770)の続き。
ハンズオン Node.jsの7章データストレージをtypescriptで試す。今回はsqlite。[ソース](https://github.com/hibohiboo/develop/tree/c4f2c81f51f271d736f3eb13379d70b21e452c2b/tutorial/lesson/azure/node-app)
## 環境
“`json:package.json
{
“name”: “node-app”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.js”,
“scripts”: {
“start”: “node ./bin/www”,
“file-system”: “node ./bin/www”,
“sqlite”: “node ./bin/www”,
“tsc”: “tsc”,
フロントエンドやるなら入れておくべきESlintってなに？
#プログラミング勉強日記
2020年11月28日
[昨日の記事](https://qiita.com/mzmz__02/items/12d198b696efa8b29bda)でPrettierについて扱ったが、Prettierと合わせて使用することのできるESlintについて紹介する。#ESlintとは
ESlint(読み方：「イーエスリント」)は、JavaScriptやTypeScriptなどの静的解析ツールである。ESlintを導入することで、単純な構文エラーやプロジェクト固有のコーディング規約を定義することができる。厳密なルールを定義することで、複数人で開発する場合でもシステム全体のコードの一貫性を維持することができる。#ESlintの特徴
– 自由に多くのルールを設定できる
– 独自ルールを作成するAPI
– 固有のライブラリー、フレームワーク、および実践のルールを持つ多数のプラグイン
– ES6、ES7、JSXの内蔵サポート
– 迅速に開始できるように、推奨ルールだけでなくサードパーティの設定利用が可能
– Sublime、Vim、JetBrainsの製品およびV
Twitterのリスト内ツイートを取得する際の`slug`の確認方法
TwitterのリストをAPIで使用する際、例えば`ninomiyt`アカウントの`sample`リストを取得する際、以前は素直に以下のようなコードを書けば取得できました。
node.jsの[twitterライブラリ](https://www.npmjs.com/package/twitter)で書いていますが、他の言語でも概ね似たコードになると思います。
“`javascript
const response = await client.get(“lists/statuses”, {
“owner_screen_name”: “ninomiyt”,
“slug”: “sample”,
“count”: 100,
});
“`
しかし、現在は新規作成し
SIerエンジニアからWeb系フロントエンドエンジニアに転身するために今やっていること
こんにちは！SIerでJavaプログラマをしているゆうきデザイン（[@yuki_design_gr](https://twitter.com/yuki_design_gr “Twitter”)）と言います。
Qiita初投稿として、自己紹介も兼ねて
**”SIerエンジニアからWeb系フロントエンドエンジニアに転身するために今やっていること”**
というテーマで書いてみようと思います。**同じような境遇にいる人の道しるべの1つになりますように！**
#目次
[1. 自己紹介](#1-自己紹介)
[2. なぜWeb系を目指すのか](#2-なぜweb系を目指すのか)
[3. SIerエンジニアからWeb系フロントエンドエンジニアに転身するために今やっていること](#3-sierエンジニアからweb系フロントエンドエンジニアに転身するために今やっていること)#1. 自己紹介
東京在住の20代半ば。
####学歴
東京外大韓国語専攻卒業####職歴
新卒で大手SIerに入社し、アカウント営業を担当(10ヶ月)
→SE(現職。Java・.NET・Oracleのコーディング実務1年
expressでOpenAPI仕様のAPIを実装するときのTips
## 要点
1. express-openapiを使おう (openapi-generatorではなく)
2. security handlerの実装には、シンプルにOpenAPIのinitializeメソッドに引数securityHandlersを渡すのが良い。(openapi-security-handlerは、必要ない)## express-openapiを使おう (openapi-generatorではなく)
OpenAPI仕様のYAMLファイルを Swagger Editor (https://editor.swagger.io/) などを用いて作った後、openapi-generator (https://github.com/OpenAPITools/openapi-generator) を使ってスケルトンを作れそう…と思うのですが、openapi-generatorの出力するNode.js向けのスケルトンは、あまり良い感じではないです。
むしろexpress-openapi (https://www.npmjs.com/package/express-op
nodeJSとGoogleSpreadSheet(スプレッドシート)を連携する方法
nodeJSとスプレッドシートを連携して、スプレッドシート上の値を取得するところまでを解説します。
順序
①. auth情報を取得する
②. スプレッドシート側で権限を確認する
③. nodeJSのコードを書いて実行するの３本立てで説明しました。
##①. auth情報を取得する
Google Cloud Platform(Google API)でGoogleSpreadSheetのAPIを有効化させます。すでに”サービスアカウント”の認証情報のjsonを持っている人は不要です「プロジェクトの選択」→「新しいプロジェクト」へ。
をTypescriptで試したメモ
## 概要
[ハンズオン Node.js][*1]の7章データストレージを試す。
型をつけて、typescriptで書いてみる。
今回はfile-systemの章。
環境は[nodeのexpressをtsで作って無料でazureに公開したメモ](https://qiita.com/hibohiboo/items/844cef3899c4fa5c4fa1)で作成したものを利用した[ソース](https://github.com/hibohiboo/develop/tree/b91e7ae5e0dbb1f3aaa1fe8a59649045cc67ddc6/tutorial/lesson/azure/node-app)
## 環境
“`json:package.json
{
“name”: “node-app”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.js”,
“scripts”: {
“start”: “node ./bin/www”,
“file-system”: “n
【Nuxt.js】Vue CLIによりアプリケーション雛形を作るまで
言語化するために記事に起こしました。
汎用性の高いスターターテンプレートで雛形を作成するまでを簡潔に記します。#事前準備
①Node.jsの導入
②Yarnの導入
③direnvの導入①、②共にNuxt.jsで開発する上で必須となるので導入する（ここではこれらの導入方法については省略します)。
③はターミナルのcurrentディレクトリで環境変数を自動で設定してくれるツール。環境変数の設定忘れを防止するため導入するとよい。
#1
“`ruby:ターミナル
npm i -g @vue/cli @vue/cli-init
“`
上記コマンドで、Vueコマンドを追加する。「Vue -V」でバージョン確認。“`ruby:ターミナル
$ vue -V
@vue/cli 4.5.9
