javascript
#日記 #2018年 #12月23日 2018年12月-23 20:47
javascriptってすぐには遊べない
HTMLやCSSとかDOMとか分かってないと、そちらの調査・勉強に時間とられる。
特にHTML5とDOMの関係(例えば、HTMLElement.dataset)などを知らないと、人のコードをちょいといじるのに一苦労する
https://www.webprofessional.jp/how-why-use-html5-custom-data-attributes/
jQueryなどの特定のフレームワークに依存したサンプルや、古すぎて参考にならないコードなど、無駄に情報量が多く、それらをスルーする力を養うのに時間がかかる。
質の低いドキュメントが多い(私のこのページみたいに...)
などと言っていても仕方ないので、とっかかりとして、クライアント側でファイルサイズをチェックしてからファイルをサーバにアップロードするようなサンプルを作ってみた:
https://github.com/masakimu/flask-filepond
ファイルは、multipart/form-dataとしてサーバに送信。サイズチェックは、filepondというjavascriptライブラリとそのプラグインで実施。サーバはpython Flaskで実装。()
Javascript全般
Javascriptの文法
https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript
JavaScript文法(1) 学習環境の構築と基本的な書き方(by @azk0305)
関数が一級オブジェクトなので素性は悪くないが、クラスの記述は古い仕様だととっつきにくい。新たに導入された仕様のクラスの表記法はすぐ覚えられそうな印象。
https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript
javascript開発環境: Node.jsは使わない。Webブラウザだけでなんとかする。動作結果の確認とエラーメッセージの取得が必須の機能。
エラーメッセージの取得
https://remotestance.com/blog/2687/
flaskサーバ側
http://flask.pocoo.org/docs/0.12/quickstart/#about-responses
https://stackoverflow.com/questions/42293414/flask-correct-way-to-handle-errors-with-ajax-call-from-front-end
ダイアログ(ちょっと複雑な)
https://qiita.com/t-iguchi/items/c94bbb5a6964ad5c4b1b
dual
https://www.npmjs.com/package/react-dual-listbox
https://www.npmjs.com/package/react-listbox
https://sridatta19.github.io/react-listbox/
react
https://marmelab.com/react-admin/List.html
https://ant.design/components/form/
パッケージング
モジュール
default export
ES6のexportについて詳しく調べた
バンドラー
WebPack:
https://qiita.com/soarflat/items/28bf799f7e0335b68186
https://qiita.com/kerupani129/items/72c1a8d5ab6dffa70abf
スクリプトのバージョン変換
Babel6(Ubuntu16.04のaptで入るバージョン) https://babeljs.io/
https://qiita.com/shisama/items/88080011bbc69e3e620b (@/表記は babel7用なので、babel6用の表記に読み替える必要があるが、書いてあることは割と babel6でも使える)
babel6 と7の違い: https://blog.hiroppy.me/entry/babel7
https://qiita.com/mizchi/items/46dfe1c3ad2e6d9c9007
require("babel-polyfill")を書かないとbabelは変換しないみたい(polyfillの綴り間違ってても変換してくれるので、もし不要なら変換後にrequireのところを削ってもいいかも。。。試してないけど。)
https://ginpen.com/2017/12/01/babel/ (require()が残るので、WebPack等でバンドル化しないと少なくともIE11ではこける)
code: .babelrc
{
"presets": "env", {"targets":{"ie":11}, "useBuiltIns":true},
"plugins": [
"syntax-async-functions",
"transform-async-to-generator"]
}
(最後の transform-asyncが必要かどうかは不明)
babel-presets: https://github.com/babel/babel-preset-env
READMEは、いまいち役に立たない感じ。
emacs
web-mode
http://yanmoo.blogspot.com/2013/06/html5web-mode.html
よく使うモジュール
jquery
moment.js https://www.yoheim.net/blog.php?q=20180201