TypeScript な Express でAPI作ってエラーを返す処理を都度書いているとめんどいので、エラーハンドリングして返すようにしたメモ エラーハンドリングのミドルウェアはルーティングより後に書く 上から順番にルーティングにマッチしていくか見ていって、該当…

Express を TypeScript で作成していて開発中は nodemon で ts-node を使って変更を監視してホットリロードさせたかったのですが、ファイル変更が watch されない問題にハマったのでメモ。 構成 /project_root |- /src | |- index.ts |- package.json |- nod…

Redis との接続 const Redis = require('ioredis'); const redis = new Redis(); // docker などで動かしている場合は port host を指定する const redis = new Redis(6379, 'redis'); // 使用する db を指定する場合は、 オプションを使用 const redis = ne…

JWT token の勉強をしていて、Redis で token を管理しているという話を教えてもらったので Redis を使うだけの環境を作ってみていました。 Docker で環境を構築します 構成 / |- /api (express) | |- Dockerfile |- /redis |- docker-compose.yml docker-co…

Express で簡単な JWT の API を作って実験していた際に middleware を async function に変更したら UnhandledPromiseRejectionWarning が出るようになってハマってしまったのでメモ UnhandledPromiseRejectionWarning になったコード // router const rout…

運用している blog にリンク切れのものがそこそこあるので、リストアップして欲しいという依頼を受けてやってみた知見のメモ 方針 記事 URL から記事内容を取得 記事内から a タグを取得 a タグの リンク先にアクセスしてリンク切れになっているものをファイ…

yarn start してホットリドーロしてるターミナルを閉じてしまった。 止める npm script も作ってなかったので、ブラウザのタブを落としても処理が実行されて続けてしまう状態になってしまいました。 owata PID を探して kill する ターミナルでプロセスを探…

react-scripts で作成したプロジェクトで init で下記のようなオプションを選択して .eslintrc.js を作成しました。 $ yarn eslint --init ? How would you like to use ESLint? To check syntax and find problems ? What type of modules does your projec…

React のプロジェクトに ESlint + Prettier でフォーマットする仕組みを入れたのですが、npm script で lint を走らせようとしたら、パターンマッチしないというエラーが出て少しハマったのでメモ 問題の npm script // package.json "scripts": { "lint": "…

API KEY が必要な script タグを HTML に書く必要があって API KEY を直接書いたファイルを git にコミットしたくないので、gitignore した .env に変数として持たせて HTML に渡す方法のメモ JavaScript で .env を使う loadenv を使うと .env ファイルをオ…

build したディレクトリを削除したいとか rm -rf コマンドを npm script で呼ぶ # package.json "scripts": { "cleanup": "rm -rf build" } rimraf を使う rm コマンドがない環境だと上記は使えないので $ npm install --save-dev rimraf # package.json "sc…

$ npx create-react-app my-app で、Reactのプロジェクトを作成しようとしたけど、プロジェクトのフォルダが作成されてない現象になっていた。 その時のログはこんな感じ $ npx create-react-app my-app ... yarn add v1.16.0 [1/4] Resolving packages... …

こんにちは、Webpackでのbundle化初心者です。 今までgulpで分けたJSファイルをconcatして一つにまとめていました。gulpのconcatだとファイル名を01-みたいなprefixをつけて結合順をコントロールしてました。webpackだとその辺りも解決してくれるっぽいので…

node v11.4.0 fetchを使ったJavaScriptファイルをnodeの実行しようとしたらfetchなんて無いよってエラーになりました。 node.jsには現状デフォルトでFetchAPIが入っていないようです。 node-fetch を使う $ yarn add node-fetch JavaScriptファイルでnode-fe…

yarn runでローカルパッケージが実行できるのが便利でyarnをメインで使っています。 フリーランスで色々なプロジェクトに関わっていると、プロジェクトごとにモジュールのバージョンを揃えておいたほうが安全なので基本的にパッケージはプロジェクト配下(ロ…

node が実行されるようにすればOK "scripts": { "build": "node my_script.js" }

jQueryの$.ajax, XMLHttpRequest, FetchAPI, axios, superagentを簡単に試してみた

フロントエンドの制作とかで使えるAPIのモックアップにjson-serverってのが便利だよーって教えてもらったので使ってみた。 インストール $ yarn add -D json-server デフォルトのデータを作成 db.json { "articles": [ {"id": 1, "title": "json-server", "a…

リロードさせる関数があるので、gulpでwatchしている時など好きなタイミングでlocalhostをリロードさせることができるgulp-connectですが、リロードさせるタスクをまとめようとした時にチョットしたハマりどころが合ったのでメモ。 公式に書かれてるやり方 ‍…

gulpでサイト作る時のローカルサーバーに長らくgulp-webserverを使っていたのですが、CSSの変更時にhotreloadが上手く動作せず、リロードさせる関数も無いっぽかったので、reload関数が有り任意のタイミングでリロードさせることができるgulp-connectに乗り…

npm installせずにHTML表示できるnodeのサーバーを作ってみました。 server.js const http = require('http'); const fs = require('fs'); const path = require('path'); const port = 3000; const getType = (url) => { const extname = path.extname(url)…

node.jsでimport/exportで試そうとしてハマったのでメモ。 $ node -v v11.4.0 import / export を使っているファイルの拡張子は.mjsでないとエラー // moduleA.js export const hi = (name) => `Hi ${name}. `; // main.js import {hi} from './moduleA.js';…

ESLintをグローバルにインストール $ npm install -g eslint Sublime TextにSublimeLinterパッケージをインストール Sublime Textを起動しPackage Control(⌘+shift+P)を起動 Installと入力しInstall Packageを選択 SublimeLinterと入力しEnterを押してインス…

CSSプリプロセッサやタスクランナーなどフロントを触るにはnode.jsは必須になっているのでnodeが使える環境のセットアップも必須になってる感じです。 1. nodebrewのインストール node.jsのバージョン管理をするnodebrewをインストールします。 お好みの方法…

WEBサイトの制作のときならgulpでサーバー起動してCSS・JSを本番と同じようにコンパイルして確認するのが良いのですが、実験や学習用にでわざわざコンパイルまでしなくていいローカル環境が欲しかったのでexpressで作ってみました。 インストール $ npm inst…

gulp v4 で追加されたgulp.seriesとgulp.parallelを試してみた gulp.series(...tasks) ... 順番に実行する gulp.parallel(...tasks) ... 並列に実行をする GitHubのサンプル gulp.task('one', function(done) { // do stuff done(); }); gulp.task('two', fu…

ニッチ過ぎて一体どこに需要があるのか謎すぎるのですが、gulpでディレクトリ構造を保ったままリネームして出力する方法を試していたのでメモです。 stylusで試してますがpugやsass、jsファイルでも同じかと思います。 renameしない場合、パスの/**/の部分の…

nibだけだと今は不要になってるベンダープレフィックスも出力してしまうのでautoprefixerを使って対象ブラウザをコントロールするメモ node: v9.6.1 npm: v6.1.0 gulp@3.9.1 gulp-stylus@2.7.0 gulp-autoprefixer@2.3.1 nib@1.1.2 install $ npm install --s…

久々にnpm installしてgulpを動かそうとしたところ $ gulp [08:46:54] Using gulpfile ~/Documents/local/gulpfile.js /.nodebrew/node/v6.9.2/lib/node_modules/gulp/bin/gulp.js:129 gulpInst.start.apply(gulpInst, toRun); ^ TypeError: Cannot read pro…

pugでHTMLを生成する時、変数をコメントに含めて出力するのに少しハマったのでメモ 変数をコメントに含める方法 - var hello = "world"; | ↓ 又はpugの文字列展開の方法を使って - var hello = "world"; != `` ↓ NG集 - var hello = "world";