JavaScript関連のことを調べてみた2022年02月06日

NextAuthを完全に理解する #1

# はじめに

最近，Next.jsを使ったwebアプリケーションを作り始めました．この中でログイン機能を付けたくてNextAuth.jsの導入をしたのですが，無知すぎて何をしているのかわかりませんでした．そこで，勉強を兼ねてここにドキュメントの内容を日本語訳して記しておきます．

# この記事の内容

この記事はNextAuthのドキュメントを私なりに解釈して書き留めたものです．いくつか誤りがあると思いますのでコメント等で指摘していただくと幸いです．
ドキュメントを読みたい方は以下からどうぞ．

https://next-auth.js.org

# NextAuthとは

>NextAuth.js is a complete open-source authentication solution for Next.js applications.
>It is designed from the ground up to support Next.js and Serverless.

Next.jsやSeverlessアプリのための完全なオープンソース認証ライブラリとのこと．
ま

Google Chat botがメンションするのに必要なUser IDを開発者コンソールに出力するスクリプト

Google Chatのbotがユーザーにメンションするには、そのユーザーの`USER_ID`を調べて、テキストメッセージに次のコマンドを埋め込む必要があります。

“`

“`
https://developers.google.com/chat/api/guides/message-formats/basic#messages_that_mention_specific_users

この`USER_ID`を調べるのがちょっと面倒です。
そこで、https://chat.google.com で開発者コンソールを開き、次のスクリプトを実行して表示することにしました。

“`javascript
for (let div of document.querySelectorAll(‘div[data-member-id]’)) {
const [name, status] = div.innerText.split(‘\n’);
if (name && status) console.log(`${name}, ${status}, ${di

Vueのhtml要素を参照する方のrefについて気づけなかった挙動について

# はじめに

　前回に引き続きVueのお話。これもまた挙動で悩んでいた問題。

　Composition APIでも引き続き有効なHTML要素自体を参照するref。Option APIの頃と違い、使い方はかなりスッキリしている。

“`javascript:test.js
const hogeelement = ref(null);
“`

“`vue:test.vue

“`

Option APIの頃は、やれ$refとしなきゃいけないとか少し気をつけないといけなかったが、Composition APIのほうだと他のリアクティブな変数と同様にref()（Vue.ref()）で使いたい名前で定義するだけ。

# 問題

　HTML要素自体を参照するref。なぜか参照できない問題にぶち当たった。
　リアクティブにも気をつけていたし公式のリファレンスを見て使い方間違っていないと確認したはずなのに。
　多数のプロパティといくつか参照が必要な要素があったのでオブジェクトに内包してまとめて管理して使いたかった

Google Mapのマーカーを好きな画像にして角丸にする【1日10行コーディング】

## 概要

### 1日10行コーディングとは

まず、1日10行コーディングというのは、1日10行でいいから新しいコード書こうよって感じのやつです(雑)
(1日1記事とか1機能とかだと続かない気がしてしまってる…)

### 実装するもの

最終的に作りたいのは自分でピンを立てた店のアイコンとかを自由に変えられたり、カテゴリごとにアイコン変えたりとかするものが作りたいという気持ち。Google Map my place??とかいうのに近いというか多分おんなじようなのになると思う。

ただ、今日はその前の前の前の前段階くらいのマップのマーカーを変更するところをしたいと思います。

## 手順

### 1.マーカーの変更

下記のiconの部分で写真の設定をできます。

“`js
const marker = new google.maps.Marker({
position: uluru,
map: map,
icon: {
url: ‘niku.jpg’, //アイコンのURL

g.js ・ p5.js の 2つの JavaScriptライブラリの組み合わせを試す（g.js公式の Quick Start をベースに）

この記事は、以下の記事の続きです。

●JavaScriptライブラリ「g.js」の Quick Start を試してみる – Qiita
　https://qiita.com/youtoy/items/264e4bc92aaf3ebec94c

上記の記事の中で試した、g.js公式のクイックスタートの内容に、p5.js を混ぜ込んでみようと思います。

## p5.js を混ぜ込むために行うこと
p5.js を混ぜ込むという話について、具体的にやることをここで補足します。

主な変更点は1つだけで、「g.js側で用意されていた canvas要素を、p5.js のものを利用する形に変更」する、という内容です。
簡単に言うと、[p5.js で drawingContext を利用](https://p5js.org/reference/#/p5/drawingContext)しつつ、という方向の話です。

## p5.js と g.js を組み合わせる
ここから、[冒頭で掲載していた Qiita の記事](https://qiita.com/youtoy/items/264e4bc92a

JavaScriptライブラリ「g.js」の Quick Start を試してみる

以下のツイートに書いているとおり、 @tkyko13 さんに聞いて JavaScriptライブラリの「g.js」というものを初めて知りました。
今回の記事の内容は、これを軽く試していく、というものです。

FYIですが、g.jsはcompound領域をとることができたり便利なところもあり、たまに使って作品作っています。https://t.co/sNd2shsC7jhttps://t.co/IfJmwb2gDZ

なお、たまにエラーで止まる不具合があるので以下ツイートの通り、修正したバージョンを公開していたりします。https://t.co/Kz43nv01Lv

— Tetsunori NAKAYAMA | 中山 哲法 (

【JavaScript】JavaScript基礎まとめ2

## はじめに
　本記事は、プログラミング初学者が、学習を進めていて疑問に思った点について調べた結果を備忘録も兼ねてまとめたものです。
　そのため、記事の内容に誤りが含まれている可能性があります。ご容赦ください。
　間違いを見つけた方は、お手数ですが、ご指摘いただけますと幸いです。

##JavaScript基礎まとめ２

###アロー関数

“`.js:アロー関数

// 従来の関数
function func1(str) {
return str;
}
console.log(func1(“func1が出力されています”));
// “func1が出力されています”
// 関数を変数に格納してから使用する
const func2 = function(str) {
return str;
}
console.log(func2(“func2が出力されています”));
// “func2が出力されています”

// アロー関数
const func3 = (str) => {
return str;
}
console.log(func3(“func3が出力されてい

Mpo100

https://www.jojo-effekt.info/wp-content/slot88/mpo100/

JavaScript クラス

ユーザー登録が必要なサイトとかだと
ユーザーが登録を行うとオブジェクトとして作成しているそうで

_コード_

“`
const user1={name:”田中”,hobby:”読書”};
const user2={name:”鈴木”,hobby:”スポーツ”};
・
　　　　・
　　　　・
const user100={name:”佐藤”,hobby:”スキー”};
“`

このように１つずつオブジェクトを作成してたら無茶苦茶面倒です。
そこで「nameは（）」「hobbyは（）」という、
設計図？をあらかじめ作成しておき、
後から情報を入れるようにすると毎回の手間がなく便利です。
この設計図のことを「クラス」と言うそうです。

_コード_

“`
class User{
constructor(){
}
}
const user=new User();
“`
_意味_
クラス「User」を設定
コンストラクタを追加
定数「user」を定義し、Userインスタンスを生成

上記コードとすることであらかじめクラスを設定し、
後から情報であるオブジェクトを入れることができ

大学時代に2回プログラミングを挫折した僕が、たった三ヶ月でサービス開発できるようになった話

こんにちは！
僕は今、Be-conn Inc.という会社（4月法人登記）でプロダクトを制作するため日々コーディングしています。
使用言語はJS(React)でバックエンドはfirebaseを利用しています。

その他にも個人的に、
Hatakaku: 業務状況改善App
Kiseki: エンジニアの卵用辞書App
を制作しています！

と、自己紹介はこの辺にして、本題に入っていきたいと思います。
まずは、私のエンジニアになるまでの道のりについてです。

挫折①
大学二年生の頃、とあるドラマ（リッチマンプアウーマン）を見て、「おお、エンジニアかっけえ。」となり、初心者あるあるのprogateでHTML,CSSを学びました。しかし、インプットメインかつ、作りたいものがない中での勉強は身にならず、
結局、一ヶ月かけてカッコ悪いサイトをいくつか作って挫折しました。
これが一度目の挫折でした。

挫折②
次に大学四年の時に、ITベンチャーでデザイナーをやっている友人から、アイデアがあるならやってみれば？と言われ、当時はまっていた素数計算のアプリを開発しようとswiftの勉強を始めました。
今回こ

JavaScriptのswitch文

#switch文とは
***if文などの条件分岐をわかりやすくまとめた書き方***です。
switch文をif文と比較するとかなり書きやすいです。

⚫︎条件分岐の資料

#switch文の書き方
書き方を下記に記載します。

>下記の参考資料より引用します。

“`js
switch (式){
case 値A：
式が値A の場合に実行する処理;
break;
case 値B:
式が値B の場合に実行する処理;
break;
case 値C:
式が値C の場合に実行する処理;
break;
default:
式の値がいずれのcaseとも一致しない場合に実行する処理;
}
“`

これ以外にもあります。

数値を使う時

“`js
switch (a) {
case 1:
console.log(‘aは1です’);
break;
default:
console.log(‘aの値は1ではありません’);
}
“`

文字列を使う時です。

“`js

JavaScriptの繰り返し処理の基本とアロー関数

#繰り返し処理とは
***決まったことや条件を満たすまで繰り返し処理がされるのを繰り返し処理***と言います。

#forEach
ES6から導入された繰り返し処理を説明していきます。
代表的なのが“`forEach“`文です。
下が公式です。

“`js
const arrays = [a,b,c];
arrays.forEach(function(array){
//処理
})

“`

これに当てはめてみていきます。

“`js
const scores = [100, 50, 80];

scores.forEach(function (score) {
console.log(score);
});

//100,50,20 が出力
“`

“`js
//3倍のscoreを出力すると
const scores = [100, 50, 80];

scores.forEach(function (score) {
console.log(score * 3); //3倍する
});
//300 150 240と出力
“`

他にもいろいろなメ

JavaScriptの条件分岐の基本

#条件分岐とは
これは“`もし〜なら〜で処理する“`みたいな仮定法みたいなイメージです。
webサービスでもよく使われるみたいです。

#if文の書き方
if文は“`もし〜なら〜で処理する“`でよく使われます。

“`js
if(条件){
#真の処理
}　else if(条件){
#真の処理
}else {
#全ての処理が偽の時
}
“`
countが数字によって出力が変わる処理を書いていきます。

***⚫︎注意***
これは***インデントがかなり悪いので実務では怒られる***みたいです！。

⚫︎整形前

“`js
const count = 20; //変数を定義

if (0) {
console.log(‘０です’);
} else if (count < 10) console.log('1０より下です'); else if (count <= 30) console.log('11以上です');　//今回該当する処理 else { console.log('31以上です'); } //11以上で出力　 ``` ***こっちの方

JavaScriptのwindowオブジェクトとdocumentオブジェクトについて

#windowオブジェクトとは
***JavaScriptが動作しているブラウザのwindow***を指します。
この中に***ブラウザ操作のための関数やオブジェクトがあります***。

windowオブジェクトのメソッド確認を確認するには
devtoolsを開いた後に
consoleにwindowを入力するとwindowのオブジェクトの確認ができます。
そうするとalertやconsoleなどたくさん出てきます。

“`js
window.console.log(‘ポチ’); //devtoolsなどでポチと出力されます。
window.alert(‘失敗’);　　　　//アラートで失敗と出力
“`

#documentオブジェクトとは
***DOM操作ができるもの***です。
DOMが操作できるとHTMLを追加したり削除できたりします。

⚫︎“`DOMとは“`
略してDocument Object Modelでドキュメントを物として扱うモデルという意味です。
JavaScriptを通してhtmlやXMLのようなマークアップ言語を操作するための仕組みです。

#DOM

[守] TypeScriptことはじめ

## はじめに

対象はTypeScript初学者（私）。TypeScript開発において必要最小限のコマンドや手順を備忘としてまとめておきます。「[WEB+DB PRESS Vol.117 / 実践投入TypeScript](https://gihyo.jp/magazine/wdpress/archive/2020/vol117)」を参考とさせていただきました。「もっとこうするとよいよ」のようなものがあればコメントいただけると嬉しいです。

※本記事記載のコード、コマンドの最終検証日は2022/02/05、実行環境のNode.jsはv16.13.2、TypeScriptコンパイラはv8.3.2。

## 開発環境を整備する

### 前提条件

– Node.jsがインストールされていること

### 実行手順

プロジェクトのホームディレクトリを整備後、Node.js環境を初期化、TypeScript開発に必要最小限のnpmパッケージをインストールし、TypeScriptコンパイラの設定ファイルを生成します。

“`sh

Angularセキュリティのベストプラクティス

太陽がなんとなく春めいてきましたね。
そして、なんとなく頭も重く、目も痒いこの季節。。。そう、花粉。
何か始めるにあたって良さそうな季節だったのですが、
1月から始まる予定だったコーディングブートキャンプが中止となりました。。。:sweat_smile:
残念な気持ちと、若干、ホットする気持ちもあり、、、

今回は、こちらから。

https://snyk.io/blog/angular-security-best-practices/

フレームワークは、数多くありますが、今回はAngularのコーディングのセキュリティ対策。
xssの防御、プロジェクトのスキャンといったベースの知識はAngularに関わらず、役立ちそうです。

#Angularセキュリティのベストプラクティス

Liran Tal（リラン・タル）Natalia Venditto（ナタリー・ベンディット）

2020年8月10日
前回は、[AngularJSセキュリティの基礎知識のチートシート](https://snyk.io/blog/angularjs-security/)をご紹介しました。今回は、最新のAng

Vueのcomputedを呼び出して使っていて、なかなか気づかなかった挙動について

# はじめに

　Vue3のComposition APIにもようやく慣れてきてサクサクっとウェブアプリを作っていたときに、ふと遭遇した挙動に悩まされたので、忘備録として記事にまとめておくことにした。

# 問題

　computedで定義した値がHTML側にまったく反映されない。配列周りの挙動にも気をつけており、値がセットされてくるタイミングも問題なかったのに、全く動いてないか、computedがそもそも生成されていない・・・？

# 問題のコード

　要点をまとめるとこのような処理にしていた。.vueファイルの書き方が嫌いなため、Vue3とQuasarというフレームワークにて、CDNを使った書き方でやっていた。やっていることはComposition API で.vueの書き方に似せていた。
あるコンポーネントにて、目的とするオブジェクトの配列をフィルタリングして返す *filtering_array* という関数を作り、親のコンポーネントに関数群として返していた。
　それが親側としてはhogehogeというオブジェクトだ。
　親のHTMLからは、hogehoge.filterin

JavaScriptめも

“`javascript:sample.js

//即時関数
console.log(
(function (param1, param2) {
return param1 + param2;
}(1, 2))
); // => 3

//配列
var array = [1,2,3]
console.log(array[0]) //=> 1

//連想配列
var array2 = {
a : true,
b : false,
c : false
};
console.log(array2[‘a’]) //=> true

“`

https://www.typescriptlang.org/play
試す

ReactでAPIから取ってきた背景画像を表示する方法（style attribute, css-modules, tailwindcss, styled-components）

# はじめに
自分が詰まったので。特にtailwind。

## style attributeを使う
一番手っ取り早いのはこれです。

“`tsx

….

“`

### 擬似クラス使えない問題
style attibute内では:hoverなどの擬似クラスが使えないので、この手法は背景画像が常に表示されるデザインにのみ使えます。「hover時のみ表示したい」などといった場合は以下から紹介するアプローチが必要になります。

## css-modulesを使う

“`jsx:Component.jsx
import style from ‘./Component.module.css’

const Component = ({ imageUrl }) => {
const cssProperties = {
‘–image-url’: `url(${imageUrl})`
}

return (

【Udemy】聴きやすい英語のエンジニア向け優良コンテンツ(順次追記)

技術はサッパリだが英語ができるワイは最近Udemyの英語コンテンツで学んでいます。
その中で**聴きやすい英語**で**内容がとてもいい**と判断したものを追記していきます。
合う講師を見つけて、その講師の他の動画を見るのが効率的だと思っています。

#**Udemy英語コンテンツのメリット・デメリット**
**メリット**
・Udemyの英語コンテンツは日本語コンテンツより充実しているものが多い(独断です)
・日本語コンテンツにない技術スタックを扱っている
・最新技術の動画が出るのが明らかに日本語より早い
・副次的に英語力向上にもつながる

**デメリット**
・ネイティブじゃない訛りまくった英語を話す講師も多いため、聞きやすい英語を話す講師を探す必要あり

#**講師リスト**
・[Jonas Schmedtmann](https://www.udemy.com/user/jonasschmedtmann/)
→比較的ゆっくり話す。自分の老いを自覚し、年齢の話題に触れるのを恐れている節がある。
・[Trevor Sawler](https://www.udemy.com/use