JavaScript関連のことを調べてみた2020年09月11日

JavaScriptの条件分岐 if文について

今回はJavaScriptにおける、条件分岐と繰り返し処理について説明します。

Rubyと同様に条件を満たしているかどうかで実行処理を分岐します。

Rubyとの違う点は条件式を()で囲み、条件式の後を{}で囲みます。
また、elsifはelse ifと記述します。

分かりにくいのでコードに書くとこのような感じになります。


![スクリーンショット 2020-09-11 11.20.11.png](http

javascript関数ドリル　初級編drop関数の実相のアウトプット

##drop関数の課題内容
　　　↓

【初級】drop関数の実装

##drop関数の取り組む前の状態
functionの中をどうすればいいのかわからないがとりあえずコードを書こうとした

##drop関数に取り組んだ後の状態
size=1のところが理解できないです。

##drop関数の実装コード（答えを見る前）
“`js

function drop (array,number){
const dropArray=[]
for(let number=0;){}
return dropArray
}

// _.drop([1, 2, 3], 0);

// // => [1, 2, 3]
“`

##drop関数の実装コード（答えを見た後）
“`js
function drop(array, size = 1) {
if (size === 0) {
return […array];
}
if (array.length <= size) { return []; } const drop

javascript関数ドリル　初級編uniq関数の実相のアウトプット

##uniq関数の課題内容
詳細はこちら
　　　↓

【初級】compact関数の実装

##uniq関数の取り組む前の状態
自力でやった時にtruesyのみをとるのに戸惑った

##uniq関数に取り組んだ後の状態
truesyのみを取りたいときはarray[i]すればいいことに気づけた

##uniq関数の実装コード（答えを見る前）
function compact(array)
const compactArray=[]

for(let i=0;i

Movable Type 7のData APIをJavaScriptのみで実装する

# 本題について

Movable Type 7(以下MT)のData APIをjQueryを使用せず、
JavaScriptのみとし、以下4つのAPIの実装方法を記載しました。

– login（ログイン）
– logout（ログアウト）
– Entries collection（記事一覧の取得）
– Update single entry（記事の更新）※ここでは記事タイトル・記事本文の更新です。

[参考](https://www.movabletype.jp/developers/data-api/v4-reference.html)

なお、ログイン成功時に取得したセッションデータは、sessionStorageに保存し、
認証に必要なAPI呼び出し時に、参照されるように実装しました。

## 環境
– Movable Type Pro r.4607

ここではMTの本体は、localhost/mt7/ への配置とします。
エンドポイント以下になります。

“`js
http://localhost/mt7/mt-data-api.cgi/v4/・・・
“`

## Da

RPGツクールMVとRPGツクールMZ共通プラグインを作る場合のウィンドウ初期化

RPGツクールMVでは、ウィンドウ系クラスの初期化パラメータは統一されていませんでした。
基底クラスとなるWindow_SelectableやWindow_Baseクラスではx,y,width,heightの4つでしたが、それ以外はバラバラです。
もちろん、バラバラでも内部では上記の4引数による初期化を行っています。

RPGツクールMZではウィンドウ系クラスの初期位置を指定するパラメータがRectangle型1つに統一されました。
MV→MZでプラグインを移植する場合はここを書き換えればよいですが、コアがほとんど同じなので共通化したいところです。
試行錯誤の末、以下の方法で共通化できることがわかりました。

“`js:
/**
* @param {Window_Base} window_
* @param {Rectangle} rect
* @param {(window:Window_Base,rect:Rectangle)=>void} initFunction
*/
function window_initializeMVMZ(window_,rect,init

アップロードファイルを localStorage に保存して、再アクセス時にファイルを復元する

# 概要
HTMLフォームで入力途中の情報を localStorage に保存し、再開時に情報を復元して最終的に Ajax で POST するまでを実装しました。
その際、ファイルアップロードだけ少し厄介だったので要点をまとめました。
Internet Explorer 11 でもうまく行きました。

※ Vue.js で元々実装していたものを無理矢理素の JavaScript に書き直しており、うまく動作しない部分があったらすみません。

# アップロードされたファイルを変数で保持する

“`javascript
// この変数にアップロードファイルの情報を格納することにする
var file = null
// この変数にアップロードファイルをデータURI化した情報を格納することにする
var uri = null

// ファイルアップロード時に呼ばれるイベントハンドラー
function (e) {
file = e.target.files[0]
var reader = new FileReader()
reader.onload = function (e) {

【JavaScript】配列操作を征する旅路 【Part 1】

JavaScript で配列操作する機会は， 毎度頻発するので， 学びになったものを残していこうと思います！

形式は，ビフォーアフター形式です． 直したい配列のサンプルデータを定義してそれを修正します．

### ?‍♂️ サンプルデータ ?‍♀️

今回は，

“`sampleData.js
const sampleData = [
{
label: ‘SaaS’,
name: ‘finance’,
pulldownList: [
{ id: ‘2020’, name: ‘2020年度’, type: ‘経費’ },
{ id: ‘2021’, name: ‘2021年度’, type: ‘経費’ },
{ id: ‘2022’, name: ‘2022年度’, type: ‘経費’ },
{ id: ‘2023’, name: ‘2023年度’, type: ‘経費’ },
{ id: ‘2024’, name: ‘2024年度’, type: ‘経費’ }

Angularの特徴

#プログラミング勉強日記
2020年9月11日
JSには色々なフレームワークがあって、開発の用途によって使用するフレームワークが違うと思うので、まとめてみようと思う。前回は[Reactについて](https://qiita.com/mzmz__02/items/18f04f8e4ec84f1cc1af)まとめたので、今回はAngularについてまとめる。

#Angularとは
　Angular(読み方：アンギュラー)は、Googleが開発したJSのフレームワーク。とても人気があり、WEBアプリ開発においてはReactと並んで最も使われるフレームワーク。

#特徴

#コンポーネント指向である
　Reactと同様で、Angularもコンポーネント指向である。コンポーネント指向は、ソフトウェアを機能ごとに部品(コンポーネント)として分割して、必要に応じて組み合わせて使う考えのことである。
　ビュー、ロジック、コンポーネントを構成するメタ情報から構成される。
　機能を小さい部品にして持たせているので、状態の管理もしやすくて再利用も容易にできる。

##MVC(MVW)設計
　MVC(MVW

【JavaScript】Promiseくんと仲良くなろう

## 背景
JSを始めると必ずぶち当たる「Promiseの壁」
ググってもよく分からなかったので自分なりにまとめてみようと思った

## こんな人向け
– 最近JS始めたよ
– とりあえず`await`付けとけってじっちゃが言ってた
– `Promise`何となく使ってるけど、いつ事故を起こすかビクビクしている
– `Promise完全に理解した`
– 茶番が好き

上記は全て著者のことですが、一旦全て棚に上げさせてください（そうしないと記事が自虐だけで終わってしまいます）

## 注意
**当記事は8割が茶番で構成されております。
真面目な記事をお探しの方は即座にブラウザバックされることを推奨いたします。**

## 本編
### 1. そもそも非同期処理って？
相手と仲良くなるには、まず相手のことを知ることが重要です。まずは基本から。
[JavaScript Primer
](https://jsprimer.net/basic/async/#async-processing)より引用
> 非同期処理はコードを順番に処理していきますが、ひとつの非同期処理が終わるのを待たずに次の処理

フワッとわかった気になるElm入門

# はじめに

Elm は、JavaScript に似た構文を持つ Web アプリケーションを作るための言語です。
本記事では HTML や JavaScript の例を交えながら、Elm についてフワッとわかった気になってもらうことを趣旨としてます。

# 前提知識

– HTML と JavaScript を触ったことがある
– 変数や関数、配列、オブジェクトについて知っている

## 注意

Elm と JavaScript では構文が異なります。[^1] [^2]
[^1]: [Elm Syntax](https://elm-lang.org/docs/syntax)
[^2]: [From JavaScript?](https://elm-lang.org/docs/from-javascript)

特に、関数定義と関数呼び出しでは、括弧とカンマでなく、スペースを使います。
また、return がないことも特徴です。

“`JavaScript:JavaScript
function sum (x, y) { // 関数定義
return x + y;
}

su

イベントハンドラー とイベントリスナーの違い（自分用メモ）

>1.タグ内の属性として宣言する
2.要素オブジェクトのプロパティとして宣言する
3.addEventListenerメソッドを使って宣言する

[引用元:JavaScript本格入門　山田祥寛著](https://gihyo.jp/book/2016/978-4-7741-8411-1)

1.2がイベントハンドラー
3がイベントリスナー

document.addEventListener(‘DOMContentLoaded’,function(){
}, false);
内で定義されてるのが3のイベントリスナーってことにとりあえずしておく。

Kinx Tiny Typesetting – LaTeX 派? つか、知ってる?

# Kinx Tiny Typesetting

こんにちわ。

今回は組版システムがメインです。TeX や LaTeXを使ってますか？それは良いですね。私はイマイマ **全く使ってません**。好きですけど。

学生時代の論文書きには使ったものの、就職したら使わなくなってしまったあの懐かしくも美しいシステム、LaTeX。

この記事はそんな LaTeX に関係しつつ、私たちの Kinx に関連する、そんな内容です。

## はじめに

**「見た目は JavaScript、頭脳(中身)は Ruby、（安定感は AC/DC）」** でお届けしているスクリプト言語 [Kinx](https://github.com/Kray-G/kinx)。最近はだいぶ記事を書く時間がなく、生存確認的な記事ですが、ご容赦。書きたいことはいっぱいあるのですが。

* 参考
* 最初の動機 … [スクリプト言語 KINX（ご紹介）](https://qiita.com/Kray-G/items/ca08b6fb40d15dd0ec76)
* 個別記事へのリンクは全てここに集約してあ

javascript関数ドリル　初級編uniq関数の実相のアウトプット

##uniq関数の課題内容
詳細はこちら
　　　↓

【初級】without関数の実装

##uniq関数の取り組む前の状態
uniqメソットがどんなものか分からない状態

##uniq関数に取り組んだ後の状態
自力でできた

##uniq関数の実装コード（答えを見る前）
分からなった

“`js

if( !values.includes(candidateToPush) )
“`
が分からなかった
##uniq関数の実装コード（答えを見た後）

“`js

function without(array, …values) {
const newArray = [];
for(let i = 0; i < array.length; i++) { const candidateToPush = array[i]; // values : [1, 2] // array: [2, 1, 2, 3] // candidateToPush: 2, 1, 2, 3 if( !values.incl

Three.jsでgltfを読み込んだ時に、カリングを有効にする。

#カリングとは
面の片側のみ描画して負荷を下げる方法。
サイコロを現実世界に置いてみればわかると思うが、必ず6面あるうちの3面しか同時に見ることができない。そのため、裏側に位置する3面を描画しないようにする仕組みのこと。

three.jsのデフォルトでは、materialから、表示するsideを指定することになる。

#やり方
blenderで出力したものを読み込んだ時に、カリングがうまくONにならなかった。
多分loader側ではあんまりいじってないので、自前ですべてカリングを有効にしておこう。

“`Javascript
(new THREE.GLTFLoader()).load( ‘model.glb’ , gltf => {
//キューにすべてのchildrenをいれる。
const targets = […gltf.scene.children];

while(targets.length > 0) {
let child = targets.pop();
for(let cc of child.children) {
targets.push(

javascript関数ドリル　初級編without関数の実相のアウトプット

##zipObject関数の課題内容
詳細はこちら
　　　↓

【初級】without関数の実装

##zipObject関数の取り組む前の状態
スプレッド演算子を使う発想がなかった。includeメソットを知らなかった

##zipObject関数に取り組んだ後の状態
理解できた

##zipObject関数の実装コード（答えを見る前）
分からなかった

##zipObject関数の実装コード（答えを見た後）

“`js

function without(array, …values) {
const newArray = [];
for(let i = 0; i < array.length; i++) { const candidateToPush = array[i]; // values : [1, 2] // array: [2, 1, 2, 3] // candidateToPush: 2, 1, 2, 3 if( !values.includes(candidateToPush

Javascriptにrangeを入れる方法

さがしｔ
“
utils.jsに

“`
export function range(start, end) {
/* generate a range : [start, start+1, …, end-1, end] */
const len = end – start + 1;
const a = new Array(len);
for (let i = 0; i < len; i++) a[i] = start + i; return a; } ``` 使うときは　range(26, 52)

コンポーネント間のデータのやりとりを簡単なTODOアプリでまとめる

Vuexに頼りすぎてコンポーネント間のデータの受け渡し方が曖昧だったので、簡単なサンプルアプリでまとめる

また、Vueで開発をしていてコンポーネントを細かく分けない事で以下の問題がよく起こったのでその反省

コンポーネントを分けない問題
・汎用性の悪さ
例えばフォームとボタンを一緒のコンポーネントに作ると、ボタンだけ使い回したい時にフォームまでついてきて汎用性が悪い。

・同じような記述をしたコンポーネントファイルが増えDRYに反する

・1ファイルのコード量が増えて可読性が悪い

## 作成したコンポーネント
・ボタン
・入力フォーム
・ボタンと入力フォームをまとめたコンポーネント

ただ単にクリックイベントとボタン名を使いまわせるボタン

“`button.vue