NuxtをTypeScript化するときのやりかた

Vue.jsとNuxt.jsでいろいろ作っているけれど、TypeScriptが素敵すぎる。。 create-nuxt-appだとTypeScriptがないので、TypeScript化するときにやることを整理したときのメモ TypeScriptが使えるように設定する 0. ディレクトリ構成ディレクトリ構成はこんな…

2018-11-25

Vue.jsでの配列・オブジェクト操作のお作法

Vue.js javascript

Vue.jsでは、配列やオブジェクトの代入を、うまく検知できないらしい。。お作法があるので、調べてみたとこの備忘録。配列 // 追加: pushを使う let addItem = ... this.items.push(addItem); // 変更: spliceを使う let modifyIndex = 1; let modifyItem …

2018-11-25

【小ネタ】JavaScriptでクリップボードにコピーする（Async Clipboard API）

小ネタ javascript

クリップボードにコピーするほう法を調べたので、その備忘録。 2020/03/20追記 2020/03/20現在、Can I useをみると、Safariが未対応。。 clipboard-polyfill.jsを利用するのが良さそう。 www.memory-lovers.blog こんな感じ // Copy navigator.clipboard.wri…

2018-11-20

SNSシェアボタンを追加するあれこれ(Facebook/Twitter/Google+/はてなブックマーク/LINE/Pocket)

HTML javascript

ウェブサイトによくあるSNSのシェアボタン。使いたいなと思い、いろいろ調べたときの備忘録。アイコンを探すアイコンは色を変えたりなどしたいので、CSS fontがいい。 - Font AwesomeとかLigature Symbolsを見てみる - なければ、Simple IconsでSVGを探し…

2018-11-13

ScrollRevealで簡単JavaScriptアニメーション

javascript front-end

スクロールすると表示されるアニメーションとかをやりたかったので、いろいろ調べたら、ScrollRevealがいい感じだった。その時の備忘録 npmでインストール $ npm install scrollreveal --save スクロールアニメーションの設定 import ScrollReveal from "sc…

2017-06-25

Django x jQuery x Ajaxで非同期にファイルをアップロードしてサーバ側で処理をする

javascript jQuery Django front-end

前に記事で書いた処理のファイルバージョン。 wannabe-jellyfish.hatenablog.com 見た目的にはこんな感じ。 HTML側 <form id="form" class="form" action="upload_file" method="post" enctype="multipart/form-data"> {% csrf_token %} <div class="input-group"> <input type="text" class="form-control" readonly=""> </div></form>