- 1. フロント開発で役に立つ、JavaScriptの関数についてのあれこれ
- 2. サブディレクトリでhuskyを使用する
- 3. Electron備忘録(for Windows)
- 4. Node.js 外部APIを実行してレスポンスをコンソールに出力する
- 5. TypeScript: ESモジュールのTypeScriptをNodeで直接動かす方法
- 6. twitter-api-sdkを使ってツイートの画像を日次で自動取得する
- 7. 【Node.js】Expressのroutesをいい感じにする(ディレクトリ・ファイルを追加するだけでrouteに登録されるようにする)
- 8. AWS SDK V3 のDynamoDBで、いくつか動作確認した話(AWS SDK V2 → V3 移行Tips)
- 9. Deno を使って Node でも Deno でも動くライブラリを作る
- 10. 誰でも作れるBetterJSONトランスパイラを作ってみる
- 11. TypeScriptでサーバーもフロントも書いてGraphQLするやつアドカレ25記事書ききった
- 12. ゆるやかにオンプレAPIをNestJS on ECSに移行して
- 13. Yarnのバージョンによってnode_modulesが作成されない件について(voltaを使用)
- 14. キャンパス内の独自通貨をオンライン化した話
- 15. Ubuntu22.04でのMineOS環境構築
- 16. AppsFlyer Push APIからのJSONデータを、Cloud Functionsで受け取り、Cloud Firestoreに流し込むまで
- 17. ワンコマンドで立ち上がるDApp開発環境をDockerで生成する(Truffle&Ganache)
- 18. 【完走賞ゲット-24】OpenAI の ChatGPT の API を公式ライブラリの JavaScript版 を試す(使い方を ChatGPT に聞いてみたりも)
- 19. ReactとGraphQLを使って作るTODOアプリ
- 20. Node.js ってなんだ?
フロント開発で役に立つ、JavaScriptの関数についてのあれこれ
## はじめに
日々フロント開発やコードレビューを行うなかで、「JavaScriptの関数について改めて復習、整理しておこう」と感じたので、まとめてみました。
フロント開発に関わっている方や、フロント開発を勉強中の方に読んでいただけたらと思います。## JavaScriptの関数の様々な仕組みや使用方法
### アロー関数
従来の“function“ではなく、“=>“を用いた関数宣言。
– 匿名関数
– 引数が一つの場合は“()“が省略可能
– 単一式の場合は、“{}“や“return“を省略できる“`js
// 従来の関数
function (a, b){
return a + b + 100;
}// アロー関数
(a, b) => a + b + 100;
“`:::note warn
**注意点**
thisやsuperへの結びつけを持たないので、メソッドとして使用することができなかったり、コンストラクターとしても使用することは出来ません。
:::### オブジェクトのプロパティに関数を入れる
関数はオブジェクトのプロパテ
サブディレクトリでhuskyを使用する
## TL;DR
– huskyの実行ファイルはGitの`core.hooksPath`で設定される
– Gitにはそもそもhooks機能があり、huskyはその実行ファイルを可視化しているだけ## 前置き
`husky`と呼ばれる、Gitのあらゆるアクションに付随してコマンドを実行してくれる便利な存在があります。代表的なものはpre-commitでlint等を動かしてくれるものでしょうか。lintはついつい実行し忘れてしまうので、commit前に自動で実行してくれると便利ですよね。
huskyはnpmモジュールなので、基本的にはnodeを使用するディレクトリでinstallすればよしなに使えるようになるのですが、`package.json`と`.git`を別階層に存在させたい、そんなときもあると思います。例えば、下記のようなディレクトリ構成を持つときです。
“`bash
$ tree
.
├── back
├── front
│ └── package.json
└── .git“`
このようなときに、`front`ディレクトリで`husky`をインストールす
Electron備忘録(for Windows)
# 初めに
NodeJS+HTML+CSSでアプリを作る,Electronの備忘録です.
アプリ作成中の詰まったポイントと,その解決策を記録します.
**※この記事は,私の体験に基づいた解決策を記載しています.
公式ドキュメントの見落としや仕様の勘違いによる,間違えた箇所や効率の悪い書き方があると予想されます.
使用する前に公式のドキュメントや他の方のQ&Aを参照し,正確な情報を得ることをお勧めします.**
## 実行環境
Windows
Electron 22.0.0# Main⇔Rendererの通信
Electron バージョン14でremoteモジュールが削除されて以来,レンダラープロセスでメインプロセスの関数をそのまま使うことは非推奨にんった.
preloadを介してメイン⇔レンダラーのやり取りを行う必要がある.
## 返り値のない送受信
メインからレンダラーへ,あるいはレンダラーからメインへ,メッセージを送るのみ.
返り値はなく,await,async等で待つことはできない.|通信の方向 |main.js|preload.js|備考|
|—–|—–|-
Node.js 外部APIを実行してレスポンスをコンソールに出力する
# 概要
– Node.jsにて外部APIを実行してレスポンスをコンソールに出力する方法をまとめる。
# 情報
– 下記サービスを用いてコードの動作確認を実施した。
– [https://codesandbox.io/s/node-playground-forked-8zdskb?file=/src/index.js](https://codesandbox.io/s/node-playground-forked-8zdskb?file=/src/index.js)# 使用する外部API
– Qiitaのユーザー情報を取得するAPIを実行してみる。
– [https://qiita.com/api/v2/docs#get-apiv2usersuser_id](https://qiita.com/api/v2/docs#get-apiv2usersuser_id)
– どうやら`https://qiita.com/api/v2/users/ユーザーid`とすることでユーザーの公開されている基本情報を取得する事ができるっぽい。
– 筆者の場合`https://q
TypeScript: ESモジュールのTypeScriptをNodeで直接動かす方法
TypeScriptをコンパイルのステップなしに、Node.jsで動かす方法として、よく知られているものに[ts-node]があります。ts-nodeはnodeコマンドのようなノリでTypeScriptファイルを実行できます。
“`shell
# JavaScriptファイルの実行
node hoge.js# TypeScriptファイルの実行
npx ts-node hoge.ts
“`ts-nodeがサポートしているのは、モジュールシステムがCommonJSのTypeScriptのみです。ES Modules(ESM)のTypeScriptはうまく動きません。
## tsxならESM版TypeScriptを動かせる
ts-nodeの競合ツールに、[tsx]というものがあります。これを使うと、ES ModulesのTypeScriptが楽に実行できます。
[tsx]: https://github.com/esbuild-kit/tsx
“`shell
npx tsx hoge.ts
“`ts-nodeで苦労して動かしていたESMが嘘のように簡単に動きま
twitter-api-sdkを使ってツイートの画像を日次で自動取得する
## はじめに
Twitterに上がっている推しの画像を保存したい!好きな絵師さんのイラストを毎回保存するのが面倒・・・
そんな悩みを持つ皆さんに朗報です。
TwitterAPIを使えば毎日自動で推しの画像を保存してくれるスクリプトを簡単に組めてしまうんです!## 1. TwitterAPIの申請
~~TwitterAPIは無料で始めることができますが、利用するには申請を行う必要があります。~~
Twitter API V2が標準となった今は申請不要、サインアップのみで利用を開始することができます。
既に利用可能なTwitterAPI開発者アカウントを持っている方はこのセクションは飛ばして大丈夫です。### 必要なもの
* Twitterアカウント
いわゆる鍵垢ではないパブリックなアカウントが必要です。
また、メールアドレス、電話番号の登録も必須となっています。
* やる気
~~申請周りは割と面倒なので頑張りましょう!~~### ~~いざ、申請~~ Let`s サインアップ!
まずは[Twitter 開発者プラットフォーム](https://developer.twitt
【Node.js】Expressのroutesをいい感じにする(ディレクトリ・ファイルを追加するだけでrouteに登録されるようにする)
## はじめに
Expressで実装する際、以下のようにrouterの実装を`src/routes`などに分けて実装する事はままあると思う。ただこの実装だと、`routes`を増やすたびに`app.user()`も必要になり、手間かつ冗長に思える。
“`js:./src/index.js
import express from ‘express’;// 省略
import router from ‘./routes/index’;
import shopsRouter from ‘./routes/shops’;
import searchRouter from ‘./routes/search’;
import accountRouter from ‘./routes/account’;// 省略
const app = express();// 省略
app.use(‘/account’, accountRouter);
app.use(‘/search’, searchRouter);
app.use(‘/shops’, shopsRouter);
app.us
AWS SDK V3 のDynamoDBで、いくつか動作確認した話(AWS SDK V2 → V3 移行Tips)
# はじめに
https://qiita.com/Syoji_Yonemoto/items/e619d8199b7c8354248f
V3移行の動作確認の初手に、Firehoseを選んだせいかもしれないですが、V2で使ってたメソッドの互換があるか保証がないことが分かったので、普段、Lambdaで利用するAPIについては一通り、動作確認をしていっています。
今回は、DynamoDB編です。
# 結論
DynamoDBに関しては、私が普段使うメソッド群については、問題ありませんでした。
# V2 と同じ使い方で問題なく動作確認できたメソッド
+ putItem
+ batchGetItem
+ query
+ updateItem
+ updateTable# 余談
性能試験や、TTL未実装の時などには、createTableやdeleteTableも実行していた時もありましたが、日常的に使う物でもなく、その時がきたら追試をします。# まとめ
DynamoDBくらい主要どころになると、しっかり下位互換もされているようです。
引き続き、小ネタシリーズとして、
Deno を使って Node でも Deno でも動くライブラリを作る
Deno アドベントカレンダー 24日目の記事です。
今日は Deno を使って Node でも Deno でも動くライブラリ(もしくはツール)を作成する方法を紹介します。
Deno 界隈では最近 npm 互換性機能がリリースされて、Deno から使えるツールが一気に増えたということで話題になっていますが、逆に Deno で作ったツールを Node/npm に対応させるという逆向きの互換性についても開発が進んでいます。
この記事では、Deno が公式で提供している [dnt](https://github.com/denoland/dnt) というツールを使う方法を紹介します。
https://github.com/denoland/dnt
dnt を使った場合の、Node と Deno 両対応の主な流れは次のようになります。
– まずは Deno で動くようにツールを作る (Deno に対応)
– dnt を設定して、ツールのエントリーポイントを Node 用に変換出来るように準備する
– dnt を実行して Node 用モジュールを指定のディレクトリに書き出す
– 書き
誰でも作れるBetterJSONトランスパイラを作ってみる
# 概要
(厳密な)JSONはイメージとは裏腹に手で書くには思ったより不便な仕様になっています。
– コメントが書けない。
– Trailing comma(末尾のカンマ) は認められていない。(=手で追加する際にカンマを意識する必要が出て面倒)
– (ダブルコーテーションの代わりに)シングルコーテーションは使えない。
– キー名もダブルコーテーションで囲む必要がある。などなど・・・
というわけで、JavaScriptのオブジェクト表記のようにゆるく書けてなおかつそのままJSONに変換できるトランスパイラを作ってみる。
# 誰でも作れる
ちょこっとコードを付けて`eval(new Function)`して`JSON.stringify`で出力するだけです。
node.jsなら追加のモジュール一切不要で実現できます。
“`bjson.js
const fs = require(‘fs’);if(process.argv.length < 3) { const path = require('path'); jsfile = path.basenam
TypeScriptでサーバーもフロントも書いてGraphQLするやつアドカレ25記事書ききった
[Next.js + サーバーサイドTypeScript + 関数フレーバーでクリーンなアプリを作ったので実装意図とか書く Advent Calendar 2022](https://qiita.com/advent-calendar/2022/shwld)
の**25日目**。[株式会社mofmof](https://www.mof-mof.co.jp/)に生息している[shwld](https://twitter.com/shwld)です。前日は[Next.jsとgraphile-workerをRailwayにデプロイする](https://qiita.com/shwld/items/49a310aadc0a34e2a721)について書きました
# TypeScriptでサーバーもフロントも書いてGraphQLするやつアドカレ25記事書ききった25記事を書ききったので、ふりかえって感想を書きます。
## 良かったこと
学んだ内容を無理やりアウトプットできた。
アドベントカレンダー25日分最初に埋めたので後戻りできないなという気持ちに
普段アウトプットあんまりしてないのでい
ゆるやかにオンプレAPIをNestJS on ECSに移行して
この記事はアイスタイル [Advent Calendar 2022](https://qiita.com/advent-calendar/2022/istyle) 25日目の記事です。
# はじめに
じゃんたま 雀士★1になりました。
はじめまして、アイスタイルT&C部に所属している[okashitay](https://qiita.com/y_okasuke)というものです。今回の記事では、こないだまでNestJSどころかNode.jsアプリケーションでの開発実績も特別ない者でしたが、ここに実体験を元に知見をいくつか残していこうと思います。
# NestJS採択の経緯
商品データ基盤APIは何らかの事情でPHP版とGO版が存在しています。
両方とも言語・フレームワークともEOL(End Of Life)に近い状態…2つのAPIのバージョンアップしつつAWSへ移行する労力、2種類の言語のAPIに機能追加・メンテナンスしていくことは開発者の負荷とAWS移行コスト&運用コストも高まるという状況を解消するため1つの言語に統一する方針へ、言語とフレームワークの最終的な決め手は公式ド
Yarnのバージョンによってnode_modulesが作成されない件について(voltaを使用)
## 起こった現象
* voltaでNext.jsの環境構築をした時、自動で作成されるindex.tsxで、import部分にエラー
* 「対応する型が見つかりません」ってずっと出る?
* node_modulesフォルダではなく、**「.yarn」フォルダが作成される**## 早速ですが結論から
エラーが起きた原因は、やはり**node_modulesが作成されていないから**みたいですすごくシンプル
本来は作成されるはずなんですが、なぜ作成されなかったか追っていきましょう!
## yarnのバージョンを確認
まずはyarnのバージョンを確認してみましたyarn -v
// 3.3.0バージョンは3.3.0と確認できました
yarnは、Home Brewで既にinstall済みの状態です
今回使用したかったバージョンは「1.22.19」だったので、voltaでyarnのバージョンを指定してみました
エラーが起こる段階でyarn installした時は、voltaにyarnのバージョンはしてしてなかったです
“`package.js
キャンパス内の独自通貨をオンライン化した話
# はじめに
この記事は、[N・S高等学校 Advent Calendar 2022](https://qiita.com/advent-calendar/2022/n-s-highschool)の25日目です。
はじめまして、N中等部通学コース4期生のTakuといいます。
今回は、キャンパス内で使われている独自通貨「吉」をオンライン化してみた話を書きまとめてみました。
ぜひご覧ください。
# 独自通貨とは
まず最初に、キャンパス内で実装されている独自通貨について説明していきます。
上の画像が紙幣の独自通貨で、一ヶ月に一回紙幣のデザインが変わっています。
# 完成品
できたものについて紹介します。
## Web UI
Ubuntu22.04でのMineOS環境構築# 初めに
MineOSというMineCraftサーバー管理ツールをご存じでしょうか?
WebUI上からサーバーの新規作成、起動、停止、定期バックアップなどいろいろできる便利ツールです。
昔から利用しているのですが毎回構築するたびにやり方を忘れるのでメモ程度に手順を残しておきます。以下公式サイト
https://wiki.codeemo.com/# 環境
今回はESXi8.0上のVMに構築
|項目|詳細|
|–|–|
|OS|Ubuntu22.04LTS|
|CPU|6vCPU|
|RAM|30GB|
|Storage|SAS HDD 100GB|# 構築
基本的には公式ドキュメント通りに進める
## UbuntuOSのインストール
割愛## curlのインストール
“`shell-session
user@localhost:~$ sudo apt -y install curl
[sudo] password for user:
Reading package lists… Done
Building dependency tree… Done
Re
AppsFlyer Push APIからのJSONデータを、Cloud Functionsで受け取り、Cloud Firestoreに流し込むまで
## 自己紹介
AppsFlyerというモバイル広告計測ツールの会社のソリューションアーキテクトです。前職ではIBMでデータエンジニアをやっており、DWHの構築などをネットワークやOSレベルのインフラレベルのこともやっていましたが、基本的にはオンプレだけでしたので、Google CloudやAWSのことをキャチアップしたいと考えているところです。参考: [AppsFlyerとそのアトリビューションの仕組み](https://qiita.com/maktag/items/0a6d9a3969393aa8dcb4)
AppsFlyerは計測ツールですので、そのローデータをお客様側に持ち出していただいて保管・分析いただくことは通常のユースケースになります。その連携方式の一つがPush APIという機能で、AppsFlyerから発生したイベントをリアルタイムで指定のエンドポイントにデータを送信できるというものなのです。
ただ、対面のお客様はエンジニアではなくマーケターの方だったりしますので「エンドポイントってそもそも何?」というような質問を多々受けることもあります。
「Googl
ワンコマンドで立ち上がるDApp開発環境をDockerで生成する(Truffle&Ganache)
# はじめに
DApp開発を学習するうえで簡易なものを作ってみようということで、環境構築から。
思っていたよりも簡単にできた。WSL2&docker環境を想定。
dockerの使い方的な説明には触れない。## 完成品のリポジトリ
https://github.com/PokoPoko2ry/dapp-sample
# 環境概要
Dockerでワンコマンドで立ち上がるよう各コンテナの定義をする。調べてみると、Solidity開発ならフレームワークとしてTruffleと
ローカルのブロックチェーンネットワークにGanacheがよいということで
これらを利用した環境を作成してゆく。
最終的な構成はこのような形“`
.
├── app
│ ├── build
│ │ └── contracts
│ │ ├── ConvertLib.json
│ │ └── MetaCoin.json
│ ├── contracts
│ │ ├── ConvertLib.sol
│ │ └── MetaCoin.sol
│
【完走賞ゲット-24】OpenAI の ChatGPT の API を公式ライブラリの JavaScript版 を試す(使い方を ChatGPT に聞いてみたりも)
## はじめに
こちらは、[完走賞ゲットのため小ネタを毎日投稿しようとチャレンジする Advent Calendar 2022](https://qiita.com/advent-calendar/2022/youtoy) の 24日目の記事です。今月のアドベントカレンダー用記事で、以下の 3記事で扱った OpenAI の ChatGPT の話です。
– [【KDDI Engineer&Designer】AI にブラウザ用の JavaScript のプログラムをいくつか作ってもらった話 ⇒ OpenAI の ChatGPT で生成されたプログラムの解析も少々 – Qiita](https://qiita.com/youtoy/items/8eacb1af28ac18301b74)
– [【完走賞ゲット-4】続・OpenAI の ChatGPT のネタ:JavaScript の特定の技術仕様を教えてもらう – Qiita](https://qiita.com/youtoy/items/a4d9f3b0736475d0770a)
– [【enebular 2022】ChatGPT用ノ
ReactとGraphQLを使って作るTODOアプリ
# はじめに
こんにちは,ペンギン丸です.学生兼フロントエンドエンジニアをしています.
本記事は私が来年からお世話になるDMM様の23卒アドベントカレンダー24日目です.何か書けるような技術無いかな〜っと考えたところ何も思い浮かばなかった為,
逆に全然分かってない技術(GraphQL)を使ってTODOアプリを作ることにしました.最近はお絵かきにかまけて技術の勉強をしてなかったので,手を動かして行きます!
# 本記事の目標「GraphQL? 何それ美味しいの?」って方でも
この記事通りに作業すればGraphQLを用いてTODOアプリが作れてしまい,何となくGraphQLが分かった気になれることを目標にします.GraphQLそのものに関する説明や,細かな用語の説明は他の方の記事に任せ,なるべく少ないコードで必要最低限のTODOアプリが作れたら良いなと思います.
張り切って行きましょう!# 前提条件
Node.jsとnpmは既にインストールされている前提で作業します.
また,本記事の大部分はApolloの公式チュートリアルを参考にしています.https://apo
Node.js ってなんだ?
「Node.js って結局なに?」
って急に聞かれても答えられない気がします。私は Node.js = JavaScript をサーバーで動かす環境、くらいの認識だったのですが、きちんと調べてみると間違っていたのでまとめていきます。
## Node.js とは
[公式ドキュメント](https://nodejs.dev/en/learn/) には以下のようなことが書かれていました。
– JavaScript の実行環境
– 拡張性の高いネットワークアプリケーションを構築できる
– Google Chrome のコアとなっている、(高速に動作する) V8 エンジンをブラウザの外で動かすことで高いパフォーマンスを実現している
– ほとんどの種類のプロジェクトに対応できる
– クロスプラットフォーム
– オープンソース
– スレッドを複数立ち上げることが重大なバグの原因となるため、シングルプロセスであり、非同期処理に対応
– JavaScript を書いていた人にとっては別言語を勉強せずにサーバーサイドの開発ができるメリットがある
– ブラウザのアップデートを待たずに新しい ECM