JavaScript

View Transitions API で画面遷移アニメーション

View Transitions API とは 異なるDOM状態間のアニメーション遷移を簡単に実現できるAPI これまでネイティブアプリでしか実装できなかったページをまたがるズムーズなアニメーション遷移も可能になる Chrome、Edgeはバージョン111以降でサポートされているが…

YouTube APIで複数動画

ちょこっとやったやつのメモ HTML <button class="js-player-start" data-movie="0">再生</button> <button class="js-player-stop" data-movie="0">停止</button> <div id="player_0"></div> <button class="js-player-start" data-movie="1">再生</button> <button class="js-player-stop" data-movie="1">停止</button> <div id="player_1"></div>

JAMstack と Headless CMS

Headless CMS について調べる用事があったのですが、関わりが深そうな JAMstack についても調べてみました。 JAMstack とは? JAMstackはテクノロジーではなく、JAMstackはWebサイトやアプリを構築する新しい方法です。クライアントサイドに基づいた最新のWe…

vue-quiz の Tips

vue-quiz を作った際にでてきたTipsをまとめておきます 同じID(値)を持った配列をまとめたい 今回の場合、ラジオボタン式(単一解答)なら問題ないけど、チェックボックス式(複数解答)のときに整形する必要がでてきた つまり array = [ { id: "1", answe…

Vue.js で クイズ実装

設問 + 答え のクイズをVue.jsで実装する。 URL GitHub pages:https://yuheijotaki.github.io/practice-exam/ GitHub リポジトリ:https://github.com/yuheijotaki/practice-exam 機能 設問/正解などのデータは JSON にいれて Vue で描画 設問に対してユー…

【学習メモ】JavaScriptコードレシピ集 その15

JavaScriptコードレシピ集 の学習メモ 続きです。 JavaScript コードレシピ集作者: 池田泰延,鹿野壮出版社/メーカー: 技術評論社発売日: 2019/01/25メディア: 単行本(ソフトカバー)この商品を含むブログを見る Chapter17 プログラムのデバッグ console.log…

【学習メモ】JavaScriptコードレシピ集 その14

JavaScriptコードレシピ集 の学習メモ 続きです。 JavaScript コードレシピ集作者: 池田泰延,鹿野壮出版社/メーカー: 技術評論社発売日: 2019/01/25メディア: 単行本(ソフトカバー)この商品を含むブログを見る Chapter15 ローカルデータの取り扱い 244 loc…

【学習メモ】JavaScriptコードレシピ集 その13

JavaScriptコードレシピ集 の学習メモ 続きです。 JavaScript コードレシピ集作者: 池田泰延,鹿野壮出版社/メーカー: 技術評論社発売日: 2019/01/25メディア: 単行本(ソフトカバー)この商品を含むブログを見る Chapter14 さまざまなデータの送受信方法 229…

【学習メモ】JavaScriptコードレシピ集 その12

JavaScriptコードレシピ集 の学習メモ 続きです。 JavaScript コードレシピ集作者: 池田泰延,鹿野壮出版社/メーカー: 技術評論社発売日: 2019/01/25メディア: 単行本(ソフトカバー)この商品を含むブログを見る Chapter13 処理の実行タイミングを制御する C…

【学習メモ】JavaScriptコードレシピ集 その11

JavaScriptコードレシピ集 の学習メモ 続きです。 JavaScript コードレシピ集作者: 池田泰延,鹿野壮出版社/メーカー: 技術評論社発売日: 2019/01/25メディア: 単行本(ソフトカバー)この商品を含むブログを見る Chapter11 画像・音声・動画の取り扱い 191 …

【学習メモ】JavaScriptコードレシピ集 その10

JavaScriptコードレシピ集 の学習メモ 続きです。 JavaScript コードレシピ集作者: 池田泰延,鹿野壮出版社/メーカー: 技術評論社発売日: 2019/01/25メディア: 単行本(ソフトカバー)この商品を含むブログを見る Chapter10 アニメーションの作成 181 CSS Tra…

【学習メモ】JavaScriptコードレシピ集 その9

JavaScriptコードレシピ集 の学習メモ 続きです。 JavaScript コードレシピ集作者: 池田泰延,鹿野壮出版社/メーカー: 技術評論社発売日: 2019/01/25メディア: 単行本(ソフトカバー)この商品を含むブログを見る Chapter9 フォーム要素の操作方法 161 テキス…

【学習メモ】JavaScriptコードレシピ集 その8

JavaScriptコードレシピ集 の学習メモ 続きです。 JavaScript コードレシピ集作者: 池田泰延,鹿野壮出版社/メーカー: 技術評論社発売日: 2019/01/25メディア: 単行本(ソフトカバー)この商品を含むブログを見る Chapter8 HTML要素の操作方法 DOM操作まわり…

【学習メモ】JavaScriptコードレシピ集 その7

JavaScriptコードレシピ集 の学習メモ 続きです。 JavaScript コードレシピ集作者: 池田泰延,鹿野壮出版社/メーカー: 技術評論社発売日: 2019/01/25メディア: 単行本(ソフトカバー)この商品を含むブログを見る Chapter 7 ユーザーアクションの取り扱い 114…

【学習メモ】JavaScriptコードレシピ集 その6

JavaScriptコードレシピ集 の学習メモ 続きです。 JavaScript コードレシピ集作者: 池田泰延,鹿野壮出版社/メーカー: 技術評論社発売日: 2019/01/25メディア: 単行本(ソフトカバー)この商品を含むブログを見る Chapter 6 ブラウザーの操作方法 jQuery でば…

【学習メモ】JavaScriptコードレシピ集 その5

JavaScriptコードレシピ集 の学習メモ 続きです。 JavaScript コードレシピ集作者: 池田泰延,鹿野壮出版社/メーカー: 技術評論社発売日: 2019/01/25メディア: 単行本(ソフトカバー)この商品を含むブログを見る Chapter 5 日付や時間の取り扱い 085 曜日を…

【学習メモ】JavaScriptコードレシピ集 その4

JavaScriptコードレシピ集 の学習メモ 続きです。 JavaScript コードレシピ集作者: 池田泰延,鹿野壮出版社/メーカー: 技術評論社発売日: 2019/01/25メディア: 単行本(ソフトカバー)この商品を含むブログを見る Chapter 4 データについて深く知る データ =…

【学習メモ】JavaScriptコードレシピ集 その3

JavaScriptコードレシピ集 の学習メモ 続きです。 JavaScript コードレシピ集作者: 池田泰延,鹿野壮出版社/メーカー: 技術評論社発売日: 2019/01/25メディア: 単行本(ソフトカバー)この商品を含むブログを見る Chapter 3 複数データの取り扱い 複数データ …

【学習メモ】JavaScriptコードレシピ集 その2

JavaScriptコードレシピ集 の学習メモ 続きです。 JavaScript コードレシピ集作者: 池田泰延,鹿野壮出版社/メーカー: 技術評論社発売日: 2019/01/25メディア: 単行本(ソフトカバー)この商品を含むブログを見る Chapter 2 真偽値や数値や文字の取り扱い 022…

【学習メモ】JavaScriptコードレシピ集 その1

JavaScript コードレシピ集作者: 池田泰延,鹿野壮出版社/メーカー: 技術評論社発売日: 2019/01/25メディア: 単行本(ソフトカバー)この商品を含むブログを見る 株式会社ICSというフロントエンドに強い会社の方2名が著者の本です。 コードレシピ集という本の…

【読書メモ】改訂新版 JavaScript 本格入門

これまでなんとなく書いてやりすごしていた JavaScript を基礎から学習したいと思い、改訂新版 JavaScript 本格入門 を読みました。 改訂新版JavaScript本格入門 ?モダンスタイルによる基礎から現場での応用まで作者: 山田祥寛出版社/メーカー: 技術評論社発…

Babel ターミナルで常時監視する(mac)

Babel のインストール プロジェクトフォルダに移動して、 $ npm install -g babel-cli babel-cli は Babel をコマンドから操作するためのツール $ npm install --save-dev babel-preset-es2015 babel-preset-es2015 は ES2015 のコードをトランスコンパイル…

【学習メモ】[Udemy] JavaScriptエンジニアのためのES6完全ガイド 勉強メモ その2

概要 【世界で 2 万人が受講】JavaScript エンジニアのための ES6 完全ガイド | Udemy を学習したのでメモしておきます。 その 1の続きです。 構文編 constとlet const - JavaScript | MDN let - JavaScript | MDN 変更される可能性がない場合(定数)はcons…

【学習メモ】[Udemy] JavaScriptエンジニアのためのES6完全ガイド 勉強メモ その1

概要 【世界で 2 万人が受講】JavaScript エンジニアのための ES6 完全ガイド | Udemy を学習したのでメモしておきます。 動画内で図解を用いたくわしい解説や小テストがフェーズごとにあります。 こちらに記載しているコードは自分なりに発展させたものにな…

【読書メモ】Webフロントエンド ハイパフォーマンス チューニング

Web フロントエンド ハイパフォーマンス チューニングを読みました。 フロントエンドのフの字も知識もない自分ですが、勉強になったポイントなどを備忘録しておきます。 Webフロントエンド ハイパフォーマンス チューニング作者: 久保田光則出版社/メーカー:…