- 1. 実践 HTML,CSS,JavaScript初級者向け解説 作りたいものから逆算して作るWebアプリ
- 2. 「神経衰弱風カードフリップアプリ」の作り方
- 3. 【Vue.js】v-for v-if を一緒に使うのは避けないといけない
- 4. 【Axios】Nuxt.jsで、axiosを使ってサーバーとの通信を行う。
- 5. [JavaScript]ESLintの設定をグローバルルールで保存する
- 6. 【JavaScript】クラス概念について
- 7. MATLAB のニューラルネットをブラウザで動かす: MATLAB > C++ > WebAssembly の自動変換
- 8. ajaxの処理 大変細かく書いたもの。
- 9. 自動リロードできる Electron + parcel 開発環境を最小手数で構築する
- 10. WebWorkerで擬似チャネルインターフェイスを作りVue.jsのライフサイクルへバインドする
- 11. Javascript基本②
- 12. javascriptで指定した数値の長さを持つArrayの宣言
- 13. prototypeと__proto__
- 14. 【onClick属性】個性のあるボタンをクリックして、イベント発生させる【JavaScript】
- 15. オレオレJavaScript/TypeScriptコードスニペット集
- 16. みんな大好き「バリデーション」。コロナでどこへも行けませんが，画面にマスク着用すると，開発がちょっとだけ幸せになるかもという余談
- 17. P5.js 日本語リファレンス(unhex)
- 18. P5.js 日本語リファレンス(unchar)
- 19. P5.js 日本語リファレンス(str)
- 20. P5.js 日本語リファレンス(int)
実践 HTML,CSS,JavaScript初級者向け解説 作りたいものから逆算して作るWebアプリ
# 0.はじめに
どうも、はじめして いっぺい です。
HTML,CSS,JavaScriptは使いこなせるようになってくると楽しいです。:sunny:# 1.作りたいイメージ
突然ですが、ネットワークグラフってご存知ですか？
ネットワークグラフって物事の可視化するのに便利ですよね。
自分も考えを整理したくて様々なツールを使ってみたりはしたのですが、
（マインドマップ、マキネーションツール、フローチャート、図形ツール・・・）
どれもピンと来ていなくて
【詳細】それぞれのツールの感想について
・ マインドマップ → 中心から広げられるのはいいけど、枝葉を中心にして伸ばすのは狭い
・ マキネーションツール → 流れを動かして見れ
「神経衰弱風カードフリップアプリ」の作り方
# 「神経衰弱風カードフリップアプリ」の作り方
「神経衰弱風カードフリップアプリ」を見て、自分も何か「カードゲームを作ってみたい！！」という欲求が日に日に強くなってきました。
カードをめくって、「同じ数字のペア」のカードを探すゲームなのですが、自分の「記憶力」がスコア化されるので、記憶力を強化したい意欲も湧いてきました。
## ゲームの内容
カードの枚数を「１６枚」と「３６枚」から選ぶことができるのですが、「３６枚」はかなり難しいです。
残念ながら正解率は平均「７%」くらいになってしまいました・・・
ゲームのメイン画面はこんな感じです。
「１０ゲーム」遊ぶと自分のランクが１０段階のどの位置になるのかが表示されます。
ランクは「最低が１」で「最高が１０」なのですが、自分は「１６マス」が「３」で「３６マス」が「２」でした。
記憶力には自信あった
【Vue.js】v-for v-if を一緒に使うのは避けないといけない
# はじめに
Vue.jsでは v-if と v-forは一緒に使うのは避けるのが[ドキュメント](https://jp.vuejs.org/v2/style-guide/#v-for-%E3%81%A8%E4%B8%80%E7%B7%92%E3%81%AB-v-if-%E3%82%92%E4%BD%BF%E3%81%86%E3%81%AE%E3%82%92%E9%81%BF%E3%81%91%E3%82%8B-%E5%BF%85%E9%A0%88)によると推奨されています:ok_hand_tone2:一緒に使うというのは
“`vuejs/hoge.vue
{{ item.pages }}
“`
こういった タグの中にv-forとv-ifを詰め込んでいる状態のことを
【Axios】Nuxt.jsで、axiosを使ってサーバーとの通信を行う。
Nuxt.js下で、サーバーとの通信を行うことができるaxiosについてまとめたいと思います。
具体的にできることとしては、**サーバーからのデータを取得したり(GET)**、サーバーのデータを更新したり(PATCH)することができる。
今回は、GETリクエストに絞って使い方についてみていきましょう。
#モジュールを利用できるようにする
axiosではなく、@nuxtjs/axiosをインストールすることで、**ファイルごとにimportする必要がなく**なる。
また、レスポンス値がdataプロパティであるため、“`res.data“`にする必要がなくなる。（後述）“`shell
$ yarn add @nuxtjs/axios
“`“`nuxt.config.js
modules: [
‘@nuxtjs/axios’,
],
“`#リクエスト後のレスポンスによって、処理を変える
###基本形
“`javascript
$axios.$get(URL)
.then(function (res) {
//通信が成功し
[JavaScript]ESLintの設定をグローバルルールで保存する
# 初めに
学習用でESLintが使いたいけど、プロジェクトごとに設定ファイル（.eslintrc.*）を作成するのは面倒。
そこで、設定ファイルをグローバルルールとして保存してプロジェクトごとに作成しなくていいようにしたので、その時にやった方法を備忘録としてまとめてみました。# 方法
## 1. ESLintのインストール
まずはESLintをグローバルインストール。
“`terminal
> npm -g i eslint
“`ここで、-gは–global、iはinstallを省略したもの。
## 2. ESLintの設定ファイルをグローバルとして保存
`.eslintrc.json`を作成し、ユーザーディレクトリ直下に保存する。
– .eslintrc.jsonを保存する場所
“`
MacOS：/ Users / {USERNAME}
Windows：C：\ Users \ {USERNAME}
“`– .eslintrc.jsonの中身
“`json:.eslint.json
{
“extends”: “eslint:reco
【JavaScript】クラス概念について
#クラスとインスタンス
クラスとは雛形や設計図と例えるのが一般的です。
インスタンスはクラスを元に作られるデータのことです。車の製造で例えるなら、
クラスは、車を製造する設計図で、
インスタンスは設計図を元にして作られた販売している車のことになります。#1.クラス作成〜出力まで（完成）
簡単なクラス、インスタンス、継承の一連を作成しました。
細かく解説入れていきます。“`js
// ーーーーー 親クラス ーーーーーclass Book {
constructor(title, content) {
this.title = title;
this.content = content;
}show() {
console.log(`本のタイトルは ${this.title}`)
console.log(`本の感想は ${this.content}`)
}
}// ーーーーー 子クラス ーーーーー
class AuthorBook extends Book {
constructor(title, conte
MATLAB のニューラルネットをブラウザで動かす: MATLAB > C++ > WebAssembly の自動変換
# 0. はじめに
MATLAB をブラウザ実装したら面白そうなものないかなぁ・・と思っていたら、素晴らしい記事が見つかったので、マネをさせてもらいました。
[TensorFlow.jsでMNIST学習済モデルを読み込みブラウザで手書き文字認識をする](https://qiita.com/yukagil/items/ca84c4bfcb47ac53af99)
この記事では TensorFlow.js でWebブラウザ上で書いた数字が 0 ~ 9 のどれかを予測していますが、この予測部分に MATLAB のニューラルネットを使ってみた、というお話。
## やったこと
コードこちらから： [GitHub: minoue-xx/handwritten-digit-prediction-on-browser](https://github.com/minoue-xx/handwritten-digit-prediction-on-browser)
実行ページはこちら：[Github Pages: Hand-written Digit Prediction on Browse
ajaxの処理 大変細かく書いたもの。
#ajaxの中身
練習の時
画面上でタスクの「表示」ボタンを押すとタスクタイトルとタスクの内容が表示される
という仕組みのものを作りました。
その時のメモ書きです。
（あとでまとめる）laravel ver5.8 + jQuery
jQueryのコードです。
“`js
// ボタンを押すとjsが起動する
$(‘.js_show_info’).on(‘click’,function(){
// タスクのIDを取得する（jsで使う変数に、viewでinputのvalueに入っているIDをいれる）
task_id = $(this).val();
console.log(task_id);$.ajax({
type: “get”, // HTTP通信の種類を指定。デフォルトでここはgetが入っている部分なので、get通信なら書かなくても大丈夫
url: “tasks/info”, // web.phpで作成したコントローラーにアクセスするルートのURL部分。コントローラー内に作成したfunctionにアクセ
自動リロードできる Electron + parcel 開発環境を最小手数で構築する
Electron開発でどうしてもparcelを使いたくなり、かなり試行錯誤したので構築手順をまとめておきます。何番煎じか分かりませんが、何番でも煎じていきます。
## 出来上がるもの
[こちらのリポジトリ](https://github.com/eihigh/electron-parcel-reloaded)です。
ソースに変更がかかったら自動でビルドし、起動しているElectronアプリの内容も自動リロードされる開発環境です。
parcelの能力をそのまま活かしているので、TypeScriptやsassの追加も容易です。
nodeの各種機能も利用できます。### 割愛したこと
– TypeScriptやsass、その他もろもろの設定
– parcelのドキュメントを参照してください。
– メインプロセスのスクリプトをparcelのビルド対象にすること
– レンダラプロセスのみ自動ビルド・リロード対象です。複数エントリポイントを上手く扱うのは面倒なわりに得るものが少ないので今回は割愛しました。
– productionビルドの方法## ハマりポイント解説
大し
WebWorkerで擬似チャネルインターフェイスを作りVue.jsのライフサイクルへバインドする
Vue.jsを使ったSPAで、メインスレッドは極力Vue.jsのレンダリングに使わせたいので、重い処理はWebWorkerへ投げることがあります。
WebWorkerは非同期のため`addEventListener()`などでメッセージをハンドリングするわけですが、ハンドラを普通に書くとVue.jsのライフサイクルから外れてしまいます。
強引にライフサイクル内でイベントリスナを登録してしまうと、多重登録となりやすく危険です。
“`html
{{result}}
“`
“`js
const worker = new Worker(“./worker.js”);// 受けるときはライフサイクル外になってしまう
worker.addEventListner(“message”, ({data}) => data);
Javascript基本②
##ボタンをJavaScript上で扱えるようにする
ボタンを押したらコンソール上で「Hello world」と出す実装をしていきます！
**DOM**という仕組みを利用します。##DOMとは
HTMLを解析して、データを作成する仕組みです。
DOMによって解析されたHTMLは階層構造のあるデータです。
これを、DOMツリーもしくはドキュメントツリーと呼びます。JavaScriptを使うと、DOMツリーを操作することができます！
idやclassの情報を元に、DOMツリーの一部を取得して要素を増やしたり消したりします。
このDOMツリーの一部のことをノードオブジェクトと呼びます。## ノードとは
DOMツリーを構成する要素をノードと呼びます。
body → ノード
header → ノード
side_bar → ノード
footer → ノード##DOMツリーの情報
DOMツリーの情報は検証ツールで見れます。##ノードの取得
**1.document.getElementById(“id名”);**
documentは開いているページのDOMツリーが入ってい
javascriptで指定した数値の長さを持つArrayの宣言
## 100までの長さを持つArray
“`js
Array.from(Array(10).keys())// => [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
“`
prototypeと__proto__
Javaに慣れたからちょっと理解しづらかった
## prototypeの意味
「原型」という意味である。
Javaのスーパークラス、C++のベースクラスと少し似ている。## 初心者なりにまとめてみた
インスタンスを生成するためには、コンストラクター関数を使う
例えば`Object()`、`Array()`、`Function()`。これらのコンストラクター関数を持っているのは、
`Object`オブジェクト、`Array`オブジェクト、`Function`オブジェクトである。
また、それぞれのオブジェクトの中に、`prototype`というオブジェクトがある。`prototype`の中に、関数や`__proto__`などがある。
`__proto__`は、どこかの`prototype`を指すためのポインタみたいなものである## 簡単にいうと
* 全てのオブジェクトは`__proto__`というメンバをもつ
* コンストラクター関数を持っているオブジェクトは`prototype`というメンバをもつ
* `prototype`の中にも、`__proto__`がある
【onClick属性】個性のあるボタンをクリックして、イベント発生させる【JavaScript】
#要素をクリックしたら、関数を発生させる
“`javascript
// 基本形
“`###いくつかあるボタンの中でも、ナンバー1の確認ボタンを押した時の挙動を設定する
“`html
“`“`javascript
function kakunin(number){
if(number == 1){
location.html = “/users”
}
}
“`ナンバー1の確認ボタンをクリックした時だけ、/usersに飛ぶように設定できる
#DOM操作によって生まれた要素に、個性を与える
生み出されたボタンごとに、イベント内容を変えたいときに使える。
“`javascript:jQuery
attr(‘onClick’, ‘o
オレオレJavaScript/TypeScriptコードスニペット集
**随時更新**
「あれってJavaScript/TypeScriptでどうやるんだっけ？」をメモるとこ。
# オブジェクトのブランクチェック
サンプルはTS。
“`ts
let checkTargetObject = {};if (Object.keys(checkTargetObject).length === 0) {
console.log(‘空のオブジェクト’);
}
“`
みんな大好き「バリデーション」。コロナでどこへも行けませんが，画面にマスク着用すると，開発がちょっとだけ幸せになるかもという余談
# 概要
台湾しかり，ベトナムしかり。
コロナ対策で成功している国を見ると，早期の歯止めが，共通因数だなぁと感じるおじさんです。
システム開発の現場でも，早期の歯止めが，開発を幸せにしてくれるということを，記事にしてみようと思います。
具体的には，**みんな大好き「バリデーション」**関連です。
# みんな大好き「バリデーション」
システム開発工程が無事完了し，いざ，利用部門ユーザを巻き込んだテストの段になって，意外と多いのが，誤入力防止機能（バリデーション）を，追加開発リクエストされるという展開。
「この欄は，過去日付が入力されたら，エラーメッセージを出して欲しい」
一般的な傾向として，完成したシステム画面を，実際に操作してみると，利用部門の期待（と欲望）は，ぐーんと高まるのですが，これは，人間として，ごく自然な心理特性です（＝人間，何かを手に入れたら，もっと良いものが欲しくなる）。
特に，**「品質の作り込み」が大好きな日本国内のシステム導入では，テスト工程での「後出しじゃんけん」って，驚くほど，お盛ん**ですよね。
言葉がまったく通用しない地域を含めて，過去，
P5.js 日本語リファレンス(unhex)
このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の unhex 関数を説明します。
## unhex()
### 説明文
16進数の文字列表現を同等の整数値に変換します。 16進表記の文字列の配列が渡されると、同じ長さの整数の配列が返されます。
### 構文
unhex(n)
unhex(ns)
### パラメタ
– n
String：変換する値– ns
Array：変換する値### 戻り値
Number：16進値の整数表現
### 例1
“`javascript
print(unhex(‘A’)); // 10
print(unhex(‘FF’)); // 255
print(unhex([‘FF’, ‘AA’, ’00’])); // [255, 170, 0]
“`### 著作権
p5.js was created by Lauren McCarthy and is developed by a commun
P5.js 日本語リファレンス(unchar)
このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の unchar 関数を説明します。
## unchar()
### 説明文
単一文字の文字列を対応する整数表現に変換します。単一文字の文字列値の配列が渡されると、同じ長さの整数の配列が返されます。
### 構文
unchar(n)
unchar(ns)
### パラメタ
– n
String：変換する値– ns
Array：変換する値### 戻り値
数値：値の整数表現
### 例1
“`javascript
print(unchar(‘A’)); // 65
print(unchar([‘A’, ‘B’, ‘C’])); // [65, 66, 67]
print(unchar(split(‘ABC’, ”))); // [65, 66, 67]
“`### 著作権
p5.js was created by Lauren McCarthy and is deve
P5.js 日本語リファレンス(str)
このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の str 関数を説明します。
## str()
### 説明文
ブール、文字列、または数値をその文字列表現に変換します。値の配列が渡されると、同じ長さの文字列の配列が返されます。
### 構文
str(n)
### パラメタ
– n
String | Boolean | Number | Array：変換する値### 戻り値
String：値の文字列表現
### 例1
“`javascript
print(str(’10 ‘)); // ’10’
print(str(10.31)); // ‘10.31’
print(str(-10)); // ‘-10’
print(str(true)); // ‘true’
print(str(false)); // ‘false’
print(str([true, ’10 .3 ‘, 9.8])); // [‘true’, ‘10.3’, ‘9.
P5.js 日本語リファレンス(int)
このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の int 関数を説明します。
## int()
### 説明文
ブール値、文字列、または浮動小数点数をその整数表現に変換します。値の配列が渡されると、同じ長さのint配列が返されます。
### 構文
int(n, [radix])
int(ns)
### パラメタ
– n
String | Boolean | Number：変換する値– radix
Number：変換する基数(デフォルト：10)(オプション)– ns
Array：変換する配列### 戻り値
数値：値の整数表現
### 例1
“`javascript
print(int(’10 ‘)); // 10
print(int(10.31)); // 10
print(int(-10)); // -10
print(int(true)); // 1
print(int(false)); // 0
print(int([fa
