- 1.
- 1.0.1. [TypeORM] jsconfig.jsonエラー
- 1.0.2. React とか Vue とか Webpack とかで混乱している人のための現代フロントエンド開発入門
- 1.0.3. Node.js モジュール?なにそれおいしいの?
- 1.0.4. Google Nest Hubに、WebRTCで映像配信してみた
- 1.0.5. ubuntu 20.04でnpmがaptで導入できない場合の対処方法
- 1.0.6. 【npm】キャッシュが壊れてnpm installに失敗する
- 1.0.7. JavaScript: 画像から色を抽出してくれるColor Thief
- 1.0.8. Windowsでnodenvのインストールをするときに躓いたこと
- 1.0.9. NodeJS+Parcelでjavascriptのタイムリーなデバッグを可能にする
- 1.0.10. Node.js fsモジュール a
- 1.0.11. 文字コードを指定してハッシュ値を算出する(Node.js)
- 1.0.12. Node.jsとは
- 1.0.13. 現役、理学療法士が姿勢の画像を送るとその姿勢について教えてくれるLINE botを作った
- 1.0.14. 自作のnpmパッケージをGitHub Packagesにworkflowで登録する(初心者)
- 1.0.15. APIトークンなしでslackの絵文字(emoji)を一括エクスポート&インポートする
- 1.0.16. Windows 10 + Node.js + VSCode で React の開発環境を準備する
- 1.0.17. node.js超入門ノート2(Express導入編)
- 1.0.18. Base64でエンコードされたバイナリデータをデコードしてバイナリデータとして別サーバーに中継する方法
node.js超入門ノート4(データを扱う機能編)
# クエリーパラメーターを扱う
routesのhello.jsを以下のように修正します。“`javascript:routes/hello.js
var express = require(‘express’);
var router = express.Router();/* GET home page. */
router.get(‘/’, (req, res, next) => {
var name = req.query.name;
var mail = req.query.mail;
var data = {
title: ‘Hello!’,
content: ‘あなたの名前は、’ + name + ‘。
‘ + ‘メールアドレスは、’ + mail + ‘です。’
};
res.render(‘hello’, data);
});module.exports = router;
“`
以下のアドレスにアクセスします。
?以降はクエリーパラメーターになります。http://loc
node.js超入門ノート3(Webページ追加編)
# Webページの追加
まずはテンプレートファイルを作成します。
viewsフォルダに以下のファイルを追加します。“`html:hello.ejs
<%= title %>
<%= title %>
[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 complication
not foundって怒られてるけど、/home/filename/node_modules/source-map/source-map/にファイルはある。
##対処方法
VSCodeを再起動したら直った
React とか Vue とか Webpack とかで混乱している人のための現代フロントエンド開発入門
## 序論
本稿は [元市役所職員がWEBプログラマに転職するまでのロードマップ](https://qiita.com/amenoyoya/items/3b63a3fead17bc656f34) の連載記事の一部です。
本稿は、Node.js ベースの現代的フロントエンド開発についてまとめた入門記事です。
主に以下のような方を対象としています。
– HTML, CSS, JavaScript を使った基本的なWebフロントエンド開発ができる方
– Node.js ベースの最近のフロントエンド開発について、情報が多すぎてよく分からなくなっている方
– React や Vue といった最近のフロントエンドライブラリを使った開発に興味のある方## Webフロントエンド開発の歴史
1991年に Web (World Wide Web) がインターネット上に誕生した当初、Web は文書閲覧のためのものでした。
そのため、現在我々が利用するような SNS や Google Maps のようなインタラクティブコンテンツ(ユーザと Web が対話的にやりとりするようなコンテンツ)は存在
Node.js モジュール?なにそれおいしいの?
駆け出しエンジニアのNode Tutorial学習メモです。
解説するより見て学べ!というニュアンスのまとめとなりました。
実際にコードを読み解いていくと感覚的に理解できるはずです。
学習に使ったサイトはこちら!
→[Node.js Tutorial – W3Schools](https://www.w3schools.com/nodejs/)##目次
[1.ダウンロードからHelloWorldまで](https://qiita.com/Nakazawa-musc/items/de4f1733504ab27cc86e#1%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89%E3%81%8B%E3%82%89helloworld%E3%81%BE%E3%81%A7)
[2.モジュールとは?](https://qiita.com/Nakazawa-musc/items/de4f1733504ab27cc86e#2%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB%E3%81%A8%E3Google Nest Hubに、WebRTCで映像配信してみた
Google Nest Hubは、Googleが提供するスマートディスプレイです。
「OK Google」ができる上に、ディスプレイがついているので、いろいろ役に立ちそうです。ということで、ディスプレイがついているので、映像配信をしてあげようと思います。映像配信と言えば、最近はやりのWebRTCを使います。
Googleのスマートディスプレイで、WebRTCを配信するために、以下を試してみました。
①Googleスマートホームとしてカメラを実装する。
②GoogleアシスタントのInteractive Canvasを使う。①が、もともとやりたかったことです。
Smart Home CameraStream Trait Schema
https://developers.google.com/assistant/smarthome/traits/camerastream?hl=ja
上記のページを見ると、スマートホームのトレイトであるCameraStreamがWebRTCが対応しているではないか。。。。
結論からいうと、うまく動きませんでした。
対応デバイスとして、smubuntu 20.04でnpmがaptで導入できない場合の対処方法
# はじめに
Ubuntu20.04にてReactの環境を再度構築しようとして、[Ubuntu20.04に最新のnode.jsとTypeScriptをインストールする方法](https://qiita.com/reoring/items/a91959eaccd74d058f1f)あたりを参考に`apt get`してみたが、以下のように`npm`導入でエラーになる事があってInstallできなかった。ちょこっと調べて解決したので、備忘録として残しておく。
“`bash:aptでnpmをInstall
sudo apt-get install npm
パッケージリストを読み込んでいます… 完了
依存関係ツリーを作成しています
状態情報を読み取っています… 完了
インストールすることができないパッケージがありました。おそらく、あり得
ない状況を要求したか、(不安定版ディストリビューションを使用しているの
であれば) 必要なパッケージがまだ作成されていなかったり Incoming から移
動されていないことが考えられます。
以下の情報がこの問題【npm】キャッシュが壊れてnpm installに失敗する
# はじめに
久しぶりにcreate-react-appを叩いたら、失敗しました。
調べたことを簡単にメモメモ。
※認識間違っている所があれば、ご指摘お願いします。# 現象
下記コマンド実行時にエラーが発生。
コマンド:
`npx create-react-app {プロジェクト名} –template typescript`エラー:
`ERR! cb() never called!`環境は以下の通り。
・OS :Docker上のUbuntu:20.04
・nvm :0.38.0
・node:14.17.4
・npm :6.14.14# 原因
[まとめてくださっている記事](https://qiita.com/holdout0521/items/ebf836fc11e864177628)によると、どうやらnpmのキャッシュの不具合らしい。(キャッシュが壊れている?)
この現象は`create-react-app`に限ったものではなく、`npm install`でも発生するそうです。#### npmのキャッシュとは?
[npmのDoc](https://docs.JavaScript: 画像から色を抽出してくれるColor Thief
[10 Trending projects on GitHub for web developers – 13th August 2021](https://dev.to/iainfreestone/10-trending-projects-on-github-for-web-developers-13th-august-2021-4bf2) で紹介されていた Color Thief というもの。
https://lokeshdhakar.com/projects/color-thief/#examples
https://github.com/lokesh/color-thief
「例」引用:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/6e985eb5-208e-b8b0-7432-396c3d40d91f.png)## 画像から色を抽出してくれる Color Thief
![image.png](https://qiita-image-store.s3
Windowsでnodenvのインストールをするときに躓いたこと
「りあクト!」を読みながらWindowsで環境構築するときに初心者の私が躓いたことを紹介します。
## どのシェルを使えばいいのかわからない
これは Windows Terminal の Ubuntu を使えばよい。
この Ubuntu で anyenv のソースの取得と nodenv のインストールをする。
ちなみにユーザー名はエクスプローラから「//wsl$/Ubuntu/home/」を開けば確認できる。## anyenv: command not found
nodeenvをインストールしようとしたらこのメッセージが出た。
解決策 → 再起動##
NodeJS+Parcelでjavascriptのタイムリーなデバッグを可能にする
# はじめに
先日からTextAliveAppAPIの勉強をしており、APIの使い方まで分かるようになりました。しかし、実行環境がサンプルのままだったので、少し気持ち悪かったのです。そこで今回、自力で環境を構築しようと試み、苦戦し、理解したので記事にまとめたいと思います。# この記事の対象者
* かなり初心者
* nodeJSのインストールが完了している人
* TextAliveAppAPIの開発環境を自前で作りたい人この記事は、nodeJSのインストールが完了しており、`npm`コマンドが使用できる方が対象です。また、ゼロからjavascriptの環境を構築する手順を書きます。かつ、TextAliveAppAPIのサンプルと同じ開発環境を整える手順で書きます。筆者の実行環境は、Windows10です。一応注意してください。
# この記事から得られる事
* javascriptのデバッグがタイムリー(保存→自動で反映)に行える
# 要約
NodeJS上にparcelをインストールし、parcelからファイルを起動する。# parcelの「? ホットモジュールリ
Node.js fsモジュール a
まず最初に「fs」モジュールについて基本的な知識から身に付けていきましょう。
「fs」は、Node.jsでファイルを操作するための公式モジュールとして提供されています。ファイルを新規作成したり、読み込み・書き込みから追記・削除まで、一般的に必要な機能はあらかじめ用意されています。そのため、Node.jsが使える環境さえあればすぐにでも実行することが可能です。
一般的なJavaScriptではあまりファイル操作を扱いませんが、Node.jsの場合はよく使う機能なので慣れておくようにしておきましょう!
基本的なファイルの読み書きについて
コードを書く前に、fsモジュールをrequireすることを明記する。
こうしないと使用できない。“`
var fs = require(‘fs’);
“`このように記述することで、以降は「fs」を使ってさまざまなファイル操作のメソッドを使うことができます。
そこで、ファイルを読み込むための「readFile」メソッドの書き方を見ておきましょう!“`
fs.readFile(ファイルのパス, 文字コード, コールバック関数)
第1引文字コードを指定してハッシュ値を算出する(Node.js)
# Node.jsでハッシュ値を算出する
これは、私が業務でとあるAPIのリクエストを作成していた時のことです。そのAPIは、ある文字列からハッシュ値を算出して、
そのハッシュ値が一致するかどうかで認証を行っていたんです。だから以下のようなコードからハッシュ値を算出して、リクエストを投げて、
レスポンスを取得できていました。“`js
const crypto = require(‘crypto’);const data = ‘abcdefg’;
// ハッシュ値を算出(md5)
const hash = crypto.createHash(‘md5’).update(data).digest(‘hex’);console.log(hash); // 7ac66c0f148de9519b8bd264312c4d64
“`
ビルトインモジュールの`crypto`を使うだけでハッシュ値を算出できるなんて、手軽でいいなあと思っていました。
何も問題は無かったんです。ハッシュ値を算出する文字列に、**マルチバイト文字**が含まれるまでは…。
## hash.up
Node.jsとは
参考サイト: **[Qiita: Node.jsとはなにか?なぜみんな使っているのか?](https://qiita.com/non_cal/items/a8fee0b7ad96e67713eb)**
## Node.jsとは、「サーバーサイドのJavaScript実行環境」のこと
Node.jsとは、「サーバーサイドのJavaScript実行環境」のことです。
WindowsにPythonをインストールすると「python.exe」ができるように、Node.jsをインストールすると「node.exe」ができます。
node.exeはJavaScriptコードを実行するアプリケーション(つまりJavaScript実行環境)です。## Node.jsを使う3つの理由
あらゆる場面で最新のjacascriptで開発ができます。### 理由1. 最新のjavascriptを古いブラウザでも動かせる
node.jsは、Babelというコンパイラを動かすための、環境を提供します。
Babelは、「最新のjavascript(ES6)」を「旧仕様のjavascript(ES5)現役、理学療法士が姿勢の画像を送るとその姿勢について教えてくれるLINE botを作った
#あなたの姿勢、本当に正しいですか?
どうもです。筆者は、都内の整形外科病院に勤務している、**現役、理学療法士**です。
理学療法士は、一言で言うと**「リハビリ」**の人って感じですが、**人の動きをみる専門家**でもあります。日々、リハビリ業務を行う中で、首の痛みや、腰の痛みを訴えている患者さんに**姿勢指導**を行うことがあるのですが、その時に初めて自分の姿勢が誤っていることに気がつく方が多くいます。
**「え、私これがいい姿勢だと思っていました。」**
** 「これだとなんか変に感じるんですが、これが正しい姿勢なんですね」**
一般の方の認識と、専門家からの評価が**乖離しているケース**が多くあるなーと日々感じていました。
テクノロジーを使って簡単にこの基準を整備できれば、姿勢から起こる疼痛を防ぐことが可能なのではないのかなーと感じ、開発しました。
このボットが正しい姿勢が気になる人への手助けとなればと思います。注意)このボットはあくまで参考程度に作成したもので、正確な診断ツールではありません!
最終的な診断については、おかかりいただいた先生にお伺い自作のnpmパッケージをGitHub Packagesにworkflowで登録する(初心者)
Node.jsを利用して書いた自作のコマンドラインツールをnpm installして使えるようにしたくて、npmパッケージを作って[GitHub Packages](https://docs.github.com/en/packages)に登録することにしました。が、ドキュメント読んでもやり方が飲み込めず、試行錯誤。なんとか実現できたので、ここに手順のメモを残します。
npmパッケージを作るためのソースとして、”hello world”を出力するだけの小さなJavaScriptプログラムを使います。本記事で作成したリポジトリはこちら:
https://github.com/kazhashimoto/hello**実行環境**
– macOS Big Sur 11.5
– Node.js 16.4.0
– npm 7.18.1
– git 2.30.1 (Apple Git-130)[^1]
– エディタ: Atom 1.58.0[^2][^1]: macOSプリインストール版のgitです。Atom内蔵のgitは別に存在します。
[^2]: v1.58.0現在、Atom内蔵のAPIトークンなしでslackの絵文字(emoji)を一括エクスポート&インポートする
# はじめに
Slackの絵文字を一括エクスポートする方法で、SlackのAPIトークンを取得して行う方法があります。ですが、APIトークンの取得面倒くさいよくわからないという方(私です)向けに、APIトークンなしで一括エクスポートする方法を紹介します。
Slackにログインさえしていればできます。
# やり方
## 1. ワークスペースの絵文字を一覧取得する
Slackの左上のワークスペース名をクリックし、ワークスペースのカスタマイズをクリックします。
![スクリーンショット 2021-08-14 0.27.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1050360/ee0c1fe3-23de-0db3-6dc3-e76b989831d0.png)すると次のような絵文字管理画面がブラウザで開かれるので、ネットワークを開いて「emoji list」と検索してください。emoji.listへのPOSTリクエストがあり、その応答にJSON形式で全ての絵文字があります。この「emoji」の
Windows 10 + Node.js + VSCode で React の開発環境を準備する
## はじめに
Javascript というかフロントエンドが苦手なので、UIフレームワークのひとつである React を触りながら、少しずつ仲良くなっていこうと思います。
まずは環境の準備から始めてみます。最終的には以前開発したホロジュールアプリのリニューアル版の開発に繋げていきたいです。
## 利用する環境
下記構成の環境を利用しました。
* Windows 10 Pro 21H1
* Visual Studio Code 1.59.0
* PowerShell 7.1
* Git for Windows 2.32.0.windows.2## Reactとは
[React](https://ja.reactjs.org/) は、フロントエンドのユーザーインターフェイスを構築するためのオープンソースの JavaScript ライブラリ
完全なアプリケーションフレームワークを提供する他の JavaScript ライブラリとは異なり、React は、状態を維持し、UI 要素を生成する **コンポーネント** と呼ばれるカプセル化されたユニットを使用してアプリケーションビ
node.js超入門ノート2(Express導入編)
# Expressとは
node.jsにおけるWebアプリ開発のフレームワークです。
今回はExpressのひな形と基本的なパッケージが用意されている、Express Generatorを使います。# Express環境構築
前回のDockerでの環境構築で導入済みですが、まだの人は以下のコマンドでExpress Generatorをインストールしてください。“`
npm install -g express-generator
“`次にひな形を作成します。
“`
express –view=ejs [アプリ名]
“`
–view=ejsの指定でテンプレートエンジンの指定になります。
HTMLと似た言語であるので今回はEJSを使います。(デフォルトはJade)次に必要なパッケージをインストールします。
“`
cd [アプリ名]
npm install
“`
先ほど作成したひな形の中のpackage.jsonをインストールします。以下のコマンドでアプリケーションを起動します。
“`
npm start
“`以下のURLにアクセス出来れば導
Base64でエンコードされたバイナリデータをデコードしてバイナリデータとして別サーバーに中継する方法
# 概要
node.jsを使ってWebsocketクライアントから流れてきた、Base64形式のバイナリデータをバイナリ形式に直して別のサーバーに中継する実装をやった時のメモ# 構成
クライアント → 中継サーバー(今回の実装) → 解析サーバー# 実装
“`node.js
var WebSocketServer = require(‘websocket’).server;
var WebSocketClient = require(‘websocket’).client;
var http = require(‘http’);var clientConnection;
var wsserver = http.createServer(handleRequest);var server = new WebSocketServer({
httpServer: wsserver,
autoAcceptConnections: true,
});client.connect(‘ws://localhost:8000′,’echo-protocol’);
cli関連する記事
OTHERカテゴリの最新記事
-
- 2024.09.19
JavaScript関連のことを調べてみた
-
- 2024.09.19
JAVA関連のことを調べてみた
-
- 2024.09.19
iOS関連のことを調べてみた
-
- 2024.09.19
Rails関連のことを調べてみた
-
- 2024.09.19
Lambda関連のことを調べてみた
-
- 2024.09.19
Python関連のことを調べてみた