JavaScript関連のことを調べてみた2021年10月17日

【学習メモ】Vueインスタンスについて

#はじめに
Vue.jsを最近勉強し始めたので学んだ文法などを備忘録としてメモしていこうと思います。

##Vueインスタンスの生成
Vueインスタンスを生成する場合は以下のように`new Vue`とし、`el`プロパティにVueテンプレートのどの部分へ適用するVueインスタンスなのかを、セレクタを指定することで示します。

https://jp.vuejs.org/v2/api/index.html#el

“`html:index.html

{{ message }}

“`

“`js:index.js
new Vue({
el: “#app”, // <--上記htmlファイル内のid要素appの部分に適用する data: { message: 'こんにちは' } }) ``` また、`el`要素を使わずに`$mountメソッド`を利用する方法もあります。 ```js:index.js new Vue({ data: { message: 'こんにちは' } }).$mou

【JavaScript】関数とオブジェクト②　コールバック関数

#はじめに

Udemyの[【JS】ガチで学びたい人のためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/)の講座の振り返りです。

前回の記事

https://qiita.com/nao0725/items/338904737ed2849a1bd9

#目的

* 関数とオブジェクトについての理解を深める

#本題
###1.関数とオブジェクト

関数は**実行可能なオブジェクト**である
この点が他のオブジェクトと異なる

下記コードで確認すると

““`javascript
// helloと出力される関数を用意
function a() {
console.log(“hello”);
}
// propには0を、methodでは「メソッド」と出力されるように設定
a.prop = 0;
a.method = function(){
console.log(“メソッド”)
}

// 実行すると下記のようにそれぞれ出力される
// hello
a();
// メソッド
a.meth

TypeScriptを用いてContentfulへ新規投稿する

他のサイトで書いた記事を取得し、contetfulへ保存する処理についてまとめています。
contentfulの基礎的な概念や扱いを把握していることを前提としてい記事を書いております。
間違いなどあれば、指摘していただけると幸いです。

利用するサードパーティーのインストール([https://www.npmjs.com/package/contentful-management](https://www.npmjs.com/package/contentful-management))

“`tsx
yarn add contentful-management
“`

記事を取得するだけならば、[こちら(contentful)](https://github.com/contentful/contentful.js) のサードパーティーだけで事足りますが、記事の保存などを行う場合は上の　contentful-management を利用することをお勧めします。

### まずapi key や spaceの情報を用いてclientを作成する

APIKEY, SPACEID はそ

JavaScript入門(関数と宣言)②

# 概要
[…JavaScript入門(関数と宣言)①](https://qiita.com/andota05/items/a32d5fee352f17ea1361)の続きです。

JavaScriptを学習、理解を深めるため「[JavaScript Primer 迷わないための入門書](https://jsprimer.net/)」を読み、
理解した内容等を記載していく。

[JavaScript入門一覧](https://qiita.com/andota05/items/22fae452225b785fd405)に他の記事をまとめています。

※下記「動作環境情報」を参考にし、開発者コンソールで結果を確認してください

動作環境情報はコチラ

**【環境】**
PC：Mac
エディタ：Visual Studio Code
プラグイン：`Live Server`というVisual Studio Codeのプラグインを使用し、サーバ環境を用意。
開発者コンソール：GoogleChrome

**【登場ファイル】**
f

【初心者】あなたがJavaScriptの基礎を習得できているか判断するための練習問題（随時更新）

# はじめに
~~随分とおせっかいな煽りタイトルですが~~ プロゲートやドットインストールなどでJavaScriptの基礎を学ぶだけではReactやVueなどのライブラリ・フレームワークなどの学習で躓いてしまうことでしょう。これからReactやVueを学ぶ方向けにJavaScriptの基礎を確認できる問題を用意しました。

[解答](#解答編)は一番下にまとめてあります！

# ターゲット
– 「JavaScriptの基礎を一通り学んだからReactやVueの勉強に移るか！」と考えている方
– React,Vueなどの勉強をしているが、「ReactやVueではなくJavaScriptが分かってないよ」と言われてしまった方

# 問題編

## レベル1
### 1-1
下のコードを実行すると何が表示されるか？

“`javascript
let name = “TBSten” ;
if(name === “TBSten”){
console.log(“ok”);
}else{
console.log(“no”);
}
“`

### 1-2
下のコードを実行すると何が表示

Nuxt+fabric.jsで画像同士を重ね合わせるcanvasを作成

pngなどの透過画像をcanvasで重ねたかったのですが、いい感じのまとまった記事がなかったのでこちらでまとめています。

しかも自分の重ねたい方法は、**操作している画像が固定されている画像の下に常に存在するようにする**、というもので見つけるのが大変でした。フレーム画像の下で画像編集をしたいときなどに使えると思います。

## 前提

– nuxt-composition-apiをインストールして準備していること
– fabric.jsをインストールして準備していること

## 使った画像

透過画像はこちらで手に入れました。

https://zukan.pokemon.co.jp/detail/327

## コード

鍵となるのは `globalCompositeOperation` です。これを見つけるのにすごく時間がかかりました、、、
`destination-over`をつかうことによって、元からある図形の下に描画ができるようになります。また、一番上の画像は今回selectableを解除しています。

“`index.vue