Windowsでnodenvのインストールをするときに躓いたこと
「りあクト！」を読みながらWindowsで環境構築するときに初心者の私が躓いたことを紹介します。 どのシェルを使えばいいのかわからない これは Windows Terminal の Ubuntu を使えばよい。 この Ubuntu で anyenv のソースの取得と nodenv のインストールをする。...
View ArticleJavaScript: 画像から色を抽出してくれるColor Thief
10 Trending projects on GitHub for web developers - 13th August 2021 で紹介されていた Color Thief というもの。 「例」引用: 画像から色を抽出してくれる Color Thief お試し。 <!DOCTYPE html> <html lang="ja"> <head> <meta...
View Article【npm】キャッシュが壊れてnpm installに失敗する
はじめに 久しぶりにcreate-react-appを叩いたら、失敗しました。 調べたことを簡単にメモメモ。 ※認識間違っている所があれば、ご指摘お願いします。 現象 下記コマンド実行時にエラーが発生。 コマンド： npx create-react-app {プロジェクト名} --template typescript エラー： ERR! cb() never called! 環境は以下の通り。...
View Articleubuntu 20.04でnpmがaptで導入できない場合の対処方法
はじめに Ubuntu20.04にてReactの環境を再度構築しようとして、Ubuntu20.04に最新のnode.jsとTypeScriptをインストールする方法あたりを参考にapt getしてみたが、以下のようにnpm導入でエラーになる事があってInstallできなかった。 ちょこっと調べて解決したので、備忘録として残しておく。 aptでnpmをInstall sudo apt-get...
View ArticleGoogle Nest Hubに、WebRTCで映像配信してみた
Google Nest Hubは、Googleが提供するスマートディスプレイです。 「OK Google」ができる上に、ディスプレイがついているので、いろいろ役に立ちそうです。 ということで、ディスプレイがついているので、映像配信をしてあげようと思います。映像配信と言えば、最近はやりのWebRTCを使います。 Googleのスマートディスプレイで、WebRTCを配信するために、以下を試してみました。...
View ArticleNode.js モジュール？なにそれおいしいの？
駆け出しエンジニアのNode Tutorial学習メモです。 解説するより見て学べ！というニュアンスのまとめとなりました。 実際にコードを読み解いていくと感覚的に理解できるはずです。 学習に使ったサイトはこちら！ →Node.js Tutorial - W3Schools 目次 1.ダウンロードからHelloWorldまで 2.モジュールとは？ 3.ファイルシステムモジュール...
View ArticleReact とか Vue とか Webpack とかで混乱している人のための現代フロントエンド開発入門
序論 本稿は 元市役所職員がWEBプログラマに転職するまでのロードマップ の連載記事の一部です。 本稿は、Node.js ベースの現代的フロントエンド開発についてまとめた入門記事です。 主に以下のような方を対象としています。 HTML, CSS, JavaScript を使った基本的なWebフロントエンド開発ができる方 Node.js...
View Article[TypeORM] jsconfig.jsonエラー
はじめに VSCodeでTypeORM使ってコード実装してるときに、jsonconfig.jsで原因不明のエラーが発生したのでメモ📝 エラー内容 File '/home/filename/node_modules/source-map/source-map/'not found.The file is in the program because: Root file specified for...
View Articlenode.js超入門ノート3(Webページ追加編)
Webページの追加 まずはテンプレートファイルを作成します。 viewsフォルダに以下のファイルを追加します。 hello.ejs <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="content-type"...
View Articlenode.js超入門ノート4(データを扱う機能編)
クエリーパラメーターを扱う routesのhello.jsを以下のように修正します。 routes/hello.js var express = require('express'); var router = express.Router(); /* GET home page. */ router.get('/', (req, res, next) => { var name =...
View Articlehtmlタグ、を表示されないようにしたい【Node.js】【 Express】【 ejs】
htmlタグが表示されてしまう Node.js Express ejsを使って、Webアプリを作成していた際、request.render()で飛ばした文字列が、そのまま表示されてしまった。 htmlと認識されるようにしたい。 ブラウザにこんな感じでhtmlタグが表示されてしまっている。 <h1>そのまま表示される<br>のを直したい</h1>...
View Article【2021年】Gulp4 インストールとSass,EJSの環境設定までの手順メモ
こんにちは、デザイナーの kanna です。 この記事はWEB制作の環境構築に初挑戦して学んだことをまとめています。 Gulp４についての内容になります。 バージョンの違いによって書き方が変わる部分があるのでご注意ください。 【環境】 ・macOS Big Sur v11.4 ・VScode v1.59.0 ・zsh そもそもGulpって何？...
View ArticleElectron + React + Django REST Framework でlocal GUI アプリを作る
Electron+react+django REST framework Local GUIアプリを作成する必要が出た際、言語の候補としては C#,python,Java などが上がってくることと思います。ただし、GUIの見た目がほぼWindows95時代のアプリのごとくいけていない。。。 そこでFrontをreactで、BackendをDjangoRESTFramework...
View Articlenode.js超入門ノート5(データベース データ表示編)
導入(データベース構築) データベースを導入します。 今回はSQLite3を使用するので以下のコマンドでインストールします。 apt -y update apt -y install sqlite3 次にファイルを作成します。 sqlite3 mydb.sqlite3 次のコマンドでテーブル、カラムを作成します。 create table mydata(id integer not null...
View Articlenode.js超入門ノート6(データベース CRUD編)
準備 viewsフォルダの中にhelloフォルダを作成します。 その後hello.ejsをhelloフォルダに移動し、index.ejsに名前を変更します。 hello.jsを以下のように修正します。 routes/hello.js // 変更前 res.render('hello', data); // 変更後 res.render('hello/index', data); レコードの新規作成...
View Articlenode.js + mysql (2021)
最近はmysql2というパッケージを利用するのがいいらしい。 特にasync/awaitを利用するときには。 準備 cd mkdir mysql2-test cd mysql2-test npm install mysql2 touch index.js 実装 index.js const mysql = require("mysql2/promise"); (async () => {...
View Article【GAS】clasp pushコマンド実行時に出たエラーの対処
User has not enabled the Apps Script APIというエラー GASをローカルで開発する際に便利なCLIであるclasp導入時に発生したエラー。 初期設定としてclasp loginが完了しているにも関わらず、clasp pushを実行すると下記エラーメッセージが表示されて、pushに失敗する。 GaxiosError:User has not enabled...
View Article超簡単！Mock API開発：json-serverを試す
今更ながらjson-serverを試します。 準備 node.jsが必要な以外は特にありません。 作業場作って（どこでもいいです）、json-serverをインストール。 cd mkdir mock-api cd mock-api npm install -D json-server" API定義（実装） 定義ファイル生成 jsonなら名前とかは何でもいい。 touch api.json...
View ArticleCodesandboxがうんともすんとも言わなくなったときの対応
Codesandbox。node.jsベースのサーバサイドコードも手軽に実行できるすごくいいサービスなのですが、大きな難点があるため実は最近あまり使わなくなっていました。 それは、 サーバサイド系は不安定で事実上使い物にならない という状態だったからです。...
View ArticleMongodbのfindOneで特定の要素だけ取り出す方法
初めに ずいぶん前に質問していた内容を自己解決していたのにクローズし忘れていたということに今頃(数カ月後)になって気がついたため、折角だしその解決法を記事にまとめようと書いております。回答して下さった@anonymouさんほんとごめんなさい。それと回答してくれてありがとうございます！ バージョン ・Node.js 15.11.0 ・MongoDB 4.4.6...
View Article