[TS/JS] Logical Assignment Operatorの挙動

挙動のメモ書き

– [TS Playground](https://www.typescriptlang.org/play?#code/PQKhCgAIUgZB7A5gSwMYEMA2kCCBnPZRAOwFsBTYgF0gHkAHcgJ3SvibyhGHHAG8okUBEiiYCFBmw4AcgBFI6AkWLlS1QdEiaYAAUzJiAa0gALKlXp4AXMGAATcgDdymeIyYA6UvABeyTEx0T3ZEYEoAWgBVAGUHeFQ8YAB1cgAjYAApdCd0GNQmZHoqYAAlcgAzZkpUcmAGZlZ2JIk0LAB9WTl2pUISCg1RaB5RVHhiPBo3REgAXkgACk9l9CZEG0ViAE8AbQBdAEo5gD5IMYn4THJPaYWAIgBiLruAGkhlz1X1g4BuXlErjR0ABGOaQACuxEcFUM5Hsf1EIMgADJkfM7lRTMg8JBsZAZLQACqQVQAd0guUw4PIdx+QmAkEAvBuAUT3ALAEgAEyQDwf4JbnxFKCAL6-f6QQGQNKg9GYvF4

GridDBを用いた小惑星の地球への距離の解析

今回は、小惑星が地球にとって危険かどうか、つまり、軌道を外れて地球に降り、住民に危害を加えるかどうかを科学者がどのように判断しているかをGridDBを使って解析してみます。

ソースコードの全文はこちらでご覧いただけます。

## GridDBを使ったデータセットのエクスポートとインポート

GridDBは、高いスケーラビリティと最適化を実現したインメモリNo SQLデータベースで、特に時系列データベースにおいて、より高いパフォーマンスと効率性を実現するための並列処理を可能にします。今回はGridDBのnode jsクライアントを使用し、GridDBとnode jsを接続し、リアルタイムにデータをインポートまたはエクスポートすることができます。

これらは、我々のデータセットに存在する列です。

1. id : NASAの科学者がつけた小惑星のID。
2. new_name : NASAの科学者がつけた小惑星の名前。
3. est_diameter_min :

全くの未経験からエンジニアに！　３ヶ月で学んだことの整理

はじめまして もしゃねこです！

この記事の内容

• 自己紹介
• Qiitaを始めた理由
• ３か月で学んだこと一覧
• 現状の課題

自己紹介

元記事を表示

【JavaScript・TypeScript】export default

# export default とは
“.js“ファイルからあるコンポーネントをexportするとき、**export default コンポーネント**とすることで、他のファイルでそのコンポーネントをimportするときに任意の名前で使うことができる、というものです。例を示します。
# 使用例
“Discord.js“でDiscordのボットを開発しているときの例。TypeScript要素ありますが内容わからなくても大丈夫です。
messageCreateというeventと、“!shutdown“で動作を停止する関数handlerを**export default**でexportしています。
“`typescript: shutdown.ts
import { Message } from “discord.js”;
const prefix = require(‘../config/config.json’).prefix;

const event = ‘messageCreate’;

const handler = async(message: Messag

元記事を表示

Nextjs,React勉強記~とらハック氏の動画メモ~

下記のYouTube動画で学んだ自分用メモを残す

# 参照
– React講座基礎編
– https://youtube.com/playlist?list=PLX8Rsrpnn3IWPoM7-1YPDksRRkamRY25k
– Next.js講座
– https://youtube.com/playlist?list=PLX8Rsrpnn3IUGEyanrHYGjY1WOzNe7Jd-

# Nextjs

pre-rendering

ブラウザに渡す前または渡す際にサーバー側で
HTML,JS,CSSのファイルを生成してしまう事

メリット
– SEO
– 高速な表示

pre-renderingの方式(**いつ**HTMLファイルを生成するかがポイント)
– static generation→ビルドする時に生成する。使用のたびに再利用する
– server-side generation→リクエストに応じて生成する。

ページ内でもフォームごとに方式を切り替えることが可能

next.jsはstatic generation推しみたい

# Reac

元記事を表示

Firestoreでリアルタイム更新＋無限スクロールの実装方法、２つのパターン:その１

# はじめに

Firestoreの１番の魅力と言っていい、リアルタイム更新機能ですが、それと無限スクロールの組み合わせって、かなりありそうなのに、意外と悩むところです。

弊社自社サービスのバーチャルオフィスRemottyは、チャットによるコミュニケーションを行うため、この実装はいろんなところでやっています。

そこで実装方法は、２つに分かれると思っていまして、それぞれのパターンで実装方法をまとめていきます。

２つのパターンをまとめると以下のような感じ

– コスト高めだけど実装がシンプル
– コストを最小限にできるし、いろいろ応用が効くけど実装が大変

今回はこの中でもシンプルなる１つ目の方法の実装を行います。

## 実装方法

この方法は、Firestoreのリアルタイム監視の仕組みにすごくマッチしているので、実装自体はシンプルです。

ざっくり実装方法をいうと、”limitを増やしてロードしていく”です！

まず、Firestoreのリアルタイム更新の関数であるonSnapshotの使い方をおさらいします。

“`ts
import { collection, que

元記事を表示

TypeScriptの{readonly a: number}型で、aプロパティが変更不可になると思っている人はいますか？

こんにちは。
最近Haskellを書いていない、型エンジニアのaiya000です！

皆さんは下記コードの`readonly`で、`y.a`は変更されることがないと思っていませんか？
残念ですが、それは**間違い**です！

“`typescript
const y: { readonly a: number } = { a: 42 }
“`

# `const`と`readonly`とは？
## `const`

上述のコードの`y.a`は、ある方法で変更され得ります。
しかし本来は**変更されるべきではない**です。

どうして上述のコードが不変であるべきなのか、改めて再確認してみましょう。
まず`const`は「再代入」を許しません。
次の例で表せます。

“`typescript
const x: number = 42
x = 10 // コンパイルエラー
“`

大丈夫です、このコードは**正しくコンパイルエラーになります**。

## `readonly`

次に`readonly`です。
下記に示すコードも、**正しくコンパイルエラーになります**。

“`

元記事を表示

Git管理しているCF2の関数をJestでテストする

## 結論

rewire という package を使うと `module.exports` していない関数を Jest でテストできます。
https://github.com/jhnns/rewire

## 背景

CF2 の関数を Git 管理しています。
その関数を Jest でテストしたいと思いましたが、CF2 では `module.exports` が使えません。
よって `module.exports` をせずに、Jest でテストを書く方法が知りたいと思いました。

## 前提

この記事では、例として下記の関数を想定します。

“`javascript:index.js
function handler(event) {
var response = event.response;
var headers = response.headers;

if (!headers[“access-control-allow-origin”]) {
headers[“access-control-allow-origin”] = { value: “*

元記事を表示

【MUI】DataGridのrenderCellでボタンを追加して押してみてもStateを更新できなかった件

### やりたかったこと
DataGridで作成した表のセルの中にボタンを配置し、ボタンを押すと押した行の特定の値がuseStateで設定したStateにどんどん追加されていくような仕組みを作りたかった。

“`react: App.tsx
function App() {
// ボタンが押された行のValueを追加していく配列のState
const [data, setData] = useState([]);

// ボタンが押された時の処理
const handleClick = (value: string) => {
setData([…data, value]);
};

// カラムの定義。ボタンを配置するセルにはrenderCellを利用。
const column: GridColDef[] = [
{ field: “id”, headerName: “ID” },
{ field: “value”, headerName: “Value”

元記事を表示

エンジニアインターン1日目

今日は基本単純作業を行った。
今日は学ぶことより感じたことの方が多かった。
ゴリゴリ開発している先輩エンジニアの横で単純作業…
恥ずかしい気持ちと悔しい気持ちがあった。
一日も早く自立できるエンジニアになりたいと思った。
そう思うからこそ今やっていることを一生懸命取り組んでいきたい。

元記事を表示

SharePoint OnlineでREST APIを使ってリストアイテムを登録/更新/削除する

# はじめに

[前回の記事](https://qiita.com/newbee_abs/items/cc39a9ff3941d0f349cd)の続きです！

SharePointOnlineで作成したリストに対してJavaScriptからデータの登録/更新/削除を行うメソッドについてまとめています。

# リスト名と対象アイテム
今回は以下のSharePointリソースに対して操作を行います。

## リスト
|リスト名|
|-|
|Fruits|

## リストアイテム
|カラム名|プロパティ|
|-|-|
|Title|テキスト|
|Quantity|数値|
|HasStock|はい/いいえ|

# POSTメソッドによるリストデータの登録
POSTメソッドでデータを追加する場合は、リクエストの`data`部分に登録するデータを設定します(各プロパティに対応する値を指定)。
また、リストの`ListItemEmptyTypeFullName`の値をHTTPリクエストボディに記述する必要があります。[^1]

“`javascript
// 登録データを設定
const dat

元記事を表示

paizaラーニング レベルアップ問題集 二分探索メニュー応用編 JavaScript 垣根

垣根 (paizaランク B 相当)

https://paiza.jp/works/mondai/binary_search_advanced/binary_search_advanced__hedge

# 誤答例
1秒ごとに全ての木についてK以上か判定しているとタイムオーバーする。
“`javascript:誤答
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);
//木の本数を表す整数 N と、垣根の高さを表す整数 K
const [N, K] = lines[0].split(” “).map(Number);
//t秒ごとにすべての木の長さ判定
let t = 1; //t秒後
while (true) {
let flag = true;//全ての木の高さがK以上ならtrue
//i本目の木の高さを求め、K以上か判定
for (let i = 1; i <= N; i

元記事を表示

初心者「Next13でGSAPしたい・・・！（怒涛のエラー）」

# はじめに
この記事は私（超絶初心者）が最近リリースされたNext.js 13 で GSAP(GreenSock Animation Platform）を動かすために、AppディレクトリやHooksやらで試行錯誤したので備忘録として纏め、ついでに誰かのお助けになれればと思い記述しています。

# そもそもNext13で何が変わったのか

https://nextjs.org/blog/next-13

https://zenn.dev/karibash/articles/eaba1b51fc757e

・app/ Directory (beta): より簡単に、より速く、クライアント側JSのサイズをより小さく。
　 ・Layouts
　　　・React Server Components
　　　・Streaming
・Turbopack (alpha): Rustで実装したWebpackの代替バンドラーで最大700倍高速化。
・New next/image (stable): ネイティブブラウザの遅延ロードを利用し、より高速に。
・New @next/font (beta): レ

元記事を表示

paizaラーニング レベルアップ問題集 二分探索メニュー応用編 JavaScript 集団検査

集団検査 (paizaランク C 相当)

https://paiza.jp/works/mondai/binary_search_advanced/binary_search_advanced__group_test

# 解答例
N通りの候補を2で割っていき、最終的に1通りになればよいです。
偶数を2で割る場合はそのままでよいですが、奇数を２で割る場合、1余りますので、商を切り上げます。

“`javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);

let N = Number(lines[0]);
let count = 0; //薬品の使用回数

while (N > 1) { //最終的に1通りになればよい
count += 1;
N = Math.round(N / 2); //奇数の場合切り上げる
}

console.log(count); //使用回数を

元記事を表示

【ESLint】Parsing error: ESLint was configured to run on `/jest.config.js` using `parserOptions.project`をなんとかする

# はじめに

Firebase Functionsのプロジェクトを初期化した際に、CLIに従ってESLintを導入した場合、**jest.config.js**を開くとエラーが表示されることがあります。


# 具体的なエラーの内容

先ほどの画像に表示されているエラーとして、**Parsing error**がVSCodeに表示されています。

“`
Parsing error: ESLint was configured to run on `/jest.config.js` using `parserOptions.project`:
– /../../../../../users/xxx/firebase/firebase-project/functi

元記事を表示

javascript function からphp sessionへデータを渡す？

PHPとJavascvriptの組み合わせによるSESSIONデータの受け渡しを行うサンプルを、AjaxのsendRequestを利用して遷移せずに、PHPプログラムへSESSION関数としてデータを渡す例を記述してみました。
だいぶ以前から使っている、Ajaxライブラリー/ajax/lib/jslb_ajax.jsを使っています。
また、callbackを使えば、遷移せずにデータを取得することも可能です。
dataget.php
“`
“`
上記のようにPOSTデータをSESSIONデータとして受け取るとして、送る側のjavascriptの記述を下記のようにしてみます。
HTML
“`

名前	もしゃねこ
性別	女性