- 1. 簡単Elixirシリーズ 〜 うるう年判定をJSとElixirで比較してみる簡単なお仕事
- 2. GoogleAppsScriptで大量メール送信 第1回概要
- 3. 【JavaScript】new.target
- 4. 【React】CSSの当て方の種類
- 5. Headタグ正しい使い方をしないとサーバー側エラー？が発生し動かないです。
- 6. 【JavaScript】ところで「値を返す」ってどういうことだっけ
- 7. ?JS初心者が作るGoogle extension V3 ⑩ -popupのポモドーロタイマーの処理-
- 8. 【kintoneカスタマイズ】サブテーブルのレコードに自動採番したIDを付与
- 9. 【javascript】【jquery】のオートコンプリート(autocomplete)で選択した値を取得
- 10. Firebaseを使ったチャットアプリの導入と機能追加
- 11. 【MapLibre GL JS】ポリゴンデータを表示する
- 12. 【スケジューラ】PayPal Rest APIを利用してみる（Transaction:分析）
- 13. ?JS初心者が作るGoogle extension V3 ⑨ -ポモドーロタイマーの処理-
- 14. 疑似ヒアドキュメントを使ったローカルのmdファイルをブラウザで表示する
- 15. GridDBを用いた世界的な燃料価格の変動傾向の分析
- 16. JSPrimerのTodoアプリにて、個人的に謎な２点。
- 17. ?JS初心者が作るGoogle extension V3 ⑧ -start/stop/reset押した時の挙動-
- 18. ?JS初心者が作るGoogle extension V3 ⑦ -初インストール時の処理/５分間の再接続処理-
- 19. MindARトラブルシューティング
- 20. Mapオブジェクトはmapメソッドを使用できる【Javascript,Typescript】
簡単Elixirシリーズ 〜 うるう年判定をJSとElixirで比較してみる簡単なお仕事
Elixir
東京にいるけどFukuokaexのYOSUKEです。簡単 Elixirシリーズでは小ネタをサクッと書いていこう。というコンセプトで作っていきます。
仕事柄、Elixir以外の言語を使ってサンプルコードを作成する。または教材を作ることをやっています。最近、うるう年か否かを返してくれる関数を作りなさい。というお題のJavaScriptのコードを書いたので、Elixirで書くとどうなるか？を試してみようという記事です。（そう、この記事はサクッとがコンセプトW）
お題は、“`isLeap(“2004”)“`という関数を実行して、“`true“`のような結果を返すものです。
まずは、JavaScriptのコードを見てみましょう。
“`javascript
function isLeap(string){const year = parseInt(string,10)
if(year%4===0){
if(year%100===0){
if(year%400!==0){
GoogleAppsScriptで大量メール送信 第1回概要
## 経緯
PowerAutomateDesktop(PAD)でメール送信(Gmail)フロー作成した際に、以下の情報が。>「アカウントを安全に保つため、2022年5月30日より、Googleは、ユーザー名とパスワードのみでGoogleアカウントにログインするサードパーティ製のアプリとデバイスについてサポートを終了いたします。」と発表がありました。
要するに、外部アプリからGoogleアカウント利用に対して制限をかけるとのこと。
確かに、セキュリティ的にも危険ではありますからね。サードパーティーがダメなら、GoogleAppsScript(GAS)であれば、送信できるのかな？と考えて、実装しました。
::: note info
ちなみに実業務では使っておりません^^
:::## GASで実装してみて
1.プログラミング初心者向き
PHP・Javaなど学習することももちろん良いですが、GASは環境構築は不要なため、直ぐに始めることできます。
また、JavaScripをベースに作られているようなので、JavaScriptの勉強にもなります。
2.課題解決力
【JavaScript】new.target
ES2015から、実行されたコンストラクタを参照する`new.target`というヤツが追加されました。
___
### コンストラクタ関数が`new`を使わず実行された場合にエラーを出力
~~~javascript
function Human (name, food) {
console.log(new.target); // [Function: Human]
this.name = name;
this.food = food;
}const human = new Human(‘Jack’, ‘?’);
console.log(human); // Human { name: ‘Jack’, food: ‘?’ }
~~~上記のプログラムでは、コンストラクタ関数（`Human`）を実行し、オブジェクトを生成しています。
**`new`が使用された場合、`new.target`は実行されたコンストラクタ関数を参照します。**
暗黙的に空のオブジェクト(`this`)を生成し、呼び出し元に生成したオブジェクトを返却する挙動は、`new`を使った実行が前提
【React】CSSの当て方の種類
# はじめに
こんにちは、キモオタエンジニアのTonosakiです！この記事を開いてくれてありがとうございます！
今回はReactのCSSの書き方についてまとめていきたいと思います。# CSSの当て方の種類について
Reactではスタイル（CSS）の当て方が色々とあります。ここではその中でも以下のメジャーな5種類を紹介しようと思います。
・Inline Style
・CSS Modules
・Styled JSX
・styled components
・Emotion※今回紹介する5種類のスタイルのプレビューは全て以下のようになります。
# Inline Style
JavaScriptのオブジェクトの形でCSSプロパティと、値を指定し、タグのstyleに設定することでスタイル（CSS）を適
Headタグ正しい使い方をしないとサーバー側エラー？が発生し動かないです。
#
タグを正しく使わないと、エラーが起きて正しくサイトが読み込まれません。
Nextで作成したWebアプリケーションをVercelでデプロイしたのですが、
“`console
react_devtools_backend.js:4026 TypeError: Cannot read properties of null (reading ‘content’)
…
…
“`
ようなエラーが出てしまい、「サーバーサイド側で記述をミスったのかな…」
と思っていたのですが、色々見た結果nextの書式で間違っていることが判明、、
“`js
ログインページ
“`
このような記述をしていたのが原因でした。omg正しくは以下ですね↓
“`javascript
ログインページ
“`
next初学者の方ご参考までに、以上
【JavaScript】ところで「値を返す」ってどういうことだっけ
こんにちは。
最近さらにJavaScriptの魅力に気が付きつつあるSarasaです。チュートリアルやらQiitaなどの投稿サイトを見てJavaScriptを勉強していると必ずといって出てくる
**「値を返す」**
というワード。
どのサイトでもあまりにさらっと出てくるけど
**「返すって言葉の含む領域広すぎじゃね？？」**
という疑問がぬぐえなかったので私なりの所感をまとめていければと思います。# 「返す」と聞いてわたしが想像したもの
「返す」と言えば、、
**ボールを返す**とか
?JS初心者が作るGoogle extension V3 ⑩ -popupのポモドーロタイマーの処理-
前回の続き → [?JS初心者が作るGoogle extension V3 ⑨ -ポモドーロタイマーの処理-](https://qiita.com/mmaumtjgj/items/2c2e117d31db69adb825)
完成した作品は → [こちら?](https://chrome.google.com/webstore/detail/%E3%83%9D%E3%83%A1%E3%83%89%E3%83%BC%E3%83%AD/nfmmdehbjbenlngbihdhheccephmdfco)
## popupのポモドーロタイマーの処理
popupに戻ってきました。
おさらいですが現状popupはこうなってます。
“`popup.js//色々定義
const ~~
let ~~
//がいっぱい//タブの切り替え
document.addEventListener(‘DOMContentLoaded’, function(){省略}, false);//「タイマーを設定する▷」を押した時
makeTimerBtn.onclick = function() {省略};
【kintoneカスタマイズ】サブテーブルのレコードに自動採番したIDを付与
# 目的
サブテーブのレコードにID列をもたせ、自動で番号を連番で採番する。# 要件
1. サブテールにID列を設ける
1. IDは自動採番された番号とする
1. サブテーブルのレコードが削除されても、他のレコードIDは影響を受けない# 実装
IDとして使用するため、一度採番された番号は必ずそのレコードと紐付く必要がある。
サブテーブルにレコードが追加された場合に、最後に発行されたIDに追加レコード分を加算し、連番を発行させる。
またサブテーブルのレコードの削除でレコード数が変わっても、採番された連番は影響を受けない。| フィールド名 |フィールドタイプ|内容 |
|:-|:-|:-|
| サブテーブル_id | 数値 | 自動採番されるサブテーブルレコードのID |
| サブテーブルMaxID |
【javascript】【jquery】のオートコンプリート(autocomplete)で選択した値を取得
# コード
“`javascript
‘セレクタ’.find(‘セレクタ’).autocomplete({
source: function(request, response) {
///////////
処理
//////////
},
autoFocus: true,
delay: 200,
minLength: 2,
select : function(e, ui){
///////////↓これ
console.log(ui.item.value));
///////////↑これ
}
});“`
Firebaseを使ったチャットアプリの導入と機能追加
**Firebase**とは、Googleが提供しているアプリ開発プラットフォームである。
Firebaseがサンプルコードを提供しているチャットアプリを導入する流れについて説明する。
また、導入したアプリに独自で追加した機能についても紹介する。## 開発環境
この記事の内容を実行した際の開発環境は以下の通り。
* PC
MacBook Air
プロセッサ：1.6 GHz デュアルコアIntel Core i5
メモリ：8GB
OS：macOS Ventra バージョン13.0* コードエディタ
Visual Studio Code
バージョン： 1.71.1 (Universal)* ブラウザ
Google Chrome
バージョン： 107.0.5304.87（Official Build）## 導入方法
Firebase Codelabが公開している[ドキュメント](“https://firebase.google.com/codelabs/firebase-web?hl=ja#0”)に沿って作業をしていくことでチャットアプリは導入できる。(閲覧日：2022/11
【MapLibre GL JS】ポリゴンデータを表示する
## はじめに
この記事は#30DayMapChallenge2022 3日目の記事です。
テーマはPolygonsです。
MapLibre GL JSを使ってPolygonデータを地図上に表示してみます。
https://30daymapchallenge.com/
## Polygonとは
ベクタデータの3要素（ポイント・ライン・ポリゴン）のうちの1つ。
終点を始点に一致させた多角形の面を指します。## 地図表示
船橋市周辺を表示してみます。“`index.html
サンプル
【スケジューラ】PayPal Rest APIを利用してみる（Transaction:分析）
前回の[記事](https://qiita.com/Miki_Yokohata/items/b6ed8313c5c45a00373a)でPayPal Rest APIにGetリクエストを発信し、**Transaction**情報を取得しファイルに保存しました。
今回は、そのファイルを分析しながらJSON形式のデータを読み解いていきたいと思います。
そして再度、[Sharperlight](https://sharperlight.jp/)スケジューラのタスクを利用します。
なぜ、Sharperlightスケジューラのタスクを利用しているかというと、このような、つまりRest APIを利用してデータを自前のデータベースに保存および同調させ、Sharperlightの強力なレポーティング機能等を利用して業務に役立つよう可視化するといったソリューションを作成する場合は、同調プロセスを自動化したいという理由からです。今回の分析タスクを作成するにあたり、本来はPayPal Rest API側のスキーマや取得するデータ構造等の変更によって発生するであろうこちら側の変更作業をできる限り減らしたい
?JS初心者が作るGoogle extension V3 ⑨ -ポモドーロタイマーの処理-
前回の続き → [?JS初心者が作るGoogle extension V3 ⑧ -start/stop/reset押した時の挙動-](https://qiita.com/mmaumtjgj/items/6b638388e7c39b2863f4)
完成した作品は → [こちら?](https://chrome.google.com/webstore/detail/%E3%83%9D%E3%83%A1%E3%83%89%E3%83%BC%E3%83%AD/nfmmdehbjbenlngbihdhheccephmdfco)
## ポモドーロタイマーの処理
前回の記事で“stopId = setInterval(pomodoro_timer, 1000);“と出てきました。ようやくメインの“pomodoro_timer（）“を見ていきます。“pomodoro_timer（）“は
ポモドーロタイマー ＝ 集中時間用カウント + 休憩用カウント
pomodoro_timer() = count_down() + interval_count_down()### count_
疑似ヒアドキュメントを使ったローカルのmdファイルをブラウザで表示する
[HeredocForMarkdown](https://github.com/etsuhisa/HeredocForMarkdown)というスクリプトを作成してみました。
Javascriptの関数のコメントによる疑似ヒアドキュメントを使って、ローカルのmdファイルをブラウザでHTMLに変換して表示する、というものです。
以下がポイントとなります。
* テキストを独立した複数のファイルで保持する。
* ブラウザでローカルのファイルを扱う。
* ファイル間を移動できる。## mdファイルの形式
読み込めるmdファイルは純粋なMarkdownではなくJavascriptなので、以下のように本文以外に前後に疑似ヒアドキュメントにするための仕掛けが必要です。
“`javascript
MD.set(()=>{/* // magic line# This is sample1
Click the link [sample2](sample2)
to view another md content.*/}); // magic line
“`本文部分だけ抜き出し、Markdo
GridDBを用いた世界的な燃料価格の変動傾向の分析
エネルギーは様々なビジネスにとって最も重要な要素の一つであり、燃料価格の急激な上昇は世界経済に影響を及ぼしています。エネルギーコストは、様々な財やサービスの価格が上昇し、数十年にわたる高いインフレ率に大きく寄与しています。ガス価格は原油価格と連動して変動しますが、その変動幅は常に同じではありません。原油は世界的に取引されている商品なので、主に世界レベルでの需要と供給が価格を決定します。供給が需要を上回れば価格は下落します。逆に、需要が供給を上回れば価格は上昇します。
COVID-19の時はすべてのビジネスが停止していたため燃料需要が減少しましたが、パンデミックによる世界各地の産業再開から急に増加しました。一方、ロシアがウクライナに侵攻してからは状況が悪くなりました。ロシアは世界最大の石油生産・輸出国であり、アメリカやカナダなど多くの国がロシアの輸入を禁止したため、燃料価格が軒並み高騰したのです。
今回は、最新のデータセットとGridDBを用いて、世界の燃料価格とその需要について考察します。
[ 完全なソースコードはこちら ][1]
## GridDBを用いたデータセットのエクス
JSPrimerのTodoアプリにて、個人的に謎な２点。
確実に初心者な疑問なんだろうなと思う・・・・
※ 以下のソース部分は、JSPrimerさんより引用しています。
https://jsprimer.net/use-case/todoapp/form-event/# ① `
`が何故、`
`に変換されるの？
[A]部のconsole.logの結果が、`
`となる。
タブ関数`element`
“`
element``
“`
の引数にテンプレートリテラルが存在しないので、`strings`には``がそのまま入っていて、`reduce`の内部は実行されていない。
それなのに何故、その結果の`todoListElement`が`
`に変換されいるのだろうか？？？
# ② `console.log`って、なんか順番通り実行されない？
[B-1]、[B-2]、[B-3]の３か所で行っている`console.log`、この結果が全て
“`
- (inputElement.valueの内容)
“`
個人的にこの
?JS初心者が作るGoogle extension V3 ⑧ -start/stop/reset押した時の挙動-
前回の続き → [?JS初心者が作るGoogle extension V3 ⑦ -初インストール時の処理/５分間の再接続処理–](https://qiita.com/mmaumtjgj/items/d8083ac9576ea9dbe123)
完成した作品は → [こちら?](https://chrome.google.com/webstore/detail/%E3%83%9D%E3%83%A1%E3%83%89%E3%83%BC%E3%83%AD/nfmmdehbjbenlngbihdhheccephmdfco)
## start/stop/reset押した時の挙動
“`background.js
let stopId//start・stop・resetボタン押された時の処理
chrome.runtime.onMessage.addListener(async function(request, sender, sendResponse){
await keepAlive();//switchがonの時 かつ stopIdがnullの時
if(r
?JS初心者が作るGoogle extension V3 ⑦ -初インストール時の処理/５分間の再接続処理-
前回の続き → [?JS初心者が作るGoogle extension V3 ⑥ -タイマー作動中の有無で表示する画面の処理-](https://qiita.com/mmaumtjgj/items/d8083ac9576ea9dbe123)
完成した作品は → [こちら?](https://chrome.google.com/webstore/detail/%E3%83%9D%E3%83%A1%E3%83%89%E3%83%BC%E3%83%AD/nfmmdehbjbenlngbihdhheccephmdfco)
## background.js
このjsファイルでは
・拡張機能を初めてインストールした時にする処理
・５分間の再接続処理
・start/stop/reset押した時の挙動
・ポモドーロタイマーの処理
を行う。この記事では拡張機能を初めてインストールした時にする処理を記述していく。## 初インストール時の処理
初めてインストールした時、タイマーのフォームに最初からデフォルト値を入れて置きたかったので、“chrome.runtime.onInstalled.addLi
MindARトラブルシューティング
# クリックイベントが発生しない
MindARのオブジェクトはA-Frameタグを利用しているが、`cursor=”rayOrigin: mouse` アトリビュートを付与してもクリックイベント（onClick,OnMouseUp等）が発生しないが、MindARではクリック対象のタグに`class=”clickable”` を付与することでクリックイベントが取得できるようになる。“`javascript
console.log(“clicked”)}
src=”#pro_video”
width=”1.3″
Mapオブジェクトはmapメソッドを使用できる【Javascript,Typescript】
## 概要
Mapオブジェクトを反復で使おうとする際、何も考えず下記のように書くと`プロパティ ‘map’ は型 ‘Map‘ に存在しません。`と注意される。
“`javascript
const hoge = new Map();
hoge.set(“key1″,”value1”);
hoge.set(“key2″,”value2”);
hoge.map(x=>console.log(x))//Error: hoge.map is not a function
“`
これは単純な理由で、Mapにはmapが実装されていないためだ。しかし、上記の代わりに下記を書くと問題なく実行できる。
“`javascript
const hoge = new Map();
hoge.set(“key1″,”value1”);
hoge.set(“key2″,”value2”);
[…hoge].map(x=>console.log(x))
//> Array [“key1”, “value1”]
//> Array [“key2”, “value2”]
“`
これはMa
