- 1. Nuxt.jsでルーティング
- 2. 正規表現と HTTP サーバーの組み合わせで起こる気付きづらい問題
- 3. MacにNode.jsをインストールする方法(2022/03)
- 4. Puppeteer + Node.js + Typescriptでサイトのデータを取得してみる
- 5. [Flutter] アプリからCloudFunctionsの関数に引数を渡す、返り値を受け取る
- 6. 初心者によるHTTP基礎概念勉強ノート＆Node.jsで簡単なサーバを作ってみた
- 7. JavaScriptのconstに関して
- 8. VoltaをinstallしたけどAngularが使えないんだけど
- 9. デジタル初心者でも「3日でWeb APIから得たデータで分析までできるのか」やってみた！
- 10. Oppkey DevRel 記事アーカイブ
- 11. あの夏Qiitaユーザーは何の夢を見たか。APIでエンジニアの脳内をワードクラウド化してみた！
- 12. EC2にnode.jsをインストール
- 13. nvmを使ってNode.jsをインストールする
- 14. Node-REDのテンプレートノードでスケープしたくないメモ
- 15. なぜWeb標準のAPIがいいのか改めて考える
- 16. Node-REDで今日の日付を日本語の表示形式で出す
- 17. WebSocket APIのフレームワークを作ってみた(Node.js)
- 18. Qiita民にとって最もアツい東南アジアの国とは
- 19. 初めてQiita APIでデータ取得したら、下衆な探偵になっていた
- 20. Node.jsでのReact環境構築
Nuxt.jsでルーティング
# ルーティング
Nuxt.jsはpagesディレクトリ配下にフォルダ作ってそこにindex.vue設置して上げると自動的にルーティングしてくれます。
便利便利。### ディレクトリ作成→中にindex.vue配置
こんなかんじで、プロジェクト生成時、デフォルトで生成される`[PROJECT]/.nuxt/pages`配下にnewPageをディレクトリを作成します。（.nuxtは隠しフォルダなので注意）
index.vueを作成します。“`vuejs:./newPage/index.vue
NewPage
“`
newPageに作ったindexの中身です。とりあえずタイトルだけ表示させやす。### 動作確認
`$ npm run de
正規表現と HTTP サーバーの組み合わせで起こる気付きづらい問題
まず、次のコードを見てください。
“`
const http = require(‘http’);
const url = require(‘url’);const regex = /^hoge$/g;
const server = http.createServer((req, res) => {
if (regex.test(‘hoge’)) {
res.end(‘hoge’, ‘utf8’)
} else {
res.end(‘hogeじゃない’, ‘utf8’);
}
});
server.listen(8000);
“`
この Node.js 向けのコードを実行すると HTTP サーバーが起動します。
どんなレスポンスが返ってくるでしょうか？“`
% curl localhost:8000
hoge
% curl localhost:8000
hogeじゃない
% curl localhost:8000
hoge
% curl localhost:8000
hogeじゃない
% curl localho
MacにNode.jsをインストールする方法(2022/03)
タイトルの部分、(2022/03)とか書くだけで少し悲しくなる。。。
「ああ、年取ったなって」まあ今回はNode.jsのインストールです！
Mac初期化したのでね。。。
最初からです。
今回は早く終わりそうでよかった。## Node.jsとは？
Node.jsが何かわからずに、必要だとわかったからインストールする人もいると思うので(AtCoder cliのために必要など)、駆る紹介します。
と思ったのですが、さすがはインターネットさん、めっさわかりやすい説明をしている記事を見つけたので載せておきます。https://qiita.com/non_cal/items/a8fee0b7ad96e67713eb
## Node.jsのダウンロード
https://nodejs.org/ja/[こちら](https://nodejs.org/ja/)のサイトからLST版(推奨版)をダウンロードして実行します。
最新版って書いてある奇数番号の方は約7ヶ月でどれもサポート終わるのでLST版の方がいいです。全肯定していけばインストールできます。迷う部分は特に無いと思います。
Puppeteer + Node.js + Typescriptでサイトのデータを取得してみる
### 下記のようにサイトに存在する文字列をpuppeteerを用いて取得することを目的としたコードを書いたのでアウトプットします。
取得したかどうかはターミナルにlogとして出力しました。:::note info
puppeteerのライブラリを使用すること事態は調べながら感覚を掴むことができました。
その中でも、メソッドの中でlogが出力できなかったため、なぜ出力できないのかを理解するのに時間がかかりました。evaluateメソッドで記述するコールバック関数は、ブラウザ内で実行されるため意図してターミナルにlogを出力することができないということが原因だったのかなと考えています。
そのため、取得したいデータの取得に時間がかかりましたが実装はできました。
Documentオブジェクトを用いてデータを取得する際はTypeScriptで型アサーションの方法をとらなくてはいけないので注意。
:::サイトに存在する文字列
[Flutter] アプリからCloudFunctionsの関数に引数を渡す、返り値を受け取る
Flutterのアプリ作成で実装したことです。
何回も使いそうなので忘れないように記事にしておこうと思いました。
`onRequest` と `onCall` で引数の渡し方、返り値の受け取り方が少し違います。
一度まとめておくと、次から調べる時間が短縮できるので。
このやり方以外にもあると思いますが、少しでも誰かのお役に立てれば、幸いに思います。
## onRequestの場合
CloudFunctionsの関数
“`typescript
import * as functions from “firebase-functions”;export const testFunction = functions
.region(“asia-northeast1”)
.https.onRequest(async (request, response) => {
const testVar = request.body.data.testVar; // requestに格納されている引数を受け取る…省略
response.sta
初心者によるHTTP基礎概念勉強ノート＆Node.jsで簡単なサーバを作ってみた
## HTTP基礎概念
### なぜネットの世界にはプロトコル(Protocol)が必要ですか？
– 規模化をする前提に、内容の統一や標準化が必要。（standardization）### 標準化した内容 Header & body
– Header
URL、メソッド（Method）、ステータスコード(Status Code)などの情報を伝える。
– body（HTMLのタグではない）
Response Bodyの内容、ソースコード。### よく見られる状態コード一覧
– **200 OK** リクエスト成功
– **204 No Content** リクエスト受理しましたが、返すレスポンスはない。
→ DELETEメソッドであるリソースを削除したが、返す内容がない。
– **301 Moved Permanently** リソースが恒久的に移動した。
→ GETメソッドで最初のヘッダから移動先のLocationを取得したら、そのあと同じウェブサイトにアクセスしても新しい移動先に移転される。
– **302 Found** リソースが一時的に移動された（**Mo
JavaScriptのconstに関して
## 初めに
現在、JavaScriptでvarを使用している箇所をconst、letに置き換えているが、具体的にどのような場面で使用できるかが気になった。constに関して参考文献から拝借した内容。
> 定数は、let キーワードを使って定義する変数と同様にブロックスコープを持ちます。定数の値は、再代入による変更ができず、再宣言もできません。
再代入、再定義は不可能であることが分かるが、配列へのプッシュやブロックがある場合の挙動が知りたかったのでアウトプットのため投稿する。
## 実行環境
■ Node.js
v11.1.0### 配列でconstを使用
新しい要素のプッシュは成功する。
“`js
const a = [];
a.push(“a”);
console.log(a);// 出力結果
[ ‘a’ ]
“`新しい配列を代入するとエラーになる。
“`js
const a = [];
a = [];
console.log(a);// 出力結果
TypeError: Assignment to constant variable.
“`
VoltaをinstallしたけどAngularが使えないんだけど
# Angularがインストールできない
Voltaをinstall時にAngualrがインストールできませんでした。
表示されたエラーは以下の通りです。
“`sh
C:\Users\○○>npm install –global @angular/cliadded 190 packages, and audited 191 packages in 30s
23 packages are looking for funding
run `npm fund` for detailsfound 0 vulnerabilities
Volta error: Could not create shared environment for package ‘@angular/cli’Please ensure you have correct permissions to the Volta directory.
Error details written to C:\Users\○○\AppData\Local\Volta\log\volta-error-2022-03-1
デジタル初心者でも「3日でWeb APIから得たデータで分析までできるのか」やってみた！
初めまして。
今回はタイトル通り、「3日でWeb APIから得たデータで分析までできるのかやってみた」編です。
一応過去に楽天APIを使ったことはあります！
[過去の記事はこちらをクリック](https://qiita.com/NagaharaHitomi/items/d7897363a2332338192e)ですが、自力じゃなかったんです。（バリバリ人の手借りました笑）
なので今回は「自力で作る！をテーマにやってみました」という記事です。
これからAPI初めて触るよ～という方はには是非参考にして頂ければと思います。# 3日後はどんな状態？一応立てた目標達成計画
3日というなんの根拠もない制限をつけたので、自分なりにスケジュールを立ててみました。1日目：APIを使用した真似したいQiita記事を見つける。
Visual Studio Codeを使ってデータを取得する。
真似したQiita記事（コード）を元に自分なりにアレンジする。
（休みの日なので、6時間くらいは制作に費やせる日！！）
2日目：得た情報を分析する。
（仕事の日なので2時
Oppkey DevRel 記事アーカイブ
https://dzone.com/articles/live-video-mobile-apps-with-flutter
https://dzone.com/articles/flutter-20-state-management-introduction-with-prov
https://dzone.com/articles/5-advantages-of-dart-over-javascript-python-and-ba
https://dzone.com/articles/open-networking-for-network-switches-how-the-open
https://dzone.com/articles/messageformat-is-working-hard-to-make-themselves-o
Node.js –>
https://dzone.com/articles/interview-with-bethany-griggs
https://dzone.com/articles/the-future-of-apis-and
あの夏Qiitaユーザーは何の夢を見たか。APIでエンジニアの脳内をワードクラウド化してみた！
# 人生初のAPIチャレンジ！
### 企画意図 「エンジニアがどんなことを考えている人たちなのか知りたい」
さて、私はプログラミングのプの字も知らないおじさんですが、プロトタイピングを学ぶことにしました。そして、はじめはAPIなるものに向き合うことにしたのですが、いろいろな疑問が湧いてきました。
「そもそも、QiitaAPIで何ができるの？」「エンジニアは、主に何を考えて生きているの？」と素朴な疑問が次々と。
そこで、まずは、投稿記事のタイトルをAPIで引っ張ってきて、ワードクラウドか何かに放り込んで、エンジニアの脳内を覗き込んでみることにしました。
ただ、あまりAPIでデータを引っ張ってくると、Qiitaに怒られるということなので、毎年のあの夏（8月）に投稿された記事タイトルを引っぱり分析することにしました。
そして、あの夏のワードクラウドを並べて、その時期にエンジニアを夢中にしていた事象を浮き彫りにできたらと考えています。いわばQiitaユーザの勝手流行語大賞（夏）を作るイメージです。
夏だから、きっと「サーフィン」とか「ナンパ」とか「花火」とか、そんなワードが上位
EC2にnode.jsをインストール
## 概要
デフォルト、EC2にnode.jsをインストールされてないですが、
今回ec2にノードバージョンマネージャー (nvm) でnode.jsのインストール方法を説明させて戴きます。# 手順
## ec2にアクセスして、ユーザーを切り替え
“`
sudo su –login ec2-user
“`## ノードバージョンマネージャー (nvm)をいンストール
“`
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash
“`## nvm を有効にする
“`
. ~/.nvm/nvm.sh
“`## nvm を使用して Node.js の最新バージョンをインストール
“`
nvm install node
“`## nodeバージョン確認
“`
$ node -v
v17.7.1
“`EC2に最新のnode.jsをインストールする事が確認できました。
nvmを使ってNode.jsをインストールする
## 環境
Ubuntu20.4## はじめに
nvmはNode.jsのバージョン管理ツールです。Node.jsをインストールする前に、nvmのインストールを先に行います。UbuntuにNode.jsをインストールするには、aptを使ってインストールすることになるが、バージョン管理を行いたい場合は、nvmを使ってインストールすることになります。Node.jsをお試し程度で使うのであれば、aptでインストールしてもいいのだが、長期的に使う予定があるのであれば、nvmを使ってインストールした方が、後々便利になるでしょう。
aptを使ってNode.jsをインストールするときのコマンドです。
“`
apt-get update
apt-get install nodeje
“`Rubyにはrbenvというバージョン管理ツールが存在するが、どのような言語にも、似たようなツールは共通して存在しているものです。Rubyのrbenvに該当するのが、Node.jsのnvmということになります。
## nvmをインストールする
ググるとnvmのインストール手順はたくさんヒットされる
Node-REDのテンプレートノードでスケープしたくないメモ
## 通常に書くとエスケープされてしまいます。
– テンプレートノード側
“`
https://www.switch-science.com{{path}}
“`> 
– 出力
“`
https://www.switch-science.com/catalog/7889/
“`> のほかに、固有のランタイムでしか使えない`fetch`や`process`などの拡張APIがあります。
この拡張API、ランタイムごとにいくつかの種類が存在します。例えば、
– Node.jsで使える[Node.js API](https://nodejs.org/api/)
– Denoで使える[Deno API](https://doc.deno.land/deno/stable/~/Deno)
– ブラウザなどで使える
Node-REDで今日の日付を日本語の表示形式で出す
“2022年03月16日”という形式で日付を出力します。
> 
参考記事をもとに[node-red-contrib-moment](https://flows.nodered.org/node/node-red-contrib-moment)を使ってみます。
> 参考: [Node-REDで日時取得とデータ結合](https://ameblo.jp/gameprograming/entry-12657550138.html)
## Date/Time Formatterノード
こちらを使います。
> 
# はじめに
REST APIはexpressとかフレームワークやライブラリが充実していて，簡単にAPIサーバが立てられます．
しかし，WebsocketでAPIを作ろうとするとそう簡単にはできません．(結構面倒です)
実際，[工期が短いのにWebsocketでAPIを作ってしまった](https://qiita.com/rubbishmt/items/9bfccb5bd1aca3bb7b24)ことがあり大変でした．
そこで，何とかexpressライクにAPIを簡単に実装できるような物があったらと思って今回このフレームワークを作成しました．## 開発環境
Node.js## 使用した技術とか
– websocket
– jsonrpc# 解説
## インターフェース
メッセージの送受信にはJSON-RPCという規格を採用しました．
その名前の通り，サーバにある関数をクライアントからJSON形式のフォーマットで呼び出すような規格です．
jsonrpcの例は以下の通りです.“`
—> {“jsonrpc”: “2.0”, “id”: 0, “method”: “sum
Qiita民にとって最もアツい東南アジアの国とは
# はじめに
こんにちは。ベトナム在住のたかけんです。
東南アジアの国々でもっとも日本のIT界隈に話題にされている国はいったいどこか。
技術記事が多いQiitaで関連記事が多ければその国はアツいといえるのではないか。。。ということで、Qiita APIで東南アジア各国を検索し、
記事数が最も多い国が優勝ということで、APIをたたいてみました。# エントリー
今回比較する国々はこちら。
“`node.js
let asia = [‘ベトナム’,’インドネシア’,’タイ’,’フィリピン’,’シンガポール’];
“`
- エントリーNo1 ベトナム
- 在日国籍が中国に次いで2位。国を挙げて日本語教育も
- エントリーNo2 インドネシア
- 人口が多い。人が多ければ技術が集まる
- エントリーNo3 タイ
- 日系企業が東南アジア進出する際のハブとなる国。在住日本人も多い
- エントリーNo4 フィリピン
- 英語ができるためオフ
初めてQiita APIでデータ取得したら、下衆な探偵になっていた
# 背景
取得データの読み方もそれをどう活用するのかもわからない。そんな私がまずはやってみようという試み。自分の興味に従い、楽しく体感＆理解！# 真面目に調べるつもりが、野次馬根性にあっさり負ける
私が今「ハーフミラー」を使ったメディアアート作品を作っているので、「ハーフミラー」というワードを使った記事を書いている人がどれだけいるのかな？と、まずは検索。
すると、記事を書いた人のLocation＝場所がわかることが判明。私と同じ対象、しかも多分Qiita内ではニッチであろうハーフミラーに興味を持ち記事にまでする人がどのエリアに出没しているのかが図らずもわかってしまい、俄然野次馬根性が湧く。
ここで興味の対象が、「ハーフミラー」から一転、「記事を書いた人がいるらしい場所」調べに。# 初手は真面目に「ハーフミラー」の記事検索／その方法
１．「ハーフミラー」と検索して出てくる記事の日付および件数をQiitaAPIで取得。思いのほか多かった。
２．さらに、記事を書いている人たちがどのエリアに生息しているのか覗き見ちゃう。どれどれ、みんなどこにいるんだ。# コード
まずはconsol
Node.jsでのReact環境構築
Node.jsからReactのサンプルページの表示までの一連の環境構築のメモ。
# Node.jsインストール
下記サイトからNode.jsをインストールする。
https://nodejs.org/ja/download/
基本デフォルトですべて「next」でインストールまで進む。
インストールされたNode.jsバージョンを確認。
“`
node -v
“`
※作者がインストール時では、v16.14.0 (2022/03/14時点)
これより新しいバージョンだったらうれしい。# Y
