[Vue.js]親から子へデータを渡す

html

“`

“`

vue.js

“`
Vue.component(‘hello’,{
props:[‘message’],
template:’

{{message}}

‘,
})

var app = new Vue({
el:’#app’,
})
“`

ブラウザ

“`
come on!!!
“`

もっと直感的に書けるのがslot

html

“`

うわああああああああああああああああああああああああああああああああ

“`

Vue.js

“`
Vue.component(‘hello’,{
template:’

‘,
})

var app = new Vue({
el:’#app’,
})
“`

ブラウザ

“`
うわああああああああああああ

【Vue.js】コンポーネントの中でのdataの扱い方

通常

html

“`

{{ message }}

“`

Vue.js

“`
var app = new Vue({
el:’#app’,
data:{
message:”hello-world”
}
})
“`

コンポーネント内のdata

html

“`

“`

Vue.js

“`
Vue.component(‘hello’,{
template:’

{{message}}

‘,
data:function(){
return{
message:”hello”
}
}
})

var app = new Vue({
el:’#app’,
})
“`

【Vue.js】コンポーネントの基本

HTML

“`

{{ message }}

“`

vue.js

“`
var app = new Vue({
el:’#app’,
data:{
message:’Hello’
}
})
“`

コンポーネントを使う場合

HTML

“`

“`

vue.js

“`
Vue.component(‘hello’,{
template:’

hello world

‘
})

var app = new Vue({
el:’#app’,

})
“`

FizzBuzz(ほぼそれだけ)を処理できるSchemeっぽい処理系をJavaScriptで書いてみる

# 概要

このエントリでは、いわゆる[FizzBuzz](https://ja.wikipedia.org/wiki/Fizz_Buzz#FizzBuzz%E5%95%8F%E9%A1%8C) 問題に対して、Schemeっぽい文法を処理できる処理系を自分で書いて、Schemeっぽく書いたFizzBuzzを実行するまでを紹介します。

## 想定対象読者

– JavaScriptがある程度わかる方
– Schemeとかが何となくわかる方
– ネタなエントリを許容できる人

# できたこと　と　（今）できないこと

## できたこと

動作させたい対象は、下記です。

“`scheme
(define fb
(lambda (x)
(if
(and (= (mod x 3) 0) (= (mod x 5) 0))
(quote fizzbuzz)
(if
(= (mod x 3) 0)
(quote fizz)
(if
(= (mod x 5) 0)
(quote buzz)
x
)
)

[JS]イテレータ&ジェネレータはもう理解した？

# はじめに
まず、イテレーターとジェネレーターという言葉を耳にしたことはありますか？
自分はこの記事を書く数時間前に初めて知りました。。w
よく使うわけでは無いかもしれないですが、JavaScriptを理解する上で大事な概念だと思うので、この記事で概要や使い方を掴みましょう！

# イテレータとは
イテレータとは、シーケンスおよび潜在的には終了時の戻り値を定義するオブジェクトのことです。具体的に言えば、2つのプロパティを持つオブジェクトを返す`next()`メソッドを持つことによってイテレータープロトコルを実装するオブジェクトです。
イテレーターを反復することを、`消費する`と言います。(一般的に1回しか実行できないため)

– value
– イテレータを実行した際に際に返ってくる値
– done
– 処理が完了したかどうかの真偽値

## イテレータ使用例
10になるまでループする処理をしてみます。

“`js
// イテレータを定義(初期値を設定することで無限ループを回避)
function genIterator(max = 10) {
let i =

Promiseの実装を読んでみた

Promiseの実装（[参考レポジトリ](https://github.com/then/promise)）を読んでみた話です。

（※1 全てをくまなく読んだというわけではなく、あるユースケースのときに内部ではどのように動くのかを調べました）
（※2 本記事で引用しているPromiseのコードにおいて、ユースケースに関係のないところは端折っています）

## ケース1 同期処理をラップしたとき
以下のような例を考えます。

“`javascript
new Promise(resolve => {
const res = doSomethingSynchronously()
resolve(res)
}).then(value => {
console.log(value)
}

console.log(“main”)
“`

このとき、

1. コンストラクタに渡した関数が実行される
2. thenメソッドによってコールバックが登録される
3. `console.log(“main”)`が実行される
4. コールバックが実行される

という順番で処理

JS Error: Invalid attempt to destructure non-iterable instance（エラー文を読む）

## 起こった問題

開発中に以下のエラーが出た。

おそらく初めての遭遇。

“`
Uncaught TypeError: Invalid attempt to destructure non-iterable instance.
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.
“`

:thinking:

## 翻訳しながら解説します

“`
キャッチできなかったタイプエラー： 反復可能オブジェクトは分割代入できません。
できるようにしたいのなら、 [Symbol.iterator]() メソッドを持つ必要があります。
“`

という感じです。

`destructure`は、分割代入 (Destructuring assignment) のことですね。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

`i

frameset を iframe に置き換える方法

# 背景
frameset は HTML5 で廃止予定のため、iframe に置き換える必要がある。
frameset では フレームの枠を掴んでサイズ変更できるが、
iframe ではサイズ変更できないのでJavaScriptでサイズ変更できるようにする。

# 実装方法
以下のように実装する。

“`html