Corredor

ウェブ、プログラミングの勉強メモ。

npm

wsl-open:WSL で xdg-open する

デスクトップ環境を持つ Linux において、MacOS の open コマンドに相当することをやる際は、xdg-open というコマンドが使える。 一方、WSL を CUI でのみ使っている場合は、xdg-open では Windows 側の GUI アプリでファイルを開けない。 そこで使えるのが …

イマドキは Webpack じゃなくて Rollup だ!Terser とともに Rollup を使ってみる

Webpack なんかと同じビルド・バンドルツールの Rollup を使ってみる。 Rollup と Webpack の違い Transpiler と Minifier との区別 Rollup を試してみる Rollup の設定ファイルを作る Terser を組み込む : rollup-plugin-terser Rollup と Webpack の違い …

イマドキは Uglify JS じゃなくて Terser だ!Terser を使ってみる

JavaScript の圧縮・難読化で知られる uglify-js は ES2015 に対応しておらず、別ブランチで開発されていた ES2015 対応版の uglify-es は開発終了しているらしい。 そんな uglify-es を Fork して誕生したのが、terser というツールだ。 terser - npm $ npm…

GitHub Actions から FTP 転送する

自分のメインサイト Neo's World は GitHub で管理しているが、ファイルの FTP 転送は手動で行っていた。 github.com 一応 npm スクリプトを用意してコマンドラインから FTP 転送したりできるようにはしていたが、完全自動化したくなり、GitHub Actions でコ…

GitHub Actions の進行状況を CLI で確認できる hukum を使ってみる

またもや GitHub Actions の話。 GitHub Actions の動作を確認したくて、git push した直後に GitHub の画面を開いたりするが、もっとサクッと見たいところ。 そこで、GitHub Actions の進行状況を CLI で確認できる hukum を試してみた。 GitHub - abskmj/h…

npm publish を自動で行う GitHub Actions の作り方

npm publish を自動で行う GitHub Actions を作ったので、その作り方を紹介する。 npm のトークンを取得する GitHub の Secrets に npm トークンを登録する npm publish する GitHub Actions Workflow npm のトークンを取得する GitHub Actions から npm pub…

GitHub Package Registry に npm パッケージを Publish してみた

普段 npm パッケージを利用する際は、registry.npmjs.org という npm 公式のレジストリからダウンロードしている。 参考:npm-registry | npm Documentation npm レジストリは npm 公式以外にも存在し、GitHub にも GPR : GitHub Package Registry というレ…

「n」を使って Ubuntu 環境で Node.js をバージョン管理する

Node.js 本体のバージョン管理ツールとして、自分は Windows では Nodist MacOS では Nodebrew を使い続けている。 neos21.hatenablog.com Nodebrew は Linux にも対応しているので、WSL2 Ubuntu や CentOS で使っても良いだろう。 GitHub - hokaccha/nodebr…

package.json から拾った URL をブラウザで開く npm パッケージ「@neos21/opu」を作った

Node.js 開発をしていて、「この作業ディレクトリに対応する GitHub リポジトリをブラウザで開きたいなー」とか、「このプロジェクトの GitHub Pages を直接開きたいな」とか思うことがよくある。 GitHub リポジトリの情報は、大抵 package.json の homepage…

Node.js で Git 操作。simple-git を使ってみた

Node.js プログラムの中で Git 操作をする必要が出た。そのようなライブラリはいくつかあるようだが、simple-git というライブラリが手っ取り早そうだったので紹介する。 simple-git - npm GitHub - steveukx/git-js: A light weight interface for running …

Node.js アプリを無料でデプロイ出来る Glitch を試してみた

Node.js アプリをデプロイ出来るサービスといえば、Heroku だったり、Azure App Service なんかの PaaS が有名であろう。しかし、Azure は有料だし、Heroku の無料枠は起動時間に制限があったりして少々使いづらい。 GitHub Pages は静的ページのみでサーバ…

Node.js で排他制御。async-lock を使ってみた

Express サーバのとあるリクエストについて、同時にリクエストがあっても順に処理する必要が出た。すなわち、排他制御をかけ、同時に処理が行われないようにしたかったのだ。 それを実現してくれる async-lock というライブラリを見つけたので、使い方を紹介…

axios でエラーレスポンスを取得するにはどうしたらいいの?

非同期通信を簡単に実装できる npm パッケージ「axios」。 axios - npm 通常、レスポンスデータを取得する際は次のように実装する。 import axios from 'axios'; (async () => { const response = await axios.post('/api/login', { /* リクエストボディ */ …

TypeScript で ORM。TypeORM を使って PostgreSQL とやり取りしてみた

Node.js 上で使える O/R マッパーというと、以前 Sequelize というモノを紹介した。 neos21.hatenablog.com neos21.hatenablog.com コチラも MySQL や PostgreSQL など、色々な DB と接続できるマッパーだった。 今回見つけた TypeORM という O/R マッパーは…

TypeScript で Express サーバを実装するためのボイラープレートを作った

サーバサイド JS であれば、個人的には TypeScript がなくても書けるのだが、複数人で開発するとなると、型チェックを導入できた方が安全な実装になる。 ということで今回は、Express サーバを TypeScript で実装するためのボイラープレートプロジェクトを作…

Netlify Functions を使って複数の SNS にマルチポストする Function を作った

AWS Lambda とほぼ同等の機能を無料で利用できる、Netlify Functions。 今回はコレを使って、ブックマークレット形式で呼び出せる Function と、Slack の Slash Command として呼び出せる Function を2つ作ってみた。 どちらも、「オレオレマイクロブログ」…

無料で使える AWS Lambda:Netlify Functions を使ってみた

任意の関数をリクエスト単位で実行できる FaaS。最も有名なのは AWS Lambda だと思うが、コレとほぼ同じ機能を無料で利用できる Netlify Functions というモノを使ってみた。 Netlify に登録する Netlify Functions を使ってみる Git リポジトリを連携して N…

Create React App + TypeScript + SCSS 環境を構築してみる

2016年に create-react-app 単体で試したことがあった。 neos21.hatenablog.com あれから3年半が経過。React がもてはやされていた中で「Angular はちょっと重たいよねー」「とはいえ React も難解になってきたよねー」とか言っていると Vue.js の手軽さで S…

tiny-segmenter・kuromoji.js : JavaScript 製の形態素解析ツールを2つ使ってみた

形態素解析ツールというと MeCab が有名だが、コレはライブラリをマシンにインストールし、Python・Ruby・Java・Perl・Node.js 言語などにバインディングするライブラリを導入することで使える。機能的には十分便利だが、導入手順や言語の制約があり、ライブ…

htop と gtop を試してみる

リッチな top コマンドである htop と gtop を試してみる。 htop gtop htop htop は OS に応じてパッケージマネージャでインストールする。C 言語製。 $ brew install htop # MacOS $ sudo apt install htop # Ubuntu など $ sudo yum install htop # CentOS…

GitHub 管理している Angular 製のサイトを GitHub Pages で公開するための GitHub Actions

何回ギフハブ言うんやって感じのタイトルになってしまった…。 拙作の Angular Utilities は、コレまで $ npm run build $ npm run deploy とコマンドを実行することで、npm の gh-pages パッケージを利用して GitHub Pages にデプロイしてきた。 それを今回…

Node.js で電卓 CLI アプリを作った : @neos21/calc-cli

CLI で電卓を使いたくて、Node.js でサクッと作ってみた。その名も @neos21/calc-cli : node-calc-cli。 @neos21/calc-cli - npm GitHub - Neos21/node-calc-cli: @neos21/calc-cli : CLI Calculator $ npm install -g @neos21/calc-cli # 「calc」コマンド…

JavaScript コードをブックマークレットコードに変換する「Bookmarkletify」を作った

ブックマークレットを作る時、エディタで JavaScript コードを書き、それを難読化して縮めつつ、先頭に javascript: とプロトコルを記載したり即時関数で囲んだりする。コレを自動化するツールを作った。その名も @neos21/bookmarkletify。 既に類似パッケー…

docker-compose を使った Node.js・npm 開発環境構築例

Dockerによるアプリケーション開発環境構築ガイド【電子書籍】[ 櫻井 洋一郎 ]ジャンル: 本・雑誌・コミック > PC・システム開発 > その他ショップ: 楽天Kobo電子書籍ストア価格: 4,180円 docker-compose を使って、Node.js・npm の開発環境を構築してみる。…

GitHub Sponsors と npm fund を設定してみた

GitHub 上でスポンサーを募れる GitHub Sponsors というサービスと、npm で資金提供を呼びかけられる npm fund コマンドがそれぞれ提供開始されたので、セットで作ってみた。 GitHub Sponsors の登録方法 GitHub リポジトリごとに Sponsor ボタンを付ける np…

Instagram に投稿された画像・動画をダウンロードする CLI ツール「igsv」を作った

Twitter から画像・動画をダウンロードする @neos21/twsv という npm パッケージを作ったが、それの Instagram 版を作った。その名も igsv。「InstaGram SaVer」の略のつもり。 先に作ったツールの紹介 以降ツールを作るまでの苦労話 以上 先に作ったツール…

Twitter に投稿された画像・動画をダウンロードする CLI ツール「twsv」を作った

Twitter に投稿された画像や動画をダウンロードする際、 画像 : Chrome ブラウザでツイートを開き、画像をアドレス欄までドラッグして開き、ダウンロード 動画 : Syncer - Twitter の動画を保存するための URL 変換器でダウンロード としていた。 コレをもっ…

ターミナルからツイートするだけの CLI ツール「Just Tweet」を作った

ターミナルからツイートする CLI ツール、Just Tweet というモノを作った。 GitHub - Neos21/just-tweet: ツイートするだけの CLI ツール。 @neos21/just-tweet - npm インストールは以下のように npm でグローバルインストール。 $ npm install -g @neos21/…

色々な設定ファイルにプロキシ設定が含まれていないか確認するスクリプト

自分は、社内ネットワーク内で仕事をする時と、インターネットに直接繋いで作業する時とで、設定ファイルを使い分けている。.bashrc や .gitconfig、.npmrc などのファイルだ。 社内ネットワークで仕事する場合は、これらのファイルに社内ネットワーク向けの…

Prettier を ESLint と併用して使ってみた

コードフォーマッタである Prettier を使ってみた。ESLint と併用するための環境も作った。 大まかには以下の文献を参考にした。 参考:Prettier 入門 ~ESLintとの違いを理解して併用する~ - Qiita package.json と .eslintrc.js の内容は次のとおり。 Pra…