サーバーレスアーキテクチャの長所と短所

今回は、サーバーレスアーキテクチャについて、メリットデメリットを含めてご説明します:loudspeaker:

サーバーレスアーキテクチャとは、インフラを管理することなく、アプリケーションやサービスを構築・実行する方法のことです。
著者：Dave Green 2021年12月17日
原文：https://bejamas.io/blog/serverless-architectures/
補足：Bejamas社に許可を取った上で、掲載しております。


>目次
>1. サーバーレスアーキテクチャとは？
>2. なぜサーバーレスアーキテクチャを採用する必要があるのか？
>3. 最終的な考え

テクノロジーは誰も待ってはくれません。

あるツールやアーキテクチャの使い方に慣れた頃に、新しいものが出てくると、また最初からやり直すのか？と自問すること

クロージャー (JavaScript)

講義で学んだ記録を書きます (20220419.)
##### ※その前にスコープについて軽く触れる
スコープには下記の４種類がある。
**グローバルスコープ**：１つのファイルどこからでもアクセスできる。
　　　　　　　　　　(注意：値の変更もどこでも可能になるので多用しない)
**ローカスコープ**：グローバル変数以外。　以下の2つに分かれる
**関数スコープ**：関数によって定義。関数内部からしか利用できない。
　　　　　　　※クロージャーで使用する知識
**ブロックスコープ**：{ブロック}で定義される。変数はブロック内で利用可能。
クロージャーではスコープの概念が大切になるので、未学習の方はぜひCheck!!!

## クロージャー(closure)とは
関数の中に関数を作成し、内側の関数から外側の関数スコープへアクセスできるようにする。
これにより関数スコープ内の変数情報を記憶・コントロールできるようになる。

## なぜクロージャーが使われるのか
普通の変数であると、ソースの量が多い or チームで開発する際

【Javascript】クロージャーってなんぞ？

クロージャーを学びました！！！

ので、簡単に３つのポイントで記事を書きました。

① クロージャーとは？

関数の中に「関数」とその周囲の「環境」が格納されているもの

(めちゃ簡単に書きました。詳しくはMDNとかにお任せします。。。)

[クロージャとは？](https://developer.mozilla.org/ja/docs/Web/JavaScript/Closures “クロージャ – Javascript|MDN”)

② 何に使うの？

オブジェクトの変数やメソッドを外部から簡単に変更されないようにするためらしい。
（簡単に変更できるとバグや意図せぬ挙動が発生する恐れがある）

Javaでいうとカプセル化の概念に近いのかなぁ？

(別件で調べたらカプセル化を担う機能の一つと書いてました。)

③ 使用例

例えば、消費税率の変化に対応出来るようこんな感じで関数が作れます。

~

jQueryを使用して全ての項目にチェックを入れるチェックボックスを作成する

表題通りの内容です。


“`index.html

全て

npmパッケージのコードリーディングを100倍しやすくする方法

100倍という表現はだいぶ大げさだと思うのですが、自分はこの方法を使ってからそれくらいnpmパッケージのコードリーディングがかなりしやすくなったので自分がこの方法を知った時の感覚をタイトルに反映させてみました！
方法というのはシンプルで**npmパッケージの気になる箇所にconsole.logを仕込んでデバックをする**だけです！

今回はその「npmパッケージの気になる箇所にconsole.logを仕込んでデバックをする方法」について解説をします
デバックするライブラリは[react-hook-form](https://github.com/react-hook-form/react-hook-form)にしました！

# npmパッケージの気になる箇所にconsole.logを仕込んでデバックをする方法
少し手順が多いのですが、なるべくコピペするだけで良いようにしました！
また、一度この手順を踏めば次からのデバックはかなり楽になるはずです

#### 1 適当なディレクトリを作り、そこにreact-hook-formをクローンする
““
mkdir react-hook-fo

非同期タスク（複数）を同期的に実行

こんにちは。
非同期タスク（複数）を、同期的に（順に）実行させました。すなわち、

* 非同期タスク関数を、“`new Promise()“`を戻り値とする形に仕立て、
* その実行完了（“`resolve()“` が返された）後に（=“`await“`）、次（の行）の関数が実行されます[^1]。

[^1]: 同期的実行は不要な場合には“`Promise.all()“`を用いることができます。複数の関数の指定順序順通りの実行結果配列を得られます。

#### 実行例およびソース
下記の“`waitTimes = [600, 400, 200]“` で与えた順序に従って同期的実行します。

“`promise.html

【JavaScript】クロージャ・スコープの考え方をなんとなく解説

JavaScriptをやるなら誰もが通るであろう鬼門をなんとなく解説?

## ●クロージャとは？

クロージャとは「__自分を囲むスコープ内にある変数を参照可能な関数__」と定義できます。

## ●じゃあスコープってなに？

スコープとは「__変数を参照できる範囲__」です。

スコープの種類を詳しく見ていきましょう。

## ●スコープの種類

### 　❶グローバル変数
　　　関数の外（トップレベル）にある変数のスコープ。
　　　varで宣言すると、関数及びブロックの内外関係なくグローバル変数となります

“`Javascript
//グローバル変数
var global = “Hello”;
function func(){
//関数内からアクセス可
console.log(global); //　⇨ Hello
}
//関数外からアクセス可
console.log(global); //　⇨ Hello
“`

### 　❷ローカル変数
　　　　グローバル変数以外の全ての変数のスコープ。
　　　　下記２種類存在します。

#### 　　（１）__関数スコー

React で 19路盤の碁盤 を作ってみた

# 19路盤の碁盤

完成品 ↓

https://igo-goban.de.r.appspot.com

https://github.com/YmBIgo/goban

# 石を取る

https://github.com/YmBIgo/goban/blob/master/src/components/Goban.tsx#L514

石をブロックとして数えてから、囲われているかを確認しました。
useState だと 描画絡みで変数保持するのが難しいと思ったので、useRef で内部変数を保持しました。

https://github.com/YmBIgo/goban/blob/5893dbe407ba9495167073ea393f0a179e60cf56/src/components/Goban.tsx#L313

数えられたブロックで、forEach 文を回すところから始まっています。
全てのブロックで、ブロックの周りが違う色の石で囲われているかを確認して、石を取っています。

# コウ

https://github.com/YmBIgo/goban/blob/5893db

【初心者の方へ】JavaScriptでAtCoderを始めてみませんか？

はじめまして！ソフトウェアエンジニアを目指しているYukokoと申します:cherry_blossom:どきどきの初投稿です。今回は、私がAtCoderを始める時にググりまくったのに辿り着けなかった、本当の「はじめの一歩」を書くことにしました。私の周りでも同じように途方に暮れている方がいらっしゃったので、少しでも参考になりましたら幸いです！

### このような方におすすめの記事です。
* JavaScriptの基本的な知識はあるが、AtCoderの取り組み方が分からない。
* 競技プログラミングを極めるというより、学習教材の一つとして活用したい。
* 登録はできたけれど、次に何をしたらいいのかよく分からないなぁ……。　←過去の私
* 解き方は合っているはずなのに、テストが通らない！なぜ！？（不正解の嵐）　←過去の私

# １．まずは標準入出力に慣れましょう

https://atcoder.jp/contests/abs

こちらは、初心者向けに作られた問題集です。まずはAtCoderの解き方に慣れるため、1問目の[PracticeA – Welcome to AtCoder](ht

JavaScriptメモ

# 基本文法
– コメントアウト
//

– 変数の定義
“`javascript
let 変数名 = value;
“`
– 定数の定義
“`javascript
const 定数名　= value;
“`

– テンプレートリテラル
“`javascript
`${変数or定数}`; (テンプレートリテラルを用いる時は、バッククオートを使う。)
“`

– if
“`javascript
if (条件式){
処理;
}else if(条件式２){
}else{
}
“`

– 　条件式の複数指定
– かつ　&&
– または ||

– switch文
“`javascript
switch(条件の値){
case 値１:条件の値が値１と等しい時の処理
break;
default: 処理
break;
}
“`

– while文
“`javascript
while (条件式）{
処理
}
“`

– for文
“`javascript
for (変数定義;条件式;変数の更新){
処理
}
“`

– オブジェクトの作り方
プロ

javaScript クロージャーってナンジャ

## javaScriptのクロージャーでちょっと詰まった話

javaScriptの学習を進めていくと、一度クロージャの壁にぶち当たる。

クロージャーに入る前に、まずは変数のスコープについておさらいしてみる。

“`javascript:qiita.js
function test(val) {
return val;
}

console.log(test(‘テスト’)) // テスト

console.log(val); // エラー Uncaught ReferenceError: val is not defined at…
“`

上記コードのように、関数内で定義された変数 val を関数外で取得しようとしても、エラーになり、これにはスコープが影響している。

スコープにはいくつか種類があり、それぞれ参照範囲が異なる。
詳しくはこちらの記事を参考にしてほしい。

[Javascript のクロージャについて](https://qiita.com/sekir11/items/2117cb4e8883f3011402)

:::note warn
おねがい
上記

JavaScriptでクロージャについてふんわりと説明してみる

# クロージャとは

>クロージャは、組み合わされた（囲まれた）関数と、その周囲の状態（レキシカル環境）への参照の組み合わせです。言い換えれば、クロージャは内側の関数から外側の関数スコープへのアクセスを提供します。JavaScript では、関数が作成されるたびにクロージャが作成されます。
>
>引用元：https://developer.mozilla.org/ja/docs/Web/JavaScript/Closures

…ムズカシイ。

# 実例で見てみる

“`javascript:closureSample.js
‘use strict’

function outerFunction(param){
// ローカルスコープのvalue変数
let value = param;

return function innerFunction(){
// outerFunctionで定義された変数をインクリメントして返す
return ++ value;
}
}

const increFunc = out

クロージャーについて

クロージャーとは・・・

『関数』と、その関数の中に同封（enclosed）された、関数の「外」にある『変数』
これらの組み合わせのことである。

“`JavaScript
function greeting(greetingWord) {
return function(otherWord) {
return `${greetingWord}, ${otherWord}`;
}
}
“`

クロージャーのメリット

同類の処理をさせる関数を複数作る際に、記述を簡素化できる。

“`JavaScript
const sayGoodMorning = greeting(“Ohayo”); //関数greetingに”Ohayo”が同封されている。
const sayWelcome = greeting(“Youkoso”); //関数greetingに”Youkoso”が同封されている。

sayGoodMorning(“Oni-Chan”); //”Ohayo, Oni-Chan”
sayWelcome(“Nippon”);

JavaScript スコープとクロージャーについて

## クロージャーの前にスコープとは

クロージャーを語るにはまず、スコープについて知っておく必要があります
スコープには以下の種類があります

– グローバルスコープ
– 最高階層で宣言されその変数はどこからでも使用出来る
– ローカルスコープ
– グローバルスコープ以外の変数
– 関数スコープとブロックスコープに分けられる
– 関数スコープ
– 関数の中で宣言される変数で関数の中でしか使用出来ない
– ブロックスコープ
{}で閉じられたブロックの中で宣言された変数で{]の中でしか使用出来ない

## クロージャーとは
上記のスコープを踏まえて
クロージャーの使用例を↓に記述します

“` js
const counter = () => {
let x = 0;
return () => {
return x++;
}
}
“`

実行すると下記にようになります

“`js
const ct1 = counter();
const ct2 = counter();

console.log(ct1());

クロージャの概要と具体例

# クロージャについて学習した内容まとめ

## クロージャ(closure)とは
ある関数内でローカルスコープの情報を記憶している他の関数を内側に含む関数のことである。

:::note info
##### (補足) スコープとは
* グローバルスコープ
最高階層で定義され、そのファイルのどこからでもアクセスできる変数のこと。
* ローカルスコープ
グローバルスコープ以外の変数のことで、関数やブロック{}の中で定義された変数でその範囲でのみ有効な変数のこと。
:::

## クロージャの重要性
グローバルスコープで定義された情報を使用して関数を定義すると、その情報が変更されると関数の処理内容や出力が変わってしまい、予期せぬ関数となってしまう可能性がある。
そのため、ローカルスコープに定義された情報で関数を定義することが重要となる。

## クロージャの使用例
以下、実際のソースコードをもとに具体例を紹介する。
実装はJavaScriptで行う。
今回は、西暦から和暦に変換する関数を実装した。

+ クロージャなしの実装
“`js:script.js
const start

【パブリッシャー】JavaScriptでの拡張 – KENDO kendoDropDownListコントロール

[Sharperlight](https://sharperlight.jp/)には、[Kendo](https://www.telerik.com/) JavaScript ライブラリが梱包されています。
Kendo JavaScript ライブラリには、様々なWEB UIコントロールが準備されていて、Sharperlightの公開クエリとの組み合わせでいろいろなWebインターフェースを作成することができます。
この記事では、kendoDropDownListコントロールを使用してみます。
準備するものは、kendoDropDownListコントロールを配置するHTML(JavaScriptコード含)、そのHTMLのコンテナとなる公開クエリ、kendoDropDownListコントロールにデータを供給する公開クエリの3点です。
## HTML(JavaScriptコード含)の作成 ##
#### ヘッダー部 ####
Kendo JavaScript ライブラリのコンポーネントを参照するコードを記します。
![2022-04-19 Figure 03.png](https://qii

JavaScript基礎概念勉強ノート5　実践編

# 初めに
今回は自分がJS基礎の練習時に遭遇した難問、もしくは面白い問題を少し紹介したいと思います。ここで書いたのは自分のコードへの振り返りですので、模範解答的なものではありません。アウトプットテストの検証を一応通っています。

# Fibonacci numbers（フィボナッチ数列）
“`js
// fib(0), fib(1) are special cases
// solution1
let arr = [0, 1]

function fibonacci(n) {
let sum = 0
if (n === 0) return arr[0]
if (n === 1) return arr[1]
if (n >= 2) {
for (let i = 2; i <= n; i++) { sum = arr[i - 1] + arr[i - 2] arr.push(sum) } } // console.log(arr) return arr[n] } // console.log(fibonacci(1)

クロージャ（JavaScript）

最近クロージャを勉強したので備忘録として残しておきます。

# クロージャとは
クロージャーとは、関数とその関数の中に同封された関数の「外」にある変数の組み合わせのことです。この説明だとよくわかりませんね、以下に例を示しておきます。

# クロージャの例
“`javascript:qiita.js
function add(x) {
return (y) => x + y
}

const addOne = add(1);
const addTen = add(10);
“`
この場合、変数xが関数addに内包されます。
addOneは、引数に1を加えた値を返す関数になります。
addTenは、引数に10を加えた値を返す関数になります。

＜実行例＞
“`javascript:quita.js
addOne(2) // 1 + 2 = 3
addTen(5) // 10 + 5 = 15
“`
1つ目の例では、内包された1に引数の2加わり、3が出力されています。
2つ目の例では、内包された10に引数の5が加わり、15が出力されています。

# クロージャの重要性
ク

Javascript のクロージャについて

### Javascript のクロージャについて

## スコープの種類と概要

Javascript におけるスコープとは、どの変数にアクセスできるかを考える時に必要になってくる。
スコープには、***グローバルスコープ***・***ローカルスコープ***・***関数スコープ***・***ブロックスコープ***が存在する。

***グローバルスコープ***は、同一ファイル内であれば、どこでも参照できる。

“`javascript:
//var で宣言することでグローバル変数となる
var hensu = 100;
“`
***ローカルスコープ***は、グローバルスコープ以外の全てのスコープで、関数スコープとブロックスコープに分かれる。
***関数スコープ***は、関数の中で定義される変数のスコープで、その関数内部でしかアクセスできない。
“`javascript:
//関数の引数は関数スコープとなる
function test(hensu) {
console.log(hensu);
}
“`

***ブロックスコープ***は、{}で閉じられたブロックによって定義さ

配列の最後の要素を取得する方法【JavaScript】

JavaScriptで配列の最後の要素を取得する方法をまとめます。

# lengthプロパティを使う方法

“`javascript
const array = [“りんご”, “みかん”, “ぶどう”];

const last1 = array[array.length – 1];

console.log(array, last1);

// 結果
// [“りんご”, “みかん”, “ぶどう”]”ぶどう”
“`

１つ目はlengthプロパティを使う方法です。

`array.length – 1`を指定することで、最後の要素を取得します。

シンプルですが、記述が長くなりがちです。

# pop()を使う方法

“`javascript
const array = [“りんご”, “みかん”, “ぶどう”];

const last2 = array.pop();

console.log(array, last2);

// 結果
// [“りんご”, “みかん”]”ぶどう”
“`

2つ目はpop()メソッドを使う方法です。

pop()メソッドは配列の最後