- 1. Google Chatにミーティング予定を通知
- 2. 数値キーを持つオブジェクトの初期化方法
- 3. Mock Service Workerをフロントエンドテストに導入してみた
- 4. 指定された配列の要素を削除する(JavaScript)
- 5. Google Mapよりすごい！と噂の位置情報サービスを使ってみた
- 6. kintone UI Component のDialogコンポーネントを使って入力補助を作成してみた！
- 7. 今日からあなたも競プロ出題者！ブラウザ上で動作するジャッジシステム OnBrowserJudge
- 8. HERE Maps API for JavaScript に3Dマーカーを追加してみた
- 9. DenoでNotionのAPIを触ってみる
- 10. 【?️?️?️】React初学者が麻雀の点数計算サイトを作った話【ロン】
- 11. TypeScriptを知ろう。 – 1. TypeScriptってなぁに？
- 12. [Day22] ドキュメント part2
- 13. 【Alpine.js】x-initでAPIを扱っていく
- 14. 結局レビューは怖い
- 15. マウスストーカー（視線）
- 16. Monaca(Onsen UI)× mobile backendでささっとクラウド連携アプリを作ってみた
- 17. mocha と chai ってなにが違うん？
- 18. ReactHooksについてまとめる（Performance Hooks useDeferredValue）
- 19. 【Babylon.js】Playgroundで遊んでみよう
- 20. 画像を連鎖で消す
Google Chatにミーティング予定を通知
# この記事の読者
* Google Chatに通知を送りたい方
* Calendar API を使いたい/使える方# きっかけ
自分の運営している団体でミーティングを忘れる人が続出したので、それを防止するためにBotを作成した。# 前提条件
* Google Apps Scriptで開発
* 外部ライブラリを使うのは問題ない# 結論
Google CalendarのMeetのリンク取得時のみCalendarAPIを使う必要がある。
したがって、以下のプログラム実行前にGoogle Cloudのプロジェクトと紐付けが必要。
また、6:00~7:00の間にトリガーを設定する前提。# 詳細
~~~js:main.gs
function sendNotification() {
//Set time and API etc.
var now = new Date();
var after = new Date(Date.parse(now) + (60 * 60 * 18 * 1000));
let calendarID = “c_6mq00d
数値キーを持つオブジェクトの初期化方法
“`
const key = 1;
const obj = {
[key]: 200
};
“`
Mock Service Workerをフロントエンドテストに導入してみた
# はじめに
セーフィー株式会社でフロントエンドエンジニアをやっている @ungi_podo です。
この記事は[Safie Engineers’ Blog! Advent Calendar](https://qiita.com/advent-calendar/2022/safie) 21日目の記事です。従来だとapiを利用したテストを書くにはjestのモックを利用してaxiosなどのモジュールをモック化していたと思います。
最近フロントエンドテストではmswを使用してapiを利用したテストを書くことが注目されているみたいなので導入してみました！# Mock Service Workerとは
[Mock Service Worker](https://mswjs.io/)（以下MSW）とはService Workerを通じてAPIリクエストをインターセプトし、mockのレスポンスを返すことができるライブラリです。公式にわかりやすいフロー図があったので紹介します。
指定された配列の要素を削除する方法です。JavaScriptで実装してみます
“`JavaScript
process.stdin.resume();
process.stdin.setEncoding(‘utf8’);
// 自分の得意な言語で
// Let’s チャレンジ！！
var lines = [];
var reader = require(‘readline’).createInterface({
input: process.stdin,
output: process.stdout
});
reader.on(‘line’, (line) => {
lines.push(line);
});
reader.on(‘close’, () => {
const data = lines[0];
const array0 = data.split(‘ ‘);
const N = array0[0];
const T = array0[1];
const array1 = lines[1].split(‘ ‘);
array1.spli
Google Mapよりすごい！と噂の位置情報サービスを使ってみた
こんにちは。ミーティングテクノロジーという会社で会議ツールを開発している伊勢川です。
仕事で位置情報サービスを軽く調べる機会があって、せっかくなので調べた内容を記事にしたいと思います。
位置情報（地図）サービスといえば、Google Mapを思い浮かべる人も多いのではないでしょうか。私もGoogle Mapのヘビーユーザー＆ファンで、カーナビの代わりとして使ったり、街で見つけた史跡の写真等を2000件以上投稿したりしています。
B2Cのサービスの中ではGoogle Mapが圧倒的な存在感を放っていますが、B2B向けのサービスとなると様相が異なるようです。今回は、ある調査でB2B向けサービスの中ではGoogle Mapより高い評価がついていた「[HERE](https://www.here.com/jp)」というサービスについて書きます。
# Google Mapよりすごいと言われる所以はなにか
[Omdiaのレポート](https://www.here.com/platform/omdia-2021-report)によると、B2B市場の位置情報サービスにおいて、総合力では「HE
kintone UI Component のDialogコンポーネントを使って入力補助を作成してみた！
# はじめに
この記事は「[kintone Advent Calendar 2022](https://qiita.com/advent-calendar/2022/kintone)」の22日目の記事です！サイボウズの開発チームが提供してくれている超絶イケてる「**[kintone Rest API Client](https://github.com/kintone/js-sdk/tree/master/packages/rest-api-client)**」「**[kintone UI Compoment](https://kintone-ui-component.netlify.app/ja/)**」を使ったことありますか？？
弊社は、最近の主流である **”ローコード開発””ノーコード開発”** に抗うよう(笑)に、ガッツリとコードを書くような開発をしておりますので、この2つのライブラリにはメチャクチャお世話になっています！！
kintoneでJavaScriptを使ったカスタマイズをする人で、上記2つのライブラリを試した事のない方は、この記事を参考にぜひチャレンジして
今日からあなたも競プロ出題者！ブラウザ上で動作するジャッジシステム OnBrowserJudge
# 要約
– ブラウザ上で動作するジャッジシステムを作りました。
– そのため静的ファイルを置ける場所さえあれば、他にサーバーやアカウント等を用意する必要はありません。
– 言語は現在 Ruby, Python, JavaScript に対応。
– [Ruby の例](https://nodai2hitc.github.io/onbrowserjudge/examples/collatz_ruby_jp.html)、[Python の例](https://nodai2hitc.github.io/onbrowserjudge/examples/collatz_python_jp.html)、[JavaScript の例](https://nodai2hitc.github.io/onbrowserjudge/examples/collatz_javascript_jp.html)
– 自由度が高く、さまざまな形式の問題が作成可能です。
– 例えば AtCoder のように標準入力・出力を用いる問題だけでなく、LeetCode のように関数を作成する問題や、事前に代入された
HERE Maps API for JavaScript に3Dマーカーを追加してみた
## はじめに
前回は**HERE Maps API for JavaScript**にコンパスアイコンを追加してみました。
https://qiita.com/kai1103/items/eda640125423e444282a
やってみて分かったことは、“`mapviewchange“`イベントの拡張性と応答性が結構良かったので、これで地図と連動した独自の3D表現も行けるんじゃないかと思いました。
というわけで今回は**HERE Maps API for JavaScript**に3Dマーカーを追加してみました。
## 動作環境
– OS: macOS Monterey (Version 12.6.2)
– Browser: Google Chrome (Version 108.0.5359.124)
– HERE Maps API for JavaScript (Version 3.1.37.0)
– Three.js (Version r147)## 事前準備
まずは前回最後のテンプレートから始まります。
DenoでNotionのAPIを触ってみる
DenoでもNotionのAPI触ってみたいなーと調べたら、Node.jsのSDKと同じような使い勝手で利用できる非公式SDKがあったので触ってみました。
## 環境
“`bash
$ deno –version
deno 1.29.1 (release, x86_64-apple-darwin)
v8 10.9.194.5
typescript 4.9.4
“`## notion_sdk_deno
執筆次点だと0.3.9が最新の模様です。
– https://deno.land/x/notion_sdk_deno@v0.3.9
– https://github.com/yeukfei02/notion-sdk-deno“`app.ts
import { Notion } from “https://deno.land/x/notion_sdk_deno@v0.3.9/mod.ts”;const notion = new Notion({
token: “APIトークン”,
});const userList = await notion.
【?️?️?️】React初学者が麻雀の点数計算サイトを作った話【ロン】
この記事は、[Ateam LifeDesign Advent Calendar 2022](https://qiita.com/advent-calendar/2022/ateam-life-design) カレンダー3の22日目の記事です！
## はじめに
皆さん、こんにちは。@f0lstと申します！！
今回は**Reactの知識が0だった私**が、**麻雀の点数計算サイト**を作ったお話です?## とりあえず見せてみぃ
というわけで、早速ですが、今回開発したサイトがこちら???
https://mascor.jp/
## なんで作ったの？
ある日こんなことがありました。
同僚?「なあなあ、**雀荘**行ってみません？」
私?「行ったことない！！！行ってみましょ！！」?️……..????
私?「
TypeScriptを知ろう。 – 1. TypeScriptってなぁに？
# はじめに
部署の新人からよくこんな話を聞きました。
* `TypeScript`って難しそうで環境作る時には`JavaScript`を選んじゃいます
* 型って何ですか？
* `JavaScript`と何が違うんですか？`TypeScript`は絶対に使っていきたいので、
部署の新人向けにTypeScript勉強会を開催しました。
その時のメモをこちらにも公開します。同じような悩みを抱えた方の負担が少しでも解消されれば幸いです。
※私もTypeScriptの勉強を始めてまだ日が浅いので色々ご容赦ください…
# TypeScriptってなぁに？
`TypeScript`はいわゆる、`AltJS`と呼ばれる言語です。
## AltJSって？
`AltJS`とは、コンパイルするとJavaScriptになる言語のことを言います。
コンパイルとは、簡単に言うと、ソースコードを解析し、読み取れる形に変換することです。
[JAVASCRIPT.INFO](https://ja.javascript.info/)を元にJavaScriptを勉強していき、そこで学んだ知識をアウトプットしていきます。
２５日でJAVASCRIPT.INFOをやりきり、未経験エンジニアがJavaScriptをマスターする過程を投稿していきます。## 2.1.5 ノードのプロパティ: タイプ、タグとコンテンツ
### 知らない単語
– 無し### 学んだこと
– DOM ノードクラス異なる DOM ノードは異なるプロパティを持ち、例えば、タグ a に対応する要素ノードはリンク関連のプロパティを持っていて、input に対応する要素ノードは入力関連のプロパティを持っている
テキストノードは要素ノードとは違うが、すべての DOM ノードのクラスは1つのの階層を形成するため、すべてのノードで共通のプロパテ
【Alpine.js】x-initでAPIを扱っていく
# x-initとは
Alpine.jsを呼び出すときに最初に行う処理です。
こちらで説明してます。https://qiita.com/yowatsuyoengineer/items/13caa80417ce08f0bef5
# x-initでAPIを叩く例
JSONplaceholderからデータを持ってきてます。See the Pen 結局レビューは怖い
## はじめに
もうこの季節がやってきたんですね。1年は早いです。
この業界に来て3年、レビューをする機会も増えてきましたので、その所感を3つほど書いていこうと思います。## 一番大事なのは要件が満たされていること
以前の私は、レビューをとても崇高なものだと思っていました。私なんかが指摘していいのだろうか、、何を見ればいいかわからない、、
などと考えれば考えるほど自信がなくなってゆくのです。ですが、私が担保しなければならない最も大事なことは、画面が要件通りにきちんと動くこと、だと気づきました。
・ここのリンクを押したら〇〇のページに遷移する
・ボタンをクリックしたらXXが表示される当たり前に実装されていると思いがちですが、結構漏れていることがありました。
ソースコードを見て、ちゃんとBEMで実装できてるかな〜〜なんて見る前に、まずは画面を触って期待通りに動くかどうかを確認することの方が1000000倍重要です。（自戒）特別な知識がなくても確認できること、なおかつ一番大事なことなので、何を見たらいいかわからない、という方はまずここを
マウスストーカー（視線）
## この記事の概要
マウスストーカーってありますよね。
マウスカーソルにくっついてくる、丸とかキラキラなアレです。一般的なマウスストーカーが物理的なストーカーだとすると、精神的なストーカーってなんだろう……と思いました。
色々考えた結果、ずっとマウスカーソルを見続けてきたら精神的なストーカーなのではないかと思い、作ってみました。なお一般的なマウスストーカーとして指すのは以下のようなものをイメージしています。
## 完成形
精神的なストーカーとまで言うと怖いので、見た目は少し可愛くしました。
マウスを動かして試してみたください。
どこに動かしても目線が追いかけてきます。Monaca(Onsen UI)× mobile backendでささっとクラウド連携アプリを作ってみた
# 自己紹介
こんにちは?
初めて[FUJITSU Advent Calendar](https://qiita.com/advent-calendar/2022/fujitsu)に参加させていただきます?
今回は、富士通クラウドテクノロジーズで提供しているクラウドサービス「[ニフクラ mobile backend](https://mbaas.nifcloud.com/)」を使って簡単なアプリを作っていきたいと思います！この記事を読んで、「アプリってこんな簡単に作れるんだ☺」と思っていただければ嬉しいです?
コードも公開しているのでご自由に活用してくださいね！
少し長めの記事ですが、プログラミングをやったことがある方は**20分程度**で完成する内容になっています??# 今回開発するアプリ
* Onsen UIを使ってネイティブライクでリッチな見た目にしつつ、クラウド連携もしているアプリをささっと作ってみようと思います
* 今回は[Onsen UIをはじめよう！](https://ja.onsen.io/v2/guide/)にサンプルコードがあるシンプルなアプリをベースに
mocha と chai ってなにが違うん？
みなさん JavaScript, Node.js でのテストには何を使っているでしょうか。
たぶん Mocha & Chai, Jasmine, Jest あたりが有名かなと思います。Jest は使ったことがないので省きますが、Jasmine って単体で使えるんですよね。
じゃあ Mocha と Chai は何でセットなんだ…？ 何が違うんだ…？ と疑問に思ったのでこの記事では Mocha & Chai コンビについて調べていきます。
## Mocha とは
[Mocha – the fun, simple, flexible JavaScript test framework](https://mochajs.org/)
Mocha は JavaScript の **テストフレームワーク** です。
ブラウザと Node.js で動作します。非同期のコードをテストすることも可能です。`describe` や `it`、`beforeEach` や `after` などの関数を使うことができ、テストを実行するメインの機能を持っています。
テストコードは以下のように構成
ReactHooksについてまとめる（Performance Hooks useDeferredValue）
# 概要
ReactHooksのPerformance Hooksについてのメモ記事です。基本的にReactの公式ドキュメントの咀嚼記事となっています。
今回はuseDeferredValue編です。
## useDeferredValue
### 新しいコンテンツがロードされているときに古いコンテンツが表示される
UIの一部の更新を遅延させるために、コンポーネントのトップレベルでuseDeferredValueを呼び出します。
例を見たほうがわかりやすいので、一気に例から見てみます。
https://codesandbox.io/embed/priceless-cannon-lcqe7b?fontsize=14&hidenavigation=1&theme=dark
この例では、検索結果を取得する際に、useStateの更新関数のsetQueryによって、Suspenceが発火し、`Loading…`が表示するようにfallbackされます。
このコード内で、useDeferredValueを使用して、クエリの遅延の際に、古い結果を表示させるようにします。
【Babylon.js】Playgroundで遊んでみよう
こんなものを作りました。( [Playgroundで見る](https://playground.babylonjs.com/#I2Q4K4#5) )
# はじめに
ARIの土井です。去年のアドベントカレンダーから記事投稿ができておらず、久しぶりの投稿になってしまいました。
今回は1か月ほど前にさわり始めたBabylon.jsについての記事を書きたいと思います。https://www.babylonjs.com/
# Babylon.js とは
Microsoft社が提供しているWebGLフレームワークです。2022年5月5日にv5.5.5がリリースされ様々な機能の追加アップデートがありました。Release VideoがYoutubeで公開されているので、ぜひ見てみてください。
画像を連鎖で消す
この記事は[クソアプリ Advent Calendar 2022](https://qiita.com/advent-calendar/2022/kuso-app
)の22日目の記事です。みなさん、『ぷよぷよプログラミング』はご存知でしょうか。
セガが提供している、Javawscriptでぷよぷよを実装するプログラミング教材です。
無料で学ぶことができます。https://puyo.sega.jp/program_2020/
先日地元のプログラミングコミュニティ[鹿児島.mk](https://kagoshima-mk.connpass.com/)でこれを題材にした体験会を実施しました。
https://zenn.dev/kurehajime/articles/c174305742aeb5
## というわけで画像を連鎖で消すやつを作ってみました
ぷよぷよを実装していくうちに、色んなものを連鎖で消したい欲求がムクムクと湧き上がってきたので、任意の画像を連鎖で消すやつを作ってみました。
こういう画像があるとします。
