- 1. JavaScriptをTypeScriptにする一文字命名規則とは何か
- 2. 快適な開発環境のつくりかた (Mac)
- 3. 「マイクロサービスパターン」の復習 5章
- 4. Firebase Authentication 各種機能実装記事集
- 5. Tinderを簡単に自動化してみた
- 6. TypeScriptの基本的な型
- 7. 【JavaScript関数ドリル】Lodash関数の実装【勉強用】_.initial関数
- 8. プーチン??を破壊するDDos②
- 9. firebaseでカウントアップさせる方法
- 10. 【サーバサイド編】GraphQLを使うぞ
- 11. node.js の require と import
- 12. 見るだけのガントチャートを作ってみた
- 13. 昼寝用BGM&アラームツール作ってみる【Vanilla JS】
- 14. Vite ＋ Vanilla な JavaScript を軽く試してみる（npm を利用）
- 15. BodyPixとWebGLを組み合わせて3次元的な次世代バーチャル背景を作る
- 16. ファイル関連をかく
- 17. AtCoderのインタラクティブ問題をjavascriptで提出する
- 18. To-Do ListのChrome拡張機能をVue.jsで作る
- 19. corsエラーが出た
- 20. ISO 8601とJavaScriptのDate
JavaScriptをTypeScriptにする一文字命名規則とは何か
:::note warn
この命名規則は策定中です。
:::## はじめに
本記事ではプログラミングの生産性を上げるシンプルな命名規則を提案します。
## 一文字命名規則とは何か
一文字命名規則とはアルファベット一文字とアンダースコアを変数名や関数名の頭に付ける命名規則です。
そうすることにより変数名や関数名を大文字小文字あわせて最大52種類のグループに分け、それぞれのグループに型などの意味を持たせられます。
具体的にはフラグ変数の名前が`visible`ならアルファベット一文字`b`とアンダースコア`_`を頭につけて`b_visible`にして変数名に`Boolean`型の意味を持たせられます。
## 一文字命名規則の補足説明
一文字命名規則を詳しく説明します。
プログラマーはそれぞれのグループの意味を自由に定義できます。
変数名や関数名の一文字を見てグループの意味が分かるようにします。
シンプルな命名規則にするために**一文字縛り**があります。
一文字が重複したときは大文字や、52種類のなかの未使用文字を使うことを検討します。たとえばJavaScript
快適な開発環境のつくりかた (Mac)
# A Guide to Comfortable Developments (for Mac)
プログラマを目指す友人のために。
（オンデマンドに加筆・更新を行う可能性があります。）:::note warn
M1 チップ搭載の Mac の場合は、旧来の Intel チップ搭載の場合と異なる点が出てくる可能性があります。アーキテクチャとして x86-64 と arm の 2 択が出てきた場合は **arm** の方を選択するようにしてください。とはいえ中々に M1 チップも普及し、このことを意識する頻度は低くなってきています。
::::::note warn
取り扱うプログラミング言語として汎用性が高いであろう Python と JavaScript を選びました。特に Python はインターネットに出てくる記事に落とし穴が多く、その観点からも環境構築のガイドラインは価値があるものだと考えています。
:::## TL;DR
“Too long, didn’t read.”（あんまりに長すぎて読まなかったよ）の略語。日本独自の用法として「要約」の意味がある。Qiita で
「マイクロサービスパターン」の復習 5章
## 概要
– Java読書会でせっかく勉強したのにつぎつぎと忘れていくので、印象に残ったところを記録していく
http://www.javareading.com/bof/
## 5章 マイクロサービスアーキテクチャにおけるビジネスロジックの設計
ビジネスロジックを設計上、どのように構築していくか
## Transaction scriptパターン
– もっともシンプルな形態
– ビジネスロジックはサービスクラスに持たせて、エンティティクラスはデータだけ
– エンンティティの方はORマッパーでマッピングする
– 利点
– 設計が簡単
– エンティティ側がデータだけなので、責務について悩むこともない
– ロジックとデータが分離されている
– ビジネスロジックとデータ（データベースのスキーマ）の変更頻度・ライフサイクルは違うので別れている方が良いという考え方もある
– 欠点
– ビジネスロジックの重複
– ビジネスロジック間の共通ロジックについて、共通化がきれいにできない
– ロジックは全
Firebase Authentication 各種機能実装記事集
# はじめに
個人サービスを制作するにあたり、Googleが提供しているBaasであるFirebaseを採用しました。その際に、認証周りの様々な機能を提供してくれるFirebase Authenticationを使用しましたが、公式のリファレンスのみでは理解が難しい場面が多々あったので、各機能の実装にあたって参考にさせていただいた記事集を作りました。JavaScript（React等)で以下機能を実装したい方は、こちらの記事集を是非参考にしていただければと思います。* ユーザーのサインアップ・ログイン
* サインアップ後の認証メール送信
* パスワード再設定用メール送信
* Firestoreへユーザー情報を登録
* Storageへプロフィール画像をアップロード
* 匿名ログイン# ※注意事項
Firebaseのバージョンは、頻繁に更新されており、同一の処理である場合もバージョンによって記述方法が**異なっています。**（現在の最新バージョンは9系。）こちらで紹介している記事は、それぞれ投稿された日時が異なりますので、バージョン及び実装方法も一部異なる場合がありますので、下
Tinderを簡単に自動化してみた
### はじめに
**コードは読めても女性の心を読めない**@t_mojamojaです。
みなさんは彼女がいますでしょうか？僕は残念ながらいません。ましてや最近はいないことに危機感も感じることがなくなりました。
そこで女性との付き合いもプログラミングもアウトプットが大事ということで、自分に発破をかけるためにTinderをインストールしました。
しかし、初めてみたもののなかなかマッチングしません。
一応課金もしていいねを無制限にできるようにしましたが、結局あまりマッチングしませんでした。調べてみたところ、Tinderでマッチする確率は **0.5%** だそうです。しかし、個人的な感覚としてはもっと低いと思っています。
Tinderでマッチする確率が低い原因は大きく分けて2つあります。
1つは**男性ユーザーが圧倒的に多いため**です。これはどのマッチングアプリでも共通の問題だとおもいます。
2つ目は**見た目で判断される場合が非常に多いこと**です。Tinderではその印象が特に強いです。
僕は高身長イケメンでもなんでもないのでよりマッチングする確率が低いのかと思わ
TypeScriptの基本的な型
# 自己紹介
現在都内の企業でWebエンジニアのインターン生としてお世話になっている大学２年生です！
インターンや個人開発で学んだことや苦労したことを記事にしています！
よろしくお願いします??♂️# はじめに
今回は最近勉強しているTypeScriptの型についてアウトプットしていこうと思います！# boolean型,number型,string型
“`typescript
//boolean型
let bool: boolean = true;//number型
let number: number = 0;//string型
let string: string = “string”;
“`# Array型
“`typescript
//Array型
let arr1: number[] = [1, 2, 3];
let arr2: string[] = [“A”, “B”, “C”];
//配列の中の方が混合している場合
let arr3: (string | number | boolean)[] = [0, “A”, true];
//二次元配列
【JavaScript関数ドリル】Lodash関数の実装【勉強用】_.initial関数
# 【JavaScript関数ドリル】初級編の_.initial関数の実装のアウトプット
“`javascript:_.initial関数の挙動
_.initial([1, 2, 3]);
// => [1, 2]
“`
渡された配列の末尾を取り除いたものを返す
## _.initial関数の課題内容## _.initial関数に取り組む前の状態
– 元の配列をコピーし、末尾をpopするだけで良さそう
## _.initial関数に取り組んだ後の状態
– スプレッド構文`(…array)`について、複数の配列をまとめて受け取るという使い方しか知らなかったので、コピーにも使えることがわかった
– 概ね解答と同じ書き方で、短時間で作成できた
– 2日ぶりにコードを書いただけでアロー関数の書き方も少し忘れていたので、やはり関数ドリルだけでも毎日取り組もうと思った## _.initial関数の実装コード
“`javascript:
const initial = (array) => {
プーチン??を破壊するDDos②
プーチンにDDos攻撃して戦争を終わらせるプロジェクトが発足しました。みんなで協力してプーチンを倒しましょう
https://github.com/ajax-lives/NoRussian
# プロジェクトをダウンロードする
“`bash
git clone https://github.com/ajax-lives/NoRussian
cd NoRussian/
“`# DDosを実行する
### Windows
“`bash
“[CHROME PATH HERE]/chrome.exe” –disable-web-security index.html
“`### Mac
“`bash
open -na Google\ Chrome –args –user-data-dir=/tmp/temporary-
firebaseでカウントアップさせる方法
firebaseでボタン押したらカウントアップするのを作っていたのだけど、realtimedatabaseを使う場合に
書き込みができるようになってるのは、避けた方が良さそうで、書き込みの権限をオープンにするのも問題があるので、まずルールを“`json:qiita.rules
{
“rules”: {
“.read”: true,”.write”: false
}
}
“`これで書き込めなくなった。
取得方法はいくつもあるので割愛を書き込み方法はfirebaseのfunctionsを利用しようと思う。
“`javascript:qiita.js
const helloWorld = httpsCallable(functions, ‘hello’);
helloWorld();
“`こんな感じにhelloという関数を呼びたいとする。
（functions自体、データベースのアクセスをキーにできたりもするけど、今回は普通に通信を使う。）“`javascript:qiita.js
exports.hello = functions.https
【サーバサイド編】GraphQLを使うぞ
こんにちは！今回は自身の備忘録としてGrapuQLについてまとめたいと思います。
# 目次
[1.今回作るもの](#1-今回作るもの)
[2.使用技術](#2-使用技術)
[3.必要なインストール](#3-必要なインストール)
[4.今回登場する主なファイル](#4-今回登場する主なファイル)
[5.早速書いていこう](#5-早速書いていこう)
・app.jsを書く
・schema.jsを書く
・MongoDBと接続する
・modelsフォルダ内のファイルを書く
[6.メソッドの書き方](#6-メソッドの書き方)
[7.データの取得](#7-データの取得)
[8.データの追加、編集、削除](#8-データの追加編集削除)
・データの追加
・データの編集
・データの削除
[9.上手くいっているかテストしてみる](#9-上手くいっているかテストしてみる)
[10.まとめ](#10-まとめ):::note info
超ざっくりGraphQLとは：
・DBから情報を取得するのに使えるやつ。
・APIのURL(エンドポイント)が1つで済む！
・クライアントサイドでDBから自分で持ってきたいデー
node.js の require と import
node.js の require(CommonJS) と import(ESModule) について、理解が曖昧だったため、調べ直してみました。
※2022年2月の 最新バージョン [v17.6.0](https://nodejs.org/dist/latest-v17.x/docs/api/) のドキュメントをもとに記述しています。あらかじめご了承ください。
## require と import の違い
簡単にいうと、nodeモジュールの読み込み形式の違い。
require は [「CommonJS」](https://nodejs.org/api/modules.html) 形式によるモジュールの読み込み方法。
import は [「ECMAScript」](https://nodejs.org/api/esm.html) 形式によるモジュールの読み込み方法。requireを定めたCommonJSは [2009年に始まったプロジェクト](https://ja.wikipedia.org/wiki/CommonJS) で、歴史が長い。nodeの公式ドキュメントを見ると
見るだけのガントチャートを作ってみた
# 作った背景
タイトルはガントチャートだけど、実は簡単なタスクリストのシステムを作りたくて、その表現方法をどうしようか迷ってた。
具体的に言うと、会社で、アンケートやら研修やらを〇日～〇日でやってください！という期間が長すぎて、言われた瞬間にやったのか、後回しにしたのか忘れてしまっているのを、覚えておくシステムがほしかった。ほかの人もその問題は持っているようなので、会社全体として、タスクリストがあるといいなぁと思ってる。そんなときにたまたま、ガントチャートを目にして、上記のシステムの表現方法はガントチャートがいいなぁと思いついた。
そこで次はガントチャートのJavaScriptのライブラリを探してみたところ、たくさんあるけど、高機能だったり、ドラッグで調整できたり、有料だったり、私にとってはオーバースペックなものしかなかった。
なので、作るかと思った次第。
# 作ったもの
## スクリーンショット
何かを作ってみるチャレンジの一環として、
お昼寝用BGM＆アラームツールを作っていきます。### 目的
何か作ってみるチャレンジの目的は、
**HTML/CSS/Vanilla JSを使ってとりあえずなにか作ること、手を動かすこと**です。これでは曖昧すぎるので、もう少し深掘ります。
**現状**
* HTML/CSS/JavaScriptについて、コードを見ればなんとなく理解出来る。
* チュートリアルと一緒に進めれば何かは作れる。
* 0から何か作ろうと思うと厳しい。
* Python(業務効率化などで使用)の場合はある程度出来る。なぜ厳しいのか？を考えた時に、
Pythonとの違いは**実際に手を動かしているかどうか**だなと思いました。プログラミングにおいて手を動かすに勝る学習方法はないと思います。
実感としてもそうですし、そう言っているエンジニアの方も多く感じます。また、質を高めるためにも、まずは絶対的な量が必要とよく言います。
というわけで、色々作ってみることにしま
Vite ＋ Vanilla な JavaScript を軽く試してみる（npm を利用）
この記事では、よく名前を見かけるようになったと思われる「[Vite](https://github.com/vitejs/vite)」を、Vanilla JS と組み合わせて試してみる、というものです。
自分が最初に名前を見かけたのは、以下の記事だったように思います（もしくは、Twitter のツイートで見かけていた、とかかも）。●Viteで爆速なフロントエンド開発環境を作る
https://zenn.dev/sykmhmh/articles/ff09bea2cf7026この後は、以下に記載されているセットアップから、いくつか設定を追加してみる、といったあたりをやっていきます。
●はじめに | Vite
https://ja.vitejs.dev/guide/#%E6%9C%80%E5%88%9D%E3%81%AE-vite-%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%82%92%E7%94%9F%E6%88%90%E3%81%99%E3%82%8B
を今更調査していました。
BodyPixを使用することで、ビデオ映像から人物部分を抽出することができます。BodyPixで人物映像を抽出し、その映像をWebGL側に渡すことで、抽出された人物映像を用いた3次元的な表現ができました。以下のような、ただ背景を隠しただけではないバーチャル背景表現がブラウザ上でできます。
（ちなみに[このサイト](https://hexagramnm.coresv.com/NM_MicDisplay_Web/index.html)で公開し、ソースコードも[GitHub](http
ファイル関連をかく
– ファイルを扱うときのみ**enctype**をつける
– accept=”video/*”で取り込みデータを限定できる。この場合は動画。
– fileapiというJSのライブラリが存在し、フロント側で画像やファイルの生データを取得することができるみたい“`javascript
“`
※ファイル選択とセレクトボックスはonClickではなくonChangeで選択したバリューが変更された時にイベントが発火するようにしたほうがいい
AtCoderのインタラクティブ問題をjavascriptで提出する
# AtCoderのインタラクティブ問題をjavascriptで提出する
結論だけ言うと、
入力はnodejsのreadlineモジュールを使う
出力はconsole.log()でOK(flush処理は特にしない)
最後にreadlineをcloseしておいた方がよい(下記の問題では不要だったがAHC008では必要だった)例として
https://atcoder.jp/contests/language-test-202001/tasks/practice_2
にあるC++のサンプルコードを移植してみると：“`typescript:l_interactive_sorting.ts
import {createInterface} from ‘readline’;const readline = createInterface({
input: process.stdin,
// output: process.stdout,
});const input: string[] = [];
readline.on(‘line’, (line: string)
To-Do ListのChrome拡張機能をVue.jsで作る
#### Chromeの拡張機能でいい感じのTo-Do Listが欲しいと思い、ちょうどバイト先でもVueを使っていたのでVueを使い作ってみました。
(Vue.jsはバージョン2.6.14です。あと, 他の記事を見たときにbuildがめんどくさいと書いてあったのですがその辺りはpythonで実行しています。buildしたときにファイルを追加しなきゃならないのがめんどくさい)# 是非ダウンロードして使ってみて下さい!!!
https://chrome.google.com/webstore/detail/to-do-list/chaiaabmmjdihkcjlpmbadcdmefaljib
ソースコード↓
https://github.com/07130918/ChromeExtentions
### 完成イメージ
バックエンド側：`http://localhost:8080`(express)## エラー内容
Access to fetch at … from origin …has been blocked by CORS policy:
No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to
fetch the resource with CORS disabled.CORSにブロックされた…
## 対応
`yarn add
ISO 8601とJavaScriptのDate
備忘録的にメモ
## ISO 8601
時刻を表すフォーマットはたくさんありますが、よく使用されるISO 8601。
ISO 8601では以下のように時刻を表します。| 拡張表記 | 基本表記 | タイムゾーン | 表す時間 |
|:-:|:-:|:-:|:-:|
| 2022-02-27T15:08:10+09:00 | 20220227T150810+0900 | JST（日本時間） | 日本時間2022年2月27日15時8分10秒 |
| 2022-02-27T06:08:10Z | 20220227T060810Z | UTC（協定世界時） | 2022年2月27日6時8分10秒 |拡張表記が結構APIとかで使われる気がする。
*（”+09:00″はローカル時であることを表すだけなので、そこから9時間引いて計算し直す必要は無い…！）*
## Dateでの扱い方
すべてUTCに変換すると、タイムゾーンを気にする必要は特にない。
`getTime()`をメソッドを用いると協定世界時の1970年1月1日00:00:00からの経過ミリ秒が得られる。
