f@ctor

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

JavaScript関連のことを調べてみた2020年10月21日
目次

WTForms の TextArea をファイルドロップに対応させる方法

# 経緯
ある案件をFlaskで実装したときのこと、
「Copy&Pasteしてね」と導いた公開鍵の登録フォーム(TextArea) に、
ファイルドロップをするエンドユーザさまがいらいしゃいました。
そんなことをする人がいるんだと思いながらも、なんとか対応できないものかと調べたところ…
[StackOverflow: Load Textfile via Drag and Drop on Textarea](https://stackoverflow.com/questions/58676967/load-textfile-via-drag-and-drop-on-textarea)
というのが見つかりました。

案外簡単なJavaScriptで実装できることがわかったので、
Flaskへ実装してみました。

## Flask
まずは、Flaskで公開鍵の登録フォームをFORMクラスRegistFormとして定義します。
公開鍵の検証は sshpubkeys ライブラリを使っていますが、これは本題ではありません。

フォームのデータを検証したデータを受け取って表示するだけのテストア

元記事を表示

リファラ（referrer）を取得して遷移元によって処理を分岐する方法

#サンプルソース
“`javascript:

if (document.referrer.length !=0 ){ // リファラがある場合

// リファラを取得
let ref = document.referrer;
// トップページのURLをを設定
let url = ‘https://○○○.com/’;

if ( ref == url ) { // リファラがurlと一致する場合
// ①トップページからのアクセス
} else if ( ref.indexOf( url ) == 0 ){ // リファラがurlを含む場合
// ②下層ページからのアクセス
} else {
// ③検索結果などからのアクセス
}

} else {
// ④直接アクセス
}
“`

元記事を表示

javascriptでできること１５選

特徴

インターネットを見るブラウザというソフトの上で動くプログラミング言語
画像が横に動くスライダーや、マウスの動きによるアニメーションなどはjavascriptで作られている。

ポップアプウィンドウ

ブラウザに入っている基本的なものだけだとこのような形になるが、デザインをつけることも可能。その方がわかりやすく表現できる。

javascriptはページを移動しない状態で確認ができるほとんど唯一の手段。こういった注意警告系のポップアップは重宝され、とてもよく使われている。

Ajax
Ajaxは、ページを移動しなくてもデータを取得できたり、表示したりできる機能。Ajaxを使ったページで一番驚きを持って迎えられたのが、ご存知Google Mapである。中の地図を自由に動かせること自体が画期的だった。Ajaxという言葉自体もGoogle Mapによって広がっている。

サイトの利便性アップ

例えば、情報量が大きくなりすぎてしまったときにタブでまとめることができる。メニューにカーソルを合わせると、詳細メニューが表示されるのは良く見る機能だろう。こちらもJavaScrip

元記事を表示

TypeScript サーバー 向けの プロジェクトジェネレーター を作ってみた

– 取り敢えずコマンド一発で TS のプロジェクトを作ってくれる便利なやつです
– 個人的に必要最低限と思うプロジェクトを生成するようにしてます
– 元々は MS が配布してる [TypeScript-Node-Starter](https://github.com/microsoft/TypeScript-Node-Starter) が [express](https://expressjs.com/) 向けの上に重厚にセットアップされていて、何が必要で、何が不要かわからなかったので、もっとスリムにならないかな？と勉強がてら作ってみたという側面があります
– TypeScript って環境構築が地味に面倒で [nodemon](https://www.npmjs.com/package/nodemon) はしょっちゅうクラッシュするし、 [ESLint](https://eslint.org/) と [Prettier](https://prettier.io/) の喧嘩も面倒！なんか一発でプロジェクト作りたいなという思いもありました
–

元記事を表示

【Vue】The template root disallows ‘v-for’ directives. 解決法

#テンプレートルートは、’v-for’ディレクティブを許可しません。
分割したコンポーネントで`v-for`を使ったところ、このようなエラーが、、、:point_down:

**The template root disallows ‘v-for’ directives.**
（翻訳にかけると「テンプレートルートは、’v-for’ディレクティブを許可しません」と言う意味）

![スクリーンショット 2020-10-20 21.00.42.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/0d0e19b9-9fc2-d5d8-8982-e87e52aee57a.jpeg)

なんじゃこりゃ？？

コードはこんな感じ

“`vue