- 0.0.1. NestJS+TypeORMでDB接続して動作確認まで
- 0.0.2. node.jsでサーバーを立ててみる
- 0.0.3. Docker ComposeでNode.jsの環境構築
- 0.0.4. Node.jsのバージョンあげたら「Node Sass could not find a binding for your current environment」とでた場合
- 0.0.5. 【初心者向け】API利用の基本テクニック(ローディングの描画と標準時間の変換について)
- 0.0.6. Electronをバージョンアップしたらjsのネイティブモジュールが読み込めなくなった話
- 0.0.7. create-react-appを使用したReactの環境構築(TypeScriptも)
- 0.0.8. 【Node.js】dotenvを使用して環境変数を設定&設定した環境変数をHerokuにも適用する方法
- 0.0.9. YouTubeから動画をダウンロード(youtube-dl)
- 0.0.10. 【Node.js】JSON文字列をCSVファイルとして吐き出す
- 0.0.11. Node.jsで扱うよく扱うデータ形式の基礎知識
- 0.0.12. Macのターミナルからhttp-serverコマンドを使って Webサイトを検証できるようにした
- 0.0.13. Sequelize で名前を指定してmigrationをrollbackする
- 0.0.14. マネーフォワードクラウド請求書から案件データぶっこ抜いて、Exmentに突っ込み簡易SFA/CRMを行う
- 0.0.15. 同僚の作成したdockerコンテナをbuildする際にコケたポイントメモ
- 0.0.16. え!? わずか3分でローカルにTypeScriptの実行環境を!?
- 0.0.17. 無料でSSR・ホスティング・API鯖を立てれるVercel。GitHub Actionsで自動デプロイ。
- 1. hello
NestJS+TypeORMでDB接続して動作確認まで
基本的に自分用メモです.
## DBの準備
今回はmysqlを使います.
予め適当なデータベースとユーザを作成して権限付与までしておきます.テーブルはまだ作らなくてOKです.
~~~mysql
CREATE DATABASE testdb;
CREATE USER ‘testuser’@’localhost’ IDENTIFIED BY ‘password’;
GRANT ALL ON testdb.* TO ‘testuser’@’localhost’;
~~~## NestJSのプロジェクト作成
NestJSのプロジェクトを作成して簡単な動作確認まで行います.
細かいところは公式ドキュメントを参照: https://docs.nestjs.com
~~~bash
npm i -g @nestjs/cli
nest new nest-typeorm-handson // とりあえずnpm選択して進めます
nest g module user
nest g controller user
nest g service user
~~~これでnest-typeorm
node.jsでサーバーを立ててみる
#はじめに#
私の最初の投稿になります。
qiitaについても素人同然なので何かあれば教えていただけると幸いです。これから何回かに分けてチャットウェブアプリを作っていき、その過程をメモとして残していこうと思います。(mac 環境)
今回は *node.js* を用いてサーバーを立ててみます。#Node.jsのインストール#
まずnode.jsがインストールされているか確認をします。
node.jsのバージョンを確認します。
確認は“`terminal
$ node –version
v12.18.3
“`で確認。
node.jsが入っていない場合node.jsのインストールをおこなう。
node.jsのバージョン管理はnpm (Node Package Manager) か n を使って管理するとのことです。今回nを使っていきたいのですが、nを入れるために。(ここら辺もいまいちわかっていないですが)
ともかく以下のコマンドで n をインストールします“`terminal
$ brew install node
$ npm install -g n
“
Docker ComposeでNode.jsの環境構築
#動機
[Create React Appを少し遠回りしてはじめよう](https://hand-dot.com/blog/start-react-app-with-create-react-app/)をローカル環境を汚さずに実践したかっため、タイトルのような環境構築を目指しました。#最終的なディレクトリ構成
“`:最終的なディレクトリ構成
node-docker/
|–docker-compose.yml
|–node/
|–app/
“`#docker-compose.yml
>
[Docker Compose 概要](https://docs.docker.jp/compose/overview.html)
Compose とは、複数のコンテナを定義し実行する Docker アプリケーションのためのツールです。まずプロジェクトフォルダ`node-docker`を作成し、そこに`dockercompose.yml`ファイルを作成します。
“`:現在のディレクトリ構成
node-docker/
|–docker-co
Node.jsのバージョンあげたら「Node Sass could not find a binding for your current environment」とでた場合
# 概要
Node.jsのメジャーバージョンをあげると、node-sassがエラーをはくことがある**「Node Sass could not find a binding for your current environment」**
そのときは、node-sassをリビルドして自分のnode環境に合った状態にする
## 対処法
“`
npm rebuild node-sass
“`これでOK
## そのほか対処法
それでもだめなら
“`
npm rebuild node-sass –force
“`それでもだめなら、いったんnode-sass消してから。いれなおす。
(入れ直しでも、環境にあった適切なbinaryが生成される)“`
npm uninstall node-saas
npm install node-sass –save-dev
“`
【初心者向け】API利用の基本テクニック(ローディングの描画と標準時間の変換について)
# 背景とこの記事の目的
この度、TwitterAPIを利用したWEBアプリを構築しました。
その際に、「あーこの技術は今後も間違いなく活用するだろうなー」と思ったものがいくつかあったので、備忘として残します。
便利なライブラリもあったのでそちら紹介も兼ねます。
※フロントはvueで作っていますので、その前提で以下のトピックを紹介していきます。# 目次
1.非同期通信の際のローディングでぐるぐるさせるやつ(スピナー、インジケーター)
2.APIのレスポンスの中にある時刻を日本時間に変換する## 非同期通信の際のローディングでぐるぐるさせるやつ(スピナー、インジケーター)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635205/3fdf297f-e4c7-80e6-5e7c-c0e07eda77a6.png)
こういうの実装したいと思ったことは皆さん誰しも一度はあるでしょう。
API通信で時間のかかる処理などでは非常に重宝します。もし皆さんがvueを使っているのであれば、
Electronをバージョンアップしたらjsのネイティブモジュールが読み込めなくなった話
Electron9にバージョンアップしたところ、
途中でアプリの画面が動かなくなってしまう(windowになにも表示がされない)障害が発生しました。## 原因
* Electron9から、[appallowrendererprocessreuse](https://www.electronjs.org/docs/api/app#appallowrendererprocessreuse)のパラメーターがデフォルトで true になってた
* これによって2回目に読み込まれた時に、jsのネイティブモジュールが読み込めなくなっていた## appallowrendererprocessreuse とは
([公式サイト](https://www.electronjs.org/docs/api/app#appallowrendererprocessreuse)より) Boolean値。trueのときは、レンダラープロセスが確実に再起動されるように、Electronが設定しているオーバーライドを無効にする。このプロパティは、レンダラープロセスで使用できるネイティブモジュールに影響する
との
create-react-appを使用したReactの環境構築(TypeScriptも)
# はじめに
久々、環境構築をしたのでまとめました。
今回はcreate-react-appを使用してreactの環境構築をしていきます
どなたかの参考になれば。# 環境
まずは作業を始める段階でのバージョンです。
homebrewは入っている前提で作業を進めていきます。|名前|version|補足|
|—|—|—|
|MacOS|10.15|Catalina|
|homebrew|2.5||
|node.js|12.9||
|yarn|1.22|stable|
|create-react-app|3.4||以下、今回インストールする物のバージョンです。
|名前|version|補足|
|—|—|—|
|nodebrew|1.0||
|node.js|14.10|stable 更新します|
|yarn|1.22|stable|
|create-react-app|3.4||## nodebrewのインストール
まずhomebrewを使用して、nodebrewをインストールしていきます。
既にnode.jsが入っているので必要ないといえ
【Node.js】dotenvを使用して環境変数を設定&設定した環境変数をHerokuにも適用する方法
node.jsで環境変数を設定する場合、
「dotenv」を使用すれば楽に設定することができる
色々と遠回りというか勘違いをして時間がかかってしまったのでメモ#手順
1. ルートディレクトリに「.env」という名前のファイルを作成
2. ターミナルにて“ $npm install dotenv –save “を実行
3. 1で作成した.envに環境変数として使用したいkey&valueを以下のように記載“`js:.env
NODE_USER_ID=12345678
NODE_PASSWORD=abcdefgh
“`
4.環境変数を使用したい箇所に以下のように記載“`js:app.js
require(‘dotenv’).config();
let userId = process.env.NODE_USER_ID;
// 12345678
console.log(userId);
“`以上の手順で環境変数を設定できます。
※.gitignoreに .envを追記するのを忘れないようにしてください。
記載済みであれば大丈夫です。あくまでもローカル上での設
YouTubeから動画をダウンロード(youtube-dl)
この方法はかなり安定して動画のダウンロードができます。動画ダウンロードサービスで四苦八苦するよりこちらがおすすめです。
コマンドラインで動作するためプログラムの機能として組み込むのも比較的容易です。
##youtube-dlとは
[youtube-dl](https://github.com/ytdl-org/youtube-dl) は、YouTube.com やその他のサイトから動画をダウンロードするための**コマンドライン**プログラムです。Pythonインタプリタ、バージョン 2.6、 2.7、 3.2+ が必要で、プラットフォームに依存しません。UnixでもWindowsでもmacOSでも動作します。パブリックドメインに置かれているので、変更したり、再配布したり、好きなように使うことができます。
##youtube-dlの使い方
コマンドラインで使います。“`shell:書式
youtube-dl [OPTIONS] YouTube動画のURL [URL…]
“`“`:使用例
$ youtube-dl https://www.youtube.c
【Node.js】JSON文字列をCSVファイルとして吐き出す
### 要件
・DBに格納されているデータをCSVでダウンロードできるようにする
・データはユーザーが回答したアンケートの結果### 使用したモジュール
・json2csv
https://www.npmjs.com/package/json2csv## 開発
### 1. データの成形今回は、ユーザーが回答したアンケート結果をCSVとして出力したいと思いますので、表示する項目を`ユーザー名`、`メールアドレス`、`アンケート設問`、`回答結果`とします。
“`js:データを成形する
// DBから出力したいデータを取得する
const data = await getData.getUserData(user_id);// データをJSON型に整える
const groupData = data.reduce((result, current) => {
// user_idごとにデータをまとめる
const element = result.find((p) => {
return p.i
Node.jsで扱うよく扱うデータ形式の基礎知識
##JSON
ご存知、[JSON(JavaScript Object Notation)](http://json.org/json-ja.html)形式。
[JSONオブジェクト](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON)は、標準ビルトインオブジェクトなので特別な準備なしで手軽に扱うことができる。###サンプル
“`javascript:JSONの例
{
“browsers”: {
“firefox”: {
“name”: “Firefox”,
“pref_url”: “about:config”,
“releases”: {
“1”: {
“release_date”: “2004-11-09”,
“status”: “retired”,
“engine”: “Gecko”,
“engine_version
Macのターミナルからhttp-serverコマンドを使って Webサイトを検証できるようにした
Macが突然壊れたので新しいMacを購入した。
現在、Webサイトを運営中でそれの更新作業を新しいMacでしようとした時に、ローカル環境で検証できないようになっていた。具体的には、ターミナルでhttp-serverコマンドを打ってもエラーが出てくる。
新しいMacを購入してから環境構築をして無いねんから、そりゃ当然ですね。とうことで、環境構築をすることにしましたが、ちょこちょこ詰まったので、ここに残しておきます。
主にこちらの記事を参考にさせていただきました。
https://qiita.com/standard-software/items/1afe7b64c4c644fdd9e4#とりあえずhttp-server コマンドのインストール
とにもかくにも、まずインストールを試みる“`
% npm install http-server -g
“`しかし、下記応答が。。。
“`
zsh: command not found: npm
“`#command not found: npmと出た時の対処
npmコマンドが使えないよ。とのことなので、以下の
Sequelize で名前を指定してmigrationをrollbackする
“`
sequelize db:migrate:status // でmigration nameの一覧表示
sequelize db:migrate:undo –name// rollback
“`
マネーフォワードクラウド請求書から案件データぶっこ抜いて、Exmentに突っ込み簡易SFA/CRMを行う
SaaSのサービスをAPI同士で繋いで、業務改善アプリ的なものをつくるのが近年の趣味な筆者です。こんにちは。
## マネーフォワードクラウド請求書 is 何?
マネーフォワードクラウドは、freeeと人気を二分する、中小企業やフリーランス向けのSaaS会計システムです。筆者は会社勤務の傍ら副業もしてますので、マネーフォワードクラウド確定申告というのを使って、毎年確定申告をしています。また、関連サービスとしてマネーフォワードクラウド請求書(以下MFクラウド請求書)というサービスもあり、これを使って見積書と請求書を発行しています。
本稿とは別の余談になりますが、なかなかよく出来たサービスですので、請求書発行のサービスを探しておられる方は一度トライアルされてみてはいかがでしょうか。
## Exment is 何?
Exmentは、OSSのWeb DBシステムです。SaaSではありませんが、筆者はLightSail + Dockerというクラウド環境で試験運用しています。
詳しくは下記記事をご参照ください。
– [kintoneクローン? OSSWebDBのExmentをLig
同僚の作成したdockerコンテナをbuildする際にコケたポイントメモ
## 初めに
同僚が作成してくれたnodeのdockerコンテナをbuildする際に何点かコケたポイントがありましたのでメモしてみます。
同様のケースで嵌っている方がいたら参考になれたらと思います!## 前提
__コンテナを作成してくれた人のPC__
Mac Pro
こちらの環境では一発`docker-compose up –build`を流せばbuildとupが通る
__私のPC__
Windows10 Pro
npm –version
6.14.5
数回コケる
__コンテナの構成__
Node→image: node:latest
MySQL→image: mysql:5.7
Nginx→image: nginx:latest## Cannot create container for service mysql: Conflict
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285286/4fe419ee-32b4-0aae-f188-ad9216f737a8.png
え!? わずか3分でローカルにTypeScriptの実行環境を!?
できらぁ!(様式美)
ということでローカルにTypeScriptの実行環境を作ります。すぐできます。
TypeScriptを使うだけなら、[TypeScript playground](https://typescript-play.js.org/)等を使えばいいと思うのですが、「○○のパッケージを試したい。ついでだからTypeScriptも使いたい」という欲張りさんはローカルに環境構築したくなることもあるでしょう。え? codesandbox? 知らんなぁ。
とにかくローカルにTypeScriptの実行環境を作っていきます。ゴールは「コンパイルして出来たjsファイルをnodeコマンドで実行するところ」までです。
# 事前準備
以下は事前に準備できてるとします。出来てない方は適当にググってください。– node, npm(yarn)
# ローカルにTypeScriptの実行環境を作成
ここから本題です。
あと私はyarn派なのでyarnを使います。## プロジェクトの作成
プロジェクトディレクトリを作成して、package.jsonを作りましょう。“`bash
無料でSSR・ホスティング・API鯖を立てれるVercel。GitHub Actionsで自動デプロイ。
あらかじめローカルでプロジェクトを作っておく
## 環境変数
VECEL_TOKEN → コンパネのSettings→Tokens
VECEL_ORG_ID → .vercel/project.jsonに書いてる
VECEL_PROJECT_ID → .vercel/project.jsonに書いてる## ソースコード
デプロイするファイル
“`public/index.html
Document
hello
“`“`..github/workflows/main.yml
# 何でもいいから名前をつける。今回はCI
name: CI#
MATERIAL-UIのMultiple SelectでChipから選択を解除する
#はじめに
React + Typescript + MaterialUIでフロントエンドを作成していたときに実現したいことができなかったので参考程度に投稿します。##実現できなかった原因
Chipの×ボタンを押してもSelectのメニューが出てきてしまう##実現したいこと
MaterialUIの公式ドキュメントに書かれていた「[Multiple Select](https://material-ui.com/components/selects/#multiple-select)(Chip)」でChipの×ボタンからも選択を解除したい!
![last.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/649992/ac949482-f666-a4cf-818b-bb90520def46.gif)#結論
Chipコンポーネントに以下プロパティを追加“`react
onMouseDown={(event) => {event.stopPropagation();}}
“`#前提条件
社内ネットワークからIBM Watsonにつながらない
#はじめに
社内ProxyのおかげでIBM WatsonのAPIが通らかったので対処法を記載します。
(今回はWatson Discoveryです)#結論
node-sdkのところに書いてありました。:open_hands:
[Use behind a corporate proxy](https://github.com/watson-developer-cloud/node-sdk#use-behind-a-corporate-proxy)“`
npm install tunnel
“`#前提条件
+ Node v10.16.3
+ npm v6.9.0
+ IBM CloudのWatsonDiscoveryのサービスが既にあり、collectionが作成済みであることDiscoveryについてはこちらの記事が参考になると思います。
Discoveryってなんぞ?という方はまずこちらの記事を見ることをおすすめします。
[【2019/2月 全面更新!】Watson Discovery Serviceが日本語対応したので、触ってみた【SDUやってみた】編](htt
【AWS】【Lambda】 SalesforceのREST APIを呼び出す
– 表題の通り、LambdaからSalesforceのREST APIを呼び出してみます
– Lambdaの言語はNode.jsを使用します## Salesforce接続アプリケーションの設定
– 外部サービスとSalesforceを接続する際にOAuth認証を使います
– OAuthの設定をするには、Salesforceで接続アプリケーションの設定を行います### 設定方法
– Salesforceにログインした後、[設定]>[アプリケーション – アプリケーションマネージャ]と選んで
– [新規接続アプリケーション]ボタンをクリックします
– 以下を入力します
– 接続アプリケーション名
– 適当に「AWS Lambda」とでも
– API参照名
– 自動入力されます
– 取引先責任者メール
– とりあえずシステム管理者のアドレスにしておきましょう
– OAuth設定の有効化
– チェックします
– コールバックURL
– 今の所は適当に
– 選択