- 1. サンプル
- 2. ソース
- 2.2.1. 【個人開発】地域の魅力を発信できるデジタルパンフレットサービス「Openパンフレット」を作った
- 2.2.2. Slackの古い投稿を自動定期削除する
- 2.2.3. devツールで、ページ上にDOMを大量に複製したいとき
- 2.2.4. Node.js で標準入力から同期的に一行読み取る
- 2.2.5. 【JavaScript】変数について
- 2.2.6. JavaScriptを基本からまとめてみた【17】【try-catch｜エラーハンドリング】
- 2.2.7. ReactコンポーネントのonClick内で使うループカウンタ変数は必ずlet宣言しよう
- 2.2.8. グラフ表示 入れたgemはChartkickですが、グラフ描画はchart.jsで書いています。
- 2.3. 初めに
- 2.4. Javascriptの記述
Nest-js Headerデコレータのカスタム
###### tags: `nest-js`
“`typescript
import { createParamDecorator, ExecutionContext,BadRequestException } from ‘@nestjs/common’
import * as admin from ‘firebase-admin’export const CustomHeaders = createParamDecorator(
(data: string, ctx: ExecutionContext) => {
const req = ctx.switchToHttp().getRequest()
const value = req.headers[data].split(‘Bearer ‘)[1]return admin.auth().verifySessionCookie(value, true).then((decodedClaims) => {
return decodedClaims.user_id
Node.js（axios）からDirectCloud-BOX APIでファイル一覧の取得とnode話
一連の記事の流れになります。
– [紙で申請を出す居酒屋店員のシフト希望と管理業務をちょっとスマートにする](https://qiita.com/n0bisuke/items/0c6d6a236b31e3897d41)
– [Node.js（axios）からDirectCloud-BOX APIでファイルのDL #linedc](https://qiita.com/n0bisuke/items/0aec6dc65a1fc0b4c5b5)
– [Node.js（axios）からDirectCloud-BOX APIでファイルアップロード](https://qiita.com/n0bisuke/items/35659ffdf00f2158da98)同じような書き方にはなるのですが、DirectCloudのAPIのドキュメントは注意といった記事です。
また、タイトルにあるnodeはNode.jsの話ではないです。
## ファイル一覧取得を試す（GET/POST）
`/openapp/v1/files/index/{node}`でファイルの一覧を照会できます
> [APIリ
【Ruby on rails】JavaScript 非同期通信のコメント機能でエラーメッセージを出す バリデーション
初めに
非同期通信でのコメント機能は実装ずみで、「40１字以上のコメント」はNGというバリデーションは、
かけていたものの、エラーメッセージが出るようにしていませんでした・・・。
少し実装に苦労はしたものの、非同期通信への理解が深まったのでまとめていきます！！
バリデーションをかけておく
“`perl:app/models/post_comment.rb
class PostComment < ApplicationRecord default_scope -> { order(created_at: :desc) }
# あるコメントに紐づくユーザーも記事も１
belongs_to :user
belongs_to :postv
動画IDからサムネイル、nocookieのurlを取得する
前回の記事で動画のIDを取得する方法をご紹介しました。
今回はこの動画IDでどの様なことができるかを実際に見ていきます。https://qiita.com/gatolife/items/c372e41a0065c5d91387
“`javascript:index.js
//ex) console.log(change_to_img_url(“-mMmOKHzuWc”);
//前回の get_video_id 関数を使用すると
// console.log(change_to_img_url(get_video_id(“https://www.youtube.com/watch?v=-mMmOKHzuWc”)));// といったことができる
const change_to_img_url = (id) => {
id = “http://img.youtube.com/vi/” + id + “/mqdefault.jpg”;
return id;
}const change_to_nocookie_url = (id) => {
YouTubeの動画のIDを取得する
動画のIDを取得することで、
動画のurlに応じてサムネイルを変更したり、
YouTubeが提供しているyoutube.nocookie.comにて動画を見ることが容易になります。
（説明下手くそ・・・）
動画のIDの使い方はまた別の日に紹介します。“`javascript:get_id.js
//—注意：関数として使ってください—///
// ex) console.log(get_video_id(“https://www.youtube.com/watch?v=-mMmOKHzuWc&list=PLRBp0Fe2GpgmsW46rJyudVFlY6IYjFBIK&index=1”));//PC版サンプルurl
//https://www.youtube.com/watch?v=-mMmOKHzuWc&list=PLRBp0Fe2GpgmsW46rJyudVFlY6IYjFBIK&index=1//短縮url版サンプルurl
//https://youtu.be/-mMmOKHzuWc?list=PLRBp0Fe2GpgmsW46rJyudVFlY6IYjF
【JavaScript】データ型とは
#はじめに
こんにちは。JavaScriptを学習中の佐藤です。
今日は、データ型についてアウトプットしていきます！##データ型とは
データの分類のことで、数値型や文字列型などのデータ型がある。また、JavaScriptは「動的型付け言語」とも呼ばれ、変数に格納された値によってデータ型が定義される。実際のコードでみてみましょう。
“`javascript:JavaScript
let width = ‘wide’; //文字列型で定義
width = 1200; //数値型に変更される
“`というように、後から代入された値によってデータ型が変更される。
また、変数の型はtypeof演算子を使って確認できる。“`javascript:JavaScript
let width = ‘wide’;
console.log(typeof width); //string（文字列型）width = 1200;
console.log(typeof width); //number（数値型）
“`
一方、「動的型付け言語」とは反対に、1度定義
LINE BotのNode.js SDKでプロフィール取得のメモ #linedc
userIdからプロフィールを取得したいってのをちょくちょく使うけど忘れるのでメモ
> [SDKのサンプルコード](https://github.com/line/line-bot-sdk-nodejs/blob/next/examples/kitchensink/index.js#L118-L130)
`client.getProfile()`を利用します。
“`js
const profile = await client.getProfile(event.source.userId);
console.log(profile);
“`“`
{
userId: ‘Ubxxxxxxxxxxxxxxxxxxxxxx’,
displayName: ‘n0bisuke’,
pictureUrl: ‘https://profile.line-scdn.net/ch/v2/p/xxxxxxxxxxxxxxxxxxxxxxxx/exist’,
statusMessage: ‘こんにちは’,
language: ‘ja’
}
“`## コピペ用: リプラ
シンプルアナログ時計
本当にシンプルな時計が欲しくて作ってみました。
画像群は Google図形描画 で作成。
jsなのでローカルPC時刻に依存。サンプル
ソース
analogue.htm
<html>
<head>
<title>
<style>
img{width: 860px;height: 860px;}
#base {width: 860px;height: 860px;position: relative;}
.clock {
position: absolute;
top: 0px;
left: 0px;
}
.clock_hour_shd {
position: abso
【個人開発】地域の魅力を発信できるデジタルパンフレットサービス「Openパンフレット」を作った
# はじめに
* デジタルパンフレット作成公開サービス **[Openパンフレット](https://open-pamphlet.com)** をリリースしました。
* 個人開発です。
* バックエンドはだいたいAWSです。
* Android未対応?https://open-pamphlet.com
バックエンドの技術者がフロントやらインフラやらアプリやら色んな所に手を出して作ったシステムになっています。
記事本文はZennで書いているので[こちら](https://zenn.dev/ymasutani/articles/42fb40f4e00f1d)です。
# 宣伝
Android版の開発のためクラウドファンディング募集しています。
よかったら見て下さい。励みになります。https://camp-fire.jp/projects/view/467291
Slackの古い投稿を自動定期削除する
# やりたいこと
Slackの特定のチャンネルに投稿された発言を定期的に削除したい# 仕様とか
* 投稿から一定時間経過したSlackの発言を削除する
* 一度に削除できる投稿数には上限がある (https://api.slack.com/lang/ja-jp/rate-limit)
* サーバーレス (GASを利用)
* パブリック・プライベートチャンネル両方対象
* ユーザー権限で実行するためSlackAppのTokenを発行するユーザー自身に投稿削除権限が必要# 手順
## Slack側の設定### 1) Appの作成
Slack API のサイトに行き、右上の `Your apps` からApp管理ページを開く
https://api.slack.com/
`Create New App` からAppの作成
devツールで、ページ上にDOMを大量に複製したいとき
自分用備忘録。
#結論
① 複製したいDOMをChromeのdevツール Elementタブで特定
② １でみつけた要素を右クリック→Copy > Copy Element
③ devツールのConsoleで以下スクリプト実行```console.js
const newElm = document.createElement('p'); // 適当なタグでおｋ
const target = document.getElementById('**任意のid**'); // 大量に複製する要素のブチ込み先
newElm.innerHTML = '**②でコピーしたやつ**';
// 1000件ブチ込む
for(let i=0;i<1000;i++){target.appendChild(newElm.firstChild.cloneNode(true))} ``` #あとがき cloneNode(true)だと内包する要素までコピーしてくれる これに気づかなくて地味にハマった 特定のページだけゴリゴリに重いなーってことがあったので、検証用に作った。 もっといい感じのやり方が
Node.js で標準入力から同期的に一行読み取る
# 前座：既存の手法（非同期 or 入力全行）
主に競技プログラミングなどのシーンで標準入力からデータが受け渡されることは多いです。競技でなくとも、同様の形式でコーディングテストが行われることもあります。
こういったときに Node.js だと少し煩雑な手順を取る必要があります。
## `readline`
https://nodejs.org/api/readline.html#readline_readline_createinterface_options
```js
const rl = require("readline").createInterface({
input: process.stdin,
output: process.stdout,
});const lines = [];
rl.on("line", (line) => {
lines.push(line);
// ... 多分入力処理
});rl.on("close", () => {
// 入力が閉じたのでデータは受け取った
// データを全て受け取った前提の
【JavaScript】変数について
#はじめに
はじめまして。
エンジニア転職に向けて学習中の佐藤です。
このQiitaでは、学習中のアウトプットや、同じところでつまずいてしまう駆け出しエンジニアに向けて発信していきます！誤った情報がありましたら、ご指摘いただけると幸いです！
##変数について(let,const,var)
letは値を再代入できる。```js:JavaScript
let width = 1280;
whidth = 640;
console.log(width); //640が出力される
```
一方、constは値を再代入できない。定数と呼ばれる。
値を変えないものに上書き禁止のものに関しては、constを使用する。```js:JavaScript
const height = 680;
height = 340;
console.log(height); //エラーになる
```
varはletと同じように値の再代入ができるが、ES6のアップデート以降は使用されていない。```js:JavaScript
var width = 1280;
whidth =
JavaScriptを基本からまとめてみた【17】【try-catch｜エラーハンドリング】
##はじめに
####学習するに至った経緯
2020年より、未経験からエンジニアへの転職を目指し、某プログラミングスクールへ通う。入学後、『Ruby』を未経験から学ぶ人が多いのと『Ruby』の求人が思っていた以上に少ないので、卒業後、フロントエンドのエンジニアを目指す事に。
Javascriptの学習した事を言語化し、認識の深化による備忘録として記載。##「try...catch文」とは
『try...catch文』は、予想していない異常によりエラーが発生するような場面で意図的に回避するための処理。
##「try...catch文」の使い方
tryブロック内に例外エラーが発生する可能性のある処理を記述し、例外が発生した場合にはcatchブロック内の処理が実行される。 catchブロックの引数にはErrorオブジェクトが渡される。
```sample.js
try {
//例外エラーが発生する可能性のある処理
} catch(error) {
//例外エラーが起きた時に実行する処理
}
``````SampleExample.js
try {
ReactコンポーネントのonClick内で使うループカウンタ変数は必ずlet宣言しよう
#はじめに
letではなくvarで宣言してしまったfor文中の i (ループカウンタ変数) をReact コンポーネント中のonClick内で使用したところ挙動がわからずハマったので備忘録として共有します.
そもそもループカウンタをvarで宣言するなんて危険なことするなよ, と今では思いますがハマって初めて両者のスコープの違いを骨身に染みるほど理解できました.```
【動作環境】
Rails 6.1.4
react-rails の gemを使用
```#1. varで宣言しためにうまく動作しなかったコード
propsで配列を受け取り, それを全て一覧で表示させるため以下のようなコードを書きました.
期待する動作としては, ボタンをクリックするとそのボタンの値がhookで宣言したclickedContentという変数に代入され表示されるというものです.```react
import React, { useState } from 'react';function Example() {
const [clickedContent, setClickedC
グラフ表示 入れたgemはChartkickですが、グラフ描画はchart.jsで書いています。
初めに
今回は、こんな感じで棒グラフと、折線グラフを実装しました。
以前、以下の記事で折線グラフは作成済みではあり、
やり方はほとんど一緒です。
この記事ではグラフのコードの解説のみなので、
gemの導入、投稿数の取得方法については以下の記事をご確認ください。
ユーザーがもらったいいね数の取得方法については追って記事を作成する予定です。https://qiita.com/ki_87/items/37e9f42c118f87416aa6
https://qiita.com/ki_87/items/c105fd2661b5f25836ea
Javascriptの記述
turbolinksを無効にしなくてもグラフは表示できました。
一応、chart
【React Hooks】useMemoとuseCallbackの違い
#概要
Hooksを使っていて、useEffectはシンプルな仕組みで割と早い段階で理解できたが、useMemoとuseCallbackの使い分けやメモ化？？？という状態だったのでなんとなく使い分けられるようになってきた今、初心者なりにまとめておこうと思う。##useMemoとuseCallbackの共通点
そもそもメモ化っていうのが分からなかった。
ただ、めちゃくちゃシンプルで、本当にそのままの意味だった。ただ処理を軽くする？快適にする？(ここら辺はまだ本当のところちゃんとわかっていない。) ために、結果を保存しておくらしい。
と書かれていたのを最初読んでもよくわからなかった。(自分は)
今思うと関数とほぼ同じという理解でここは良さそう。##useMemoとuseCallbackの違い
ココが重要で、
useMemoは、処理の結果だけ保存して、
useCallbackは、処理の内容を保存する。例えば、
a=10
useMemo = a*2
useCallback = a*2だとして、useMemoは20を持っていて、 useCallbackはa*2を持っているら
Couchbase Server SDK解説：データ一貫性(Consistency)への配慮
#### 分散アーキテクチャーにおけるインデックス
Couchbase ServerとRDBMSとの違いとして、メモリーファーストアーキテクチャーがあります。
メモリーファーストアーキテクチャーは、永続化装置および複製（レプリケ）の作成が、アプリケーション（への応答）性能のボトルネックになることを回避するための仕組みです。そのための仕組みとして、Couchbase Serverは、ノード内部でディスクへの書き込みのためのキューを持っています。また、他ノードへの複製（レプリカ）のためのキューメカニズムとして、Data Change Protocol(DCP)と呼ばれる仕組みを持っています。
このDCPは、レプリカのためのみではなく、クラスター内部でデータの変更を他のノードやサービスに反映するために広く利用されます。（Dataサービスにおける）データ変更のインデックスへの反映もその一つです。#### インデックス更新から見るCouchbase ServerとRDBとの違い
Couchbase ServerとRDBとの違いをこの観点から見ることができます。データを更新する際には、関係
Chrome 拡張機能の CORS エラーを回避（Manifest V3）
# とても嬉しいので記事にする
**CORS = オリジン間リソース共有（Cross-Origin Resource Sharing）**
ざっくり言うと、ページに使用するソースは自分とは異なるオリジン (ドメイン、プロトコル、ポート番号) から参照する事はできませんよ、というもの。
詳細は他に良い記事が沢山あるので割愛します。で、本題。Chrome 拡張機能のマニフェストバージョンを３にすると、以前はできなかった CORS 回避が簡単にできるようになりました。
これの何が嬉しいのかって言うと、**『拡張機能の`background.js`などから外部の REST API を叩こうとすると、API 側が`Access-Control-Allow-Origin`ヘッダーを返すようにしていない限り、CORS エラーで取得できなかった』**り、**『API が JSONP に対応していればそれを使って取得』**していたのが解決できる、と。
こりゃ嬉しい。もしかしたら、私が知らなかっただけで出来ていたのかもしれませんが、散々ググった結果、出来ないとの結論に落ち着いていたので、簡単
JavaScriptでテトリスを作成して学んだこと
#目次
[はじめに](#はじめに)
[学んだこと](#学んだこと)
[1.型var、let、constの違い](#1-型varletconstの違い)
[2.キャンバス用意の方法](#2-キャンバス用意の方法)
[3.JavaScript二次元配列初期化の方法](#3-javascript二次元配列初期化の方法)
[4.Mathオブジェクトのメソッド](#4-mathオブジェクトのメソッド)
[5.Contextオブジェクトのメソッド](#5-contextオブジェクトのメソッド)
[6.Contextオブジェクトのプロパティー](#6-contextオブジェクトのプロパティー)
[7.undefined判定について](#7-undefined判定について)
[8.setInterval、clearIntervalの使い方](#8-setintervalclearintervalの使い方)
[9.innerHTMLの使い方](#9-innerhtmlの使い方)
[10.ボタンの実装方法](#10-ボタンの実装方法)
[作成したテトリスのソースコード](#作成したテト
