- 1. Node.jsとMongoDBを連携
- 2. three.js x React x redux で3Dオセロゲームを作った
- 3. Vue.js 削除ボタンを作ってスロットを理解する
- 4. HTML上でJavaScriptを使ってAPIコールし、レスポンスをCSVダウンロード（っぽく）取得する
- 5. そろそろlockファイルを理解するための最初のページ【composer.lock/package-lock.json】
- 6. Array.prototype.reduce()を使いこなしたい
- 7. [JavaScript] express() で "express is not a function" ついでに TS の "export =" と "import = require()"
- 8. kintoneのグループフィールド開閉がArray.map() で上手く行かないので forEach() を使ったら上手く行った話し
- 9. Marked.jsはハッシュのあとにスペースがないと見出しにならない
- 10. Puppeteerで検索フォームにテキストを入力してページ遷移する
- 11. スクロールに連動して現在地を示す目次を作りたい
- 12. 質問です。
- 13. JavaとJavaScript 間違えられやすい問題
- 14. MVCについて（100 days of code）
- 15. 【JavaScript】Null合体演算子と(??)とオプショナルチェイニング演算子(.?)
- 16. javascript スクロール機能をつけるとき
- 17. Chrome拡張機能のイベントぺージとストレージ有効期限
- 18. 純粋関数
- 19. 高階関数とカリー化
- 20. D3.jsで円とか線とか描画する
Node.jsとMongoDBを連携
今回はnode.jsとMongoDBの連携方法について簡単に解説していきます。
##MongoDBの特徴
まず初めにMongoDBの特徴について解説します。MongoDBの特徴として，以下のようなものが挙げられます。
**(1)スキーマレスであるドキュメント指向データベースであること**
・データはスキーマレスなドキュメントで格納され，任意のフィールドを好きなときに追加できる
・KVSでは苦手なValueを検索の条件としたり，ソート・集計を実現できる**(2)スケーラビリティに関する機能を標準機能として備えていること**
・レプリケーション機能，オートフェールオーバー機能を備えている
・レンジパーティション機能，オートバランシング機能を備えている**(3)RDBと比較してRead/Writeの性能が高い**
・トランザクション・リレーションを制限した結果，KVSに近いパフォーマンスを出せる**(4)開発のしやすさ**
・どのような環境でもパフォーマンスが出るように，ネイティブソケットプロトコルを使用したドライバを主要なプログラミング言語で開発元が提供している
・RES
three.js x React x redux で3Dオセロゲームを作った
# はじめに
WebGLの3Dブラウザゲームを作りたいと考えた時、どのようなフレームワークを選択すればよいのでしょうか？three.jsは一番メジャーなWebGLの3DCGライブラリですが、基本的に3DCGを描画する機能しかないので、これ単体でゲームを作るには少し苦しい局面もあります。そこで、Reactとreduxに、UIやゲームの進行管理を任せることでそこそこの規模のゲーム開発ができるのでは？と思ったのでthree.js x React x redux で3Dオセロゲームを作ってみました。# 作った物
こちらでプレイできます。
https://arihide.github.io/reversi3d/
[](https://arihide.gi
Vue.js 削除ボタンを作ってスロットを理解する
# スロットとは
スロット(slot)は、Vue.jsにおける親コンポーネントから子コンポーネントにデータを渡す手段の一つです。
スロットという名前は[ハーデス](https://machine.p-gabu.jp/guideworks/machinecontents/detail/65)や[リゼロ](https://1geki.jp/slot/s_rezoro/)など様々な機種がある遊技マシン…のことではなく「差し込み口」という意味で使われています。つまり、コンポーネントに外からコンテンツの差し込みを受け付けるという目的で使用されます。
スロットはその性質上、**再利用の高いコンポーネント**によく使用されます。再利用の高いコンポーネントは、[Atomic Design](https://bradfrost.com/blog/post/atomic-web-design/)における`Atom`のようなものが代表されます。
まずはさっそくスロットの基礎的な使い方を見ていきましょう。
# スロットコンテンツ
スロットを使用コンポーネントとして、汎用的に利用する削除ボタン
HTML上でJavaScriptを使ってAPIコールし、レスポンスをCSVダウンロード（っぽく）取得する
## 目的
HTML上でJavaScriptを使ってAPIコールし、レスポンスをCSVダウンロード（っぽく）取得する。
## 方法
1. APIからのレスポンス値をCSV形式へ変換する。
2. 変換したCSVでdataURLを使ってリンク（aタグ）を生成する。## 実装
“`html
Document
~~~※adjustという変数は調整の意味です。
Chrome拡張機能のイベントぺージとストレージ有効期限
#１行概要
Chrome拡張機能の**イベントページ**における①**Web Storage**、②**Session Storage**、③**Cookie**の情報有効期限についてメモしました。#はじめに
メモリの大量消費で悪名高いGoogle Chromeですが、その原因の一つに拡張機能の常駐があることは周知の通りです。
それに対し、GoogleはChrome拡張機能のイベントドリブン化を推奨しているというのもご存じの通りかと思います。>Background scripts are registered in the manifest under the "background" field. They are listed in an array after the "scripts" key, and "persistent" should be specified as false.
Chrome拡張機能において、イベントドリブンな処理を記述したものが**イベントページ**です。
`manifest.json`で宣言するだけなので、イベントドリブンを指定したものと
純粋関数
[プログラミングの基礎についての他の記事はコチラ](https://qiita.com/search?sort=&q=tag%3A%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E5%9F%BA%E7%A4%8E+user%3Aoedkty)
純粋関数について説明する。
純粋関数の特徴は以下である。
- 引数が同じ場合、常に同じ返り値となる。（参照透過性）
- 副作用が発生しない例えば、下記のような`add`関数は純粋関数である。
```javascript
function add(a, b) {
return a + b
}
````a=1`かつ`b=2`の場合、必ず`3`が返る保証があるためである。
一方でランダムな値を返す関数やAPIへのアクセスをしている場合は、毎回結果が違うことから純粋関数ではなくなる。
では下記の関数はどうか。
```javascript
function increment(obj) {
obj.num = obj.num + 1
高階関数とカリー化
[プログラミングの基礎についての他の記事はコチラ](https://qiita.com/search?sort=&q=tag%3A%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E5%9F%BA%E7%A4%8E+user%3Aoedkty)
高階関数について説明する。
高階関数とは、端的に言えば関数を返す関数のことである。
JavaScript での例を下記に示す。
```javascript
var add = a => b => a + b
```この`add`関数は、下記のように実行できる。
```javascript
var increment = add(1)
```このように関数の実行によって、新しい関数を作ることができる。
新しく作成された `increment` 関数は `add` 関数の特定のケースである。（この場合、`a=1`に束縛される）
特定のケースに対するモジュールの作成は、より一般的には**特化**と呼ばれる。
しかし、実際のプログラムの作成においては
D3.jsで円とか線とか描画する
# 目的
D3.jsで小学生の娘＆息子とお絵描きしながらその過程で作成したモノをアップしました。
データを修正しながら、座標や配列について学習してもらいました。# 円を描く
```html
D3.js example
