- 0.0.1. クイズアプリを作ってみた
- 0.0.2. スクロールダウンしたときにヌルッとでてくるヘッダーの作り方
- 0.0.3. 初心者のプログラミング２
- 0.0.4. swiperでエラーが出ないのに、意図しない動き
- 0.0.5. オブジェクトのある特定のキーを取得する方法
- 0.0.6. multiple属性のinput type=’file’にドラッグ&ドロップで複数のファイルを一個ずつ追加していく方法
- 0.0.7. ブラウザでコード譜を書く : “fumen” の紹介
- 0.0.8. Kinx ライブラリ – 自動組版(Tiny Tyesetting)
- 0.0.9. 【JS】各要素に対応する配列があるか調べるプログラム
- 0.0.10. 【Nuxt.js】ページ移動先の、非同期通信のお作法
- 0.0.11. ReactのhooksのESLint対応
- 0.0.12. DOMと仮想DOMについて
- 1. Hello
- 1.1. World
- 1.1.1. 酒田でRKBが聞けるわけ
- 1.1.2. 【JavaScript】3次元のベクトルクラス【HTML5】
- 1.1.3. React Native + Firebase で超簡単なチャットアプリを作ってみた‼️ (データ書き込み編)
- 1.1.4. スマホのウインドウの高さぴったりにする（アドレスバー分をちゃんと考慮）
- 1.1.5. Jest の beforeEach() / test() と Promise と setTimeout() の関係
- 1.1.6. JavaScript 経験者が Java を学習する際の入門前メモ
- 1.1.7. x-means法のJavaScriptによる実装
- 1.1.8. [ネタ] アプリ版ExcelでもTypeScript使いたいメモ
- 1.1. World
クイズアプリを作ってみた
クイズアプリを作りました
https://siruba75.github.io/Rabbit_Quiz/ドットインストールのクイズアプリを作る講座を見て、一度選択肢をクリックすると回答が出てきてそこでクイズが終わってしまうのが残念に感じ、選択肢を選べるようにするにはどうすればいいのかを自分なりに考えました
こちらがソースコードです
https://github.com/siruba75/Rabbit_Quiz是非ご覧ください
スクロールダウンしたときにヌルッとでてくるヘッダーの作り方
##はじめに
Web制作をしていくなかで、スクロールダウンをしたときにヘッダーとは異なるヘッダーを常時だしておきたいときに、こちらの方法で実装しました。備忘録として、メモを残しておきます。
#コードの書きかた
class名はjsが適用されるときはプリフィックスとして、jsを付けています。“`html:index.html
“`
“`
初心者のプログラミング２
# 勉強の記録
## 勉強した内容
– 前回の復習
– ツイッターなどでよくある診断ツールの作成。## 何をベースに勉強してるか
– [N予備校 プログラミング入門](https://www.nnn.ed.nico/home)## 内容の詳細
### わかったことについて
– 前回に引き続き同じ内容でしたが、プラスして分かった事。
今まではconsole.log で一つ一つのエラー確認をしていましたが、
consolo.assert()を使ってのエラー確認を学びました。
ただ自身の認識では、A＝Aでない場合はエラーメッセージを出すという認識ですが
間違ってるかも知れない…。### むずかしかったよ
– 前回は全体的に難しいと書きましたが、今回理解できていない部分をピックアップするなら
return result.replace(/\{userName\}/g, userName);
というコードですが。
/\\/この辺りが良く分からない。
何だコレ状態です。## 次回やる予定のこと
– 次回はいよいよツイート昨日の完成の授業です！
swiperでエラーが出ないのに、意図しない動き
## なんか動きがきもい
コンソールエラーとか吐いてない、意味わかんない## 原因はeasingでした
必死にjsと睨めっこしたって、開発画面を凝視してエラー探したってあるわけない。
だってeasingはcss animationで上書きして指定するんだもの。## 感想
アニメーションをどっちに任せるか、迷うところ。
厳密に定義して、readmeに書いた方がいい。（コレに限らず、どっちの言語でも表現できるようなやつは）
jsは重いかもだけど、エラー出してくれる（かも）だし、
css大好きマンだけど気持ちが揺らいだ。
オブジェクトのある特定のキーを取得する方法
オブジェクトのある特定のキーを取得する方法が日本語であまり見当たらなかったのでまとめてみました。
ユーザーの情報が格納されている`usersオブジェクト`があるとする。
“`
const users = {
“Jonh”: {
sex: ‘male’,
age: 30,
height: 175,
},
“Bob”: {
sex: ‘male’,
age: 25,
height: 175,
},
“Hanna”: {
sex: ‘female’,
age: 23,
height: 160,
},
};
“`## 全てのキーの取得方法
オブジェクトの中にあるキーを全て取得したい場合には、“`
Object.keys(users); // return Jonh, Bob, Hanna
“`
`Object.keys()`メソッドの引数に、オブジェクト変数を入れてあげることで取得できる。## ある特定のキーの取得方法
“`
Object.keys(users)[0]
multiple属性のinput type=’file’にドラッグ&ドロップで複数のファイルを一個ずつ追加していく方法
#はじめに
ファイルを選択するフォームがある際、
ドラッグ&ドロップができるとスマートで便利ですよね。mulitiple属性がつくと複数のファイルを一つのフォームで送信が可能です。
そうした上でドラッグ&ドロップで選択する仕様にするのはさほど難しくはありませんでした。
しかし、複数同時にドロップするのではなく、
その複数のファイルを一個ずつドロップできるようにしたかったのですが…ちょっとツマってしまったので、その解決方法をメモ。
#実装
“`html:sample.html
“`
ブラウザでコード譜を書く : “fumen” の紹介
## あらまし
ブラウザでコード譜を書くためのMarkdownベースのJavascriptライブラリ fumen の紹介です。
Github : https://github.com/hbjpn/fumen/
ドキュメント : https://hbjpn.github.io/fumen/
プレイグラウンド : https://fumenbook.com/ずいぶん前(2013年〜)から公開していましたが、以前のバージョンは速度が遅かったり描画の純軟性にかける問題があったので、根本的な作り直しを行いました。また、fumenをコアにしたコード譜作成WEBサービス[fumenbook](https://fumenbook.com/)も作りました。
## モチベーション
譜面を作るツールは多くあるのですが、音符等まで含めた綺麗な譜面を作ることを主眼においたものが殆どです。一方でポピュラー音楽をバンドで合わせるような場面では、コード、尺、構成（繰り返し）、シンコペーションといったレベルでの演奏指示がわかれば十分で、音符レベルの情報が必要なケースは多くありません。実際のところコード譜をテ
Kinx ライブラリ – 自動組版(Tiny Tyesetting)
# はじめに
**「見た目は JavaScript、頭脳(中身)は Ruby、（安定感は AC/DC）」** でお届けしているスクリプト言語 [Kinx](https://github.com/Kray-G/kinx)。今回は Tiny Typesetting 最新情報です。[**これ**](https://qiita.com/Kray-G/items/7dca6f2abb538500092d) の続きです。
* 参考
* 最初の動機 … [スクリプト言語 KINX（ご紹介）](https://qiita.com/Kray-G/items/ca08b6fb40d15dd0ec76)
* 個別記事へのリンクは全てここに集約してあります。
* リポジトリ … [https://github.com/Kray-G/kinx](https://github.com/Kray-G/kinx)
* Pull Request 等お待ちしております。ココんトコロ、こればかりやってました。はい。一先ず最初にやりたかったことはある程度できるよ
【JS】各要素に対応する配列があるか調べるプログラム
#【JS】各要素に対応する配列があるか調べるプログラム
JSの勉強。
ある配列の各要素の２乗に対応する要素が含まれているか確認するプログラム(same)を作成する。
・同不順
・出現回数が合っていること“`js:例１
//関数sameの結果例
arr1 = [3,2,1,7,2]
arr2 = [49,4,4,9,1]same(arr1, arr2)
//true
“`
対応する要素がある場合は、trueを返す。“`js:例２
//関数sameの結果例
arr1 = [3,2,1,7,2]
arr2 = [49,4,9,1]same(arr1, arr2)
//false
“`２乗に対応する値が存在しても、出現回数が合っていない場合はfalseを返す。
##same1
“`js:解答１
function same1(arr1, arr2){
if (arr1.length !== arr2.length){
return false
}else{
arr1 = ar
【Nuxt.js】ページ移動先の、非同期通信のお作法
#ページ移動先で使うプロパティ
よくページ構築時で使うプロパティとして`mouted`がありますが、それだと例えば`v-for`でコンポーネントを作成する時に、移動した後に構築される動きが見られてしまいます。
そうならないためにも、ページコンポーネントを作成された段階には、v-forで回すデータを格納しておく必要があります。
ここで、登場するのがNuxt.jsだけに許された`asyncDataプロパティ`というものがあります。
#ページコンポーネント構築前の非同期通信と、後の非同期通信の比較
| 通信タイミング | プロパティ | 用途 | /_idの取得 |
|:-:|:-:|:-:|:-:|
| データ初期化前 | async asyncData (context) | コンポーネントのdataにデータを格納したい時 | context.params.id |
| データ初期化前 | async fetch (context) | Vuexのstateにデータを格納したい時 | context.params.id |
| データ初期化以降 | asyn
ReactのhooksのESLint対応
[公式](https://ja.reactjs.org/docs/hooks-rules.html#eslint-plugin) 見るべし。
※`// Your ESLint configuration` の部分は `.eslintrc.js` 内の設定をかえる
一応、yarn版
“`
yarn add eslint-plugin-react-hooks —dev
“`
DOMと仮想DOMについて
# はじめに
DOMとは何かを初学者でもわかることを目的としてまとめて見ました。# DOM(Document Object Model)
DOMは、HTMLをJavascriptから参照・更新を行うためのインターフェイスです。
DOMはHTML文章をオブジェクト型式に解析したもので、Javascriptではそれら全てのオブジェクトへアクセスすることができます。※DOMはJavascriptがHTMLを認識して操作できるように解析したものだと思っていただけるといいかもしれませんね。
例えば、下記のようなHTMLはDOMで表現すると
“`html
Document
Hello
World
“`
ICF-6700はSONYが作った大型のBCLラジオの最後の頃の製品で、ICF-6800と兄弟機のように思っていました。今ネットで調べて見るとICF-6800は高級機からの路線で、ICF-6700は普及機からの路線との情報がありました。
いろいろ試していたところ夜になると福岡のRKB(1278KHz)が受信できる事が分かりました。
最新の周波数の一覧は[BCL INformation NET](http://bcl.xii.jp/)からpdfをダウンロードしました。
RKBは50Kwの出力ですが結構距離があります。深夜帯は同じ50Kwで比較的近いラジオ日本（送信所は川崎市）と同等に聞けます。
送信所の住所は[でんぱでーた
【JavaScript】3次元のベクトルクラス【HTML5】
#はじめに
自分用の3次元のベクトルクラスです。
ES6で書いています。静的クラスとして書いています。#ソース
“`js
// 3Dベクトルクラス(ベクトルの計算に使用)
class Vector3d {
// 足し算
static add(v0, v1) {
return {
x: v0.x + v1.x,
y: v0.y + v1.y,
z: v0.z + v1.z,
};
}
// 引き算
static subtract(v0, v1) {
return {
x: v0.x – v1.x,
y: v0.y – v1.y,
z: v0.z – v1.z,
};
}
// スカラー倍
static scale(v0, s) {
return {
x: v0.x * s,
React Native + Firebase で超簡単なチャットアプリを作ってみた‼️ (データ書き込み編)
# はじめに
**[前回の記事](https://qiita.com/shintaroa/items/b69362129407c628df07)**までで環境構築とFirebaseの設定をしたので今回から実際にコードを書いていきたいと思います！！
環境構築については**[第1回の記事](https://qiita.com/shintaroa/items/ccd0ebe0b41fdce34565)**を、フォルダの構成やFirebaseプロジェクトの作成については**[第2回の記事](https://qiita.com/shintaroa/items/b69362129407c628df07)**を参考にしてください。1. [環境構築編](https://qiita.com/shintaroa/items/ccd0ebe0b41fdce34565)
2. [Firebaseプロジェクト設定編](https://qiita.com/shintaroa/items/b69362129407c628df07)
3. **データ書き込み編** ← 本記事
4. データ読み取り編全4回をか
スマホのウインドウの高さぴったりにする（アドレスバー分をちゃんと考慮）
100vhがうまく行かないというのがよく知られている部分ですが
“`js:area.js
setInterval(function(){
$(“.area”).css({“height”:window.innerHeight,”min-height”:$(window).innerHeight()});
},100)
“`
横向きにした時など回転直後など、window.innerHeightの値が異様に小さくなる。
スクロールをしてアドレスバーのエリアが小さくなった時には、$(window).innerHeight()が伸びた分を検知してくれない。でこれをした時にposition:fixed;をしているときにtop:0だと、隠れたりしてしまうので、オススメはbottom:0;
Jest の beforeEach() / test() と Promise と setTimeout() の関係
# 要約
– `beforeEach()` は常に `Promise` が (`then()` まで含め) 全部満たされてから `test()` に移る。
– `setTimeout()` は呼ばれない。# 実行例
“`javascript:test.js
describe(‘async test’, () => {
let called;function promise() {
console.log(called = ‘function’);setTimeout(() => {
console.log(called = ‘setTimeout()’);
}, 0);return new Promise(resolve => {
console.log(called = ‘Promise()’);
resolve();
}).then(() => {
console.log(called = ‘then()’);
});
}describe
JavaScript 経験者が Java を学習する際の入門前メモ
知り合いの JavaScript 経験者が、Java を学びたいと言ってましたので、簡単な入門前メモをまとめてみました。
# 想定している読者
Web ブラウザで動作する、もしくは NodeJS 環境で動作する JavaScript コードを学んだことがある、もしくは書いたことがある方を想定しています。
きちんと学ぶにはJava入門書を読んだり、良質なコードを多く参照して真似したりすることが有効だと思います。ただ現時点で JavaScript の知識があるのであれば、Java との差分を確認してから学んだほうが理解が早まるのではないか？と思い、このメモをまとめてみました。
このメモが簡単すぎる、冗長すぎると感じる方は、素晴らしいまとめサイトである [Java コード入門](https://java-code.jp/category/java) をお勧めします。
# 開発環境
いまの時代、何らかの統合開発環境を利用することを想定しています。とりあえず想定しているのは、昔ながらの [Eclipse (統合開発環境)](https://ja.wikipedia.org/wiki/
x-means法のJavaScriptによる実装
# はじめに
「[色々な機械学習処理をブラウザ上で試せるサイトを作った](https://qiita.com/norimy/items/669c19ecf2256b3ecae5)」中で実装したモデルの解説の二回目です。
今回はx-means法の実装について解説します。
デモは[こちら](https://ai-on-browser.github.io/)から。（TaskをClusteringにして、ModelのX-Meansを選択）
実際のコードは[xmeans.js](https://github.com/ai-on-browser/ai-on-browser.github.io/blob/master/model/xmeans.js)にあります。なお、可視化部分については一切触れません。
# 概説
アルゴリズムなどについては既に良い記事がありますので、こちらも参考にしてください。
– [クラスタ数を自動推定するX-means法を調べてみた](https://qiita.com/deaikei/items/8615362d320c76e2ce0b)
## 処理の流れ
[ネタ] アプリ版ExcelでもTypeScript使いたいメモ
## 概要
いよいよOffice ScriptsとしてOfficeでTypeScript(Javascript)が使えるようになったのですが、残念ながらWeb版限定でした…。
[Web版ExcelでTypeScriptベースの「Office Scripts」提供開始。ユーザー操作を自動で記録可能](https://www.publickey1.jp/blog/20/webexceltypescriptoffice_scripts.html)
というわけで、アプリ版ExcelでもTypeScriptが使えるように試行錯誤してみました。
単純にTypeScript(Javascript)側からExcelを動かすのはActiveXさえ扱えれば簡単で、ググれば使えそうなサンプルがそれなりに出てくる状態なので、
逆に最小限の労力でExcel(VBA)側からTypeScriptのコードを動かせるようにもしてみたい。
## 新しい仕様のJSを使えるようにする
今回の構想においてJavascript実行環境はActiveXが簡単に使えてユーザー側で追加のインストールが不要なWindows
