- 1. スプレッドシートのIPv4アドレスをソートするGAS
- 2. LightsOutゲームのプログラミング
- 3. AppletをJSに変換してみる 前編
- 4. スプレッドシートの最終行を取得する
- 5. ESP32からLINEメッセージとSlackメッセージを送信する
- 6. OpenStreetMap+Leaflet で「Map container not found.」と出るとき
- 7. 【JavaScript】多次元配列を作成するシンプルな方法【ワンライナー】
- 8. 【JavaScript】Angular, React, Vue.js とフロントエンドの本まとめ
- 9. TypeScriptのPromise.allは10個までしか処理できない
- 10. jQueryを使ってみる
- 11. 【JavaScript】Uncaught TypeError: Cannot read properties of undefined (reading ‘dates’)
- 12. 【Javascript】splitの結果に区切り文字を含める方法とその理由
- 13. JavaScriptにおける this とは？
- 14. Jqueryのtoggle()(トグル)とは
- 15. ES6をBabelでコンパイル
- 16. ある要素に対して同一グループの要素を操作する
- 17. 週番号とはなにか…？
- 18. JavaScriptで要素の表示、非表示を切り替える。
- 19. JavaScript
- 20. XOR
スプレッドシートのIPv4アドレスをソートするGAS
スプレッドシートに書かれたIPv4アドレスをソートして出力する関数です。
IPアドレスをスプレッドシートの機能でそのままソートしようとするとうまくできません。例えばこんなセルがあったとします。
これを「降順でシートを並び替え」すると以下の結果になります。
セルA1とA2を比較した際にA2の方が第2オクテットの桁が少ないため、先頭にしてほしいところですが、セルA1の第2オクテット **10**0 と同じくセルA2の **15** を比較してしまい、セルA1のIPアドレスの方が先頭となってしまいます
LightsOutゲームのプログラミング
LightsOutという数学パズルをHTML + JavaScriptでコーディングしました。
遊べるし、解法も表示されます。
以下、コードです。“`html:index.html
【Lights Out】
いくつかのボタンがあり、その中のいくつかのボタンがオン(オレンジ色)になっている状態から、
ボタンを適当に押すことによって、全てのボタンをオフ(黒色)になるようにするパズルです。
【ルール】
1. ボタンを押すと、そのボタン,およびそのボタンの上下左右にあるボタンのオン、オフが切り替わります。
2. 隅の方のボタンで、上下左右にボタンが無い場合は、その部分は無視してください。
スプレッドシートの最終行を取得する
最終行を取得するには
“`
let lastRow = sheet.getLastRow();
“`
これがシンプルですが、シート全体の最終行をとってしまうので特定の列を指定したい場合、例えばA列の最終行をとりたいとすると
“`
function codeForGetRow() {
let range = sheet.getRange(1, 1).getNextDataCell(SpreadsheetApp.Direction.DOWN);
let lastRow = range.getRow();
return lastRow
}
“`
途中に空白があるが、最終行を取りたい場合“`
function myFunction() {
var lastRow = sheet.getRange(sheet.getMaxRows(), 1).getNextDataCell(SpreadsheetApp.Direction.UP).getRow();
Logger.log(lastRow);
}
“`
ESP32からLINEメッセージとSlackメッセージを送信する
ESP32から、LINEメッセージやSlackメッセージの送信をします。
最初に、各メッセージの送信の方法を説明した後に、ESP32上のJavascript実行環境から送信する方法を示します。# LINEメッセージ送信方法
便利なLINE Notifyを利用します。
以下、参考ページです。
[京急線の運行情報をLINE Notifyする](https://qiita.com/poruruba/items/49956b3db54ca7689b8c)まずは、以下をブラウザから開きます。
https://notify-bot.line.me/
右上のログインをクリックして、ログインします。その後、同じ右上のところから、「マイページ」を選択します。
連携中のサービスにいくつか登録されている状態ですが、最初は何も登録されていません。
OpenStreetMap+Leaflet で「Map container not found.」と出るとき
# 問題
必要な CSS と JavaScript を読み込んでいて･･･
“`html
“`サンプル通りにスクリプトを書いていて･･
【JavaScript】多次元配列を作成するシンプルな方法【ワンライナー】
## 概要
JavaScriptだと多次元配列を直接宣言できないらしい。
ググってみると、入れ子のfor文で作成するのがセオリーみたい。配列作るだけなのに冗長だなぁと思って、シンプルにしてみた。
## セオリー
３行５列の配列をfor文で作る場合こんな感じ。
“`javascript
var array = [];
for(var i=0; i<3; i++){ array[i] = []; for(var j=0; j<5; j++){ array[i][j] = ''; } } ``` `array[i][j]`に 0 を入れておけば、各要素が数値型になるのでそのまま計算可能。 分かりやすいけど、ただの変数宣言と続けて記述すると、ぼてっとして見える。 ## シンプルに セオリーでは要素の個数だけ縦横に宣言していく感じだけど、考え方を変えてみる。 ```javascript var array = []; for(var i=0; i<3; i++) array.push(Array(5)); ``` 空の配列に、要素が５つの配列を３回プッシュしてやれ
【JavaScript】Angular, React, Vue.js とフロントエンドの本まとめ
### JSフレームワークの本まとめ
まだJavaScriptがHTMLページのオマケ扱いでセキュリティ面からも忌み嫌われていた不遇の時代、2005年にGoogle Mapの衝撃が走り`Ajax`のワードが流行ったフロントエンド元年。その後徐々にJavaScriptの復権が始まりました。
`jQuery`などのフレームワーク未満のライブラリが流行ったのが第1世代。その後サーバーサイドのMVCアーキテクチャの思想をクライアントサイドに適用しようとしたり様々なフレームワークが試行錯誤し、そして結局は滅んでいったのが第2世代。
その後表舞台に立ったJavaScriptフレームワークが`Angular`, `React`, `Vue.js`。この3大フレームワークが第3世代と呼ばれており現在の主役となっています。なお他にも話題のフレームワークやライブラリはありますが、第4世代と呼ばれるほどに大きなビッグウェーブはまだキていないようです。
この記事では、第3世代の３つのフレームワークに関する日本で手に入る本を改めてまとめてみました。時系列順
TypeScriptのPromise.allは10個までしか処理できない
# 前提
本記事の内容はTypeScript v4.5以降では改善されています。
動作確認はTypeScript v4.4.4で行っています。# Promise.allでビルドエラーが起こる
Promise.all()は配列など反復可能なオブジェクトを引数にとり、複数のPromiseを同時に実行するメソッドです。複数のAPIを一度にコールして、データを取得する際などによく使われていると思います。
“` typescript
async function fetch1 (): Promise{
// データを取得する処理
}async function fetch2 (): Promise
{
// データを取得する処理
}async function fetch3 (): Promise
{
// データを取得する処理
}const [data1, data2, data3] = await Promise.all([
fetch1(),
fetch2(),
fetch3()
])
// data
jQueryを使ってみる
## はじめに
今回自分はjavascriptを勉強しております。その中でjQueryを用いることで、様々なことが出来るようになるようです。
その中の基本的なところの一部をここに記録として残そうと思います。***何か間違いありましたら、コメント欄にてご教授お願い致します。***
### 準備
– Visual studio code
– 公式サイトでjQueryをダウンロードし別名保存
– html、css、javascriptファイルを同ディレクトリ内に作成
– ダウンロードしたjQueryファイルを上記フォルダ内に配置### jQyueryを利用する
“`sample.html
#このboxclassを使って色々試します。
【JavaScript】Uncaught TypeError: Cannot read properties of undefined (reading ‘dates’)
# 問題点
JavaScriptのコードを書いている該当ページ以外のページに移動すると、下記のエラーが出る。“`console:console
Uncaught TypeError: Cannot read properties of undefined (reading ‘dates’)
“`# エラー文の意味
TypeErrorとあるので、タイプミスをしているのか？
と思ったが、どうやら違うよう。その後の文が重要。
“Cannot read properties of undefined (reading ‘dates’)“
“未定義のプロパティを読み取ることができません(reading ‘dates’)“直訳すると上記ですが、ニュアンス的には下記が正しいらしい。
“undefinedに対してdatesというプロパティは読み込めません“
ここではundefinedが何なのかが重要。ということで調べてみると、、、
undefinedは下記の実際のコード中の定数datasetに値することがわかった。「undefinedな値に対して何かプロパティ
【Javascript】splitの結果に区切り文字を含める方法とその理由
# やりたいこと
“`Javascript
‘abc_def’.split(‘_’) = [‘abc’, ‘_’, ‘def’]; // 実際は[‘abc’, ‘def’]
“`例によって[Stackoverflow](https://stackoverflow.com/a/25221523)に答えがあり引数に区切り文字を`()`で囲んだ正規表現リテラルを渡せばよかった。
“`javascript
‘abc_def’.split(/(_)/g);
“`
# なぜこうなるのか
自分の正規表現知識が足りないだけかと思ったが[MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Globa
JavaScriptにおける this とは？
JavaやKotlin、Swiftなど、多くのオブジェクト指向言語では、this はクラス内メソッドなどで利用され、そのインスタンス自身を指します。
JavaScriptでは挙動が異なります。
本記事では、JavaScriptにおける this の仕様をまとめます。[りあクト！ TypeScriptで始めるつらくないReact開発 第3.1版【Ⅰ. 言語・環境編】](https://booth.pm/ja/items/2368045)を参考にしています。
めちゃくちゃ良書で、JavaScript・TypeScript、Reactについて深堀りされているのでおすすめの本です！# this に関するおすすめルール
[りあクト！ TypeScriptで始めるつらくないReact開発 第3.1版【Ⅰ. 言語・環境編】](https://booth.pm/ja/items/2368045)では、下の２つを守ることが推奨されています。– `this` はClass構文内でしか使わない
– Class構文内では、メソッドを含めたあらゆる関数の定義をアロー関数式で行うその理由を、thi
Jqueryのtoggle()(トグル)とは
# toggle()は、対象の要素を表示・非表示にできる
# コード
### html
“`html
- 【スイッチONだよ】
“`
### jquery
“`javascript
$(‘button’).click(function() {
$(‘li’).toggle();
})
“`# 結果
ES6をBabelでコンパイル
# 引用記事
https://barikanblog.com/javascript-es6-babel/#toc-0Javascriptの新基準であるES6（ES2015=ECMAScript2015）を利用する方法としてBabelによるコンパイルがある。
なぜコンパイルが必要かは、すべてのブラウザがES6に対応していないから。# Babelの使い方
## babel-cliをインストール
“`
// プロジェクトフォルダへ移動
cd myproject// package.jsonを作成
npm init
（色々聞かれるので全てEnter）// babel-cliをインストール
npm install –save-dev babel-cli
“`## .babelrcを作成
プロジェクトフォルダのルートにBabelの設定ファイルである.babelrcを作成。## 利用するPresetをインストールし、.babelrcで設定
ES6からES5にコンパイルしたい場合は、babel-preset-es2015というPresetをインストールし.babelrcへ
ある要素に対して同一グループの要素を操作する
ある要素が“`class=”group1″“`で、clickやhoverしたとき、同じclassを持つ要素すべてに何かしたい！
って時があると思います。あるかな。
雀魂で自分の牌にカーソルをもっていくと、既に捨てられた牌をピックアップするようなアレ。調べ方が悪いのだろうけど、あんまりいいヒントを検索することができなかった。
## とりあえず書いてみる
See the Pen 週番号とはなにか…？
## 概要
週番号（WeekNumber / ウィークナンバー）をご存知でしょうか？
ざっくり「週」に付与されたindexと思って扱ったら、思わぬ落とし穴があったのでご紹介したいと思います。## 本文
週番号とは「週」に付けた通し番号のことで（要はindexなのですが…）、1年の始めから終わりまでの週に1から順番に通し番号が付き、**年が変わるとまた1から番号が付けられます（ここが大事）**。年が変わるとまた1から付与され直されると先ほど書いたのですが、この付与の仕方は地域によって差があり、その差を理解していないと思わぬところで不具合を出してしまいます。
以下のJavaScriptのdayjsを使ったサンプルをご覧ください。
“`tsx
import dayjs from “dayjs”;dayjs(“2022-12-31”, “YYYY-MM-DD”).week(); // ・・・①53
dayjs(“2023-12-31”, “YYYY-MM-DD”).week(); // ・・・②1
“`dayjsの場合、`week()` で該当日付の週番号を取得できる
JavaScriptで要素の表示、非表示を切り替える。
アプリ開発時、要素の表示や非表示を1つのボタンでできないか疑問に思い、備忘録としてまとめます。
イメージは、下記の画像のように「表示非表示ボタン」を押す度に、・aaaaaが表示、非表示を繰り返すようにしたいです。
# 結論
**・toggleを使う。**# コード
“`html:index.html
JavaScript
for文
for(初期化値;ループ継続条件式;増減式){
繰り返し実行したい処理
}(例)
“`
for(let i = 1; i <= 3; i++){ console.log(i); } 出力結果→1,2,3 for文の流れ ①iの初期値１が出力せれる。 ②i <= 3以下なので、i++が実行され1+1の結果２が出力される。 ③i <= ３を満たすまで繰り返す。 ④終了したらfor文の下の記述が実行させる。 *配列は0から始まるので配列が３の場合は3未満なので、<3か <=2と記入する。 let arr = ['red','green','blue']; for(let i = 0; i < 3; i++){ console.log(arr[i]); } *継続条件式にlengthを記入する事で、配列が何個増えても記述を変更できなくて良い。 let test = ['name','tel','gender','birthYear'] for(let i = 0; i
XOR
排他的論理和(eXclusive OR)
2つのうち1つだけ正しければOK、両方正しいか両方間違っていたらNG
