勉強日記

チラ裏

JavaScript

Paint 3Dで制作した3Dモデルをthree.jsで描画した

Paint 3Dで描く Three.jsで読み込む github.com Paint 3Dで描く www.microsoft.com いつの間にかこんなゴキゲンなアプリが標準搭載されていたんですね~ たのしい あひるbotテクスチャを貼る前のプロジェクトは間違えて消してしまった 一度貼って保存したテ…

jest + puppetterでE2E自動テスト -- JavaScript無効、Cookie無効のテスト

全体 index.htmlのソース、仕様 JavaScript無効時のテスト Cookie無効時のテスト awaitとPromiseの意識 JavaScirpt無効判定 Cookie無効判定 全体 github.com index.htmlのソース、仕様 <html> <head> <meta charset="utf-8" /> <noscript> <meta http-equiv="refresh" content="0; URL=no-script.html" /> </noscript> <title> index.html </title> </meta></head></html>

1つのform要素でGET/POSTのsubmitを共存

TL;DR 経緯 やったこと 考えうる別解 所感 TL;DR formmethod, formaction 属性使え GETリクエストにCSRFトークンが乗ってしまう問題は、2019時点でJSなしではたぶん解決不可能 ajax?なにそれおいしいの? 経緯 「条件を入力して帳票出力する」系の機能で、…

JWT認証アプリケーションで認可つきCSVダウンロードを実装した話

背景 困ったこと やったこと サーバ側でCSV生成 フロントエンド側でBlob生成 踏んだ文字化けのパターン 背景 Laravel + Vue.jsアプリケーション JWT認証のSPA つまり、すべてのリクエストのAuthorizationヘッダにJWTを載せている axios.defaults.headers.com…

axiosをモックしてテストする

~/util/axios.js import axios from 'axios'; const headers = { 'Authorization': `Bearer ${localStorage.getItem('auth_token')}` }; /** * Next we will register the CSRF Token as a common header with Axios so that * all outgoing HTTP requests a…

JsDoc3と継承関係可視化プラグイン使ってドキュメント自動生成した話

背景 つかってみた (おそらくレガシな書き方のせいで)つらいとこ 背景 レガシなビルド環境・レガシな書き方の既存のソースコードに JsDocコメントを書いてドキュメントを自動生成することに 本当はESDoc使いたかったけどなんかうまくいかなかった 書き方がレ…

Nuxt.js ビギナーズガイド ch.5 Nuxt.jsアプリケーションのテスティング

nuxt-beginners-guide.elevenback.jp フロントエンドにおけるテストの必要性 フロントエンドのテストの難しさと民主化 依然として残るテストの課題 どこまでテストを書くか? 本章で取り扱う範囲について Jestの紹介と導入 facebook製の高機能テストランナー…

Nuxt.js ビギナーズガイド ch.4 中規模以上の開発を意識したNuxt.jsによるWebアプリケーション開発

nuxt-beginners-guide.elevenback.jp 本章で開発するもの 開発するアプリケーションについて 利用するAPIサーバーについて DBの構造について Firebaseのセットアップ Firebaseプロジェクトの作成 Realtime Databaseのセットアップ プロジェクトのスキャフォ…

Nuxt.js ビギナーズガイド ch.3 Nuxt.jsの機能の活用

nuxt-beginners-guide.elevenback.jp layoutsディレクトリによるレイアウトの共通化 レイアウト構築機能について レイアウトのルールとdefault.vueの編集 複数のレイアウトの管理 いま見ているページのレイアウトはVue.js Devtoolsでも確認可能 レイアウトフ…

Nuxt.js ビギナーズガイド ch.2 Nuxt.jsによるシンプルなアプリケーション開発

nuxt-beginners-guide.elevenback.jp 開発するアプリケーションについて 開発するアプリケーションの概要 事前準備 Node.jsとYarnによる必須環境の導入 推奨ツール「direnv」の導入 Vue CLIによるアプリケーションひな形の作成 はじめてのページ作成と「Hell…

Nuxt.js ビギナーズガイド ch.1 Nuxt.jsの概要

nuxt-beginners-guide.elevenback.jp 「モダンフロントエンド」のイマ いわゆる「モダンフロントエンド」について 安定したフロントエンドJavaScriptに求められるもの Nuxt.jsとこれからのWebアプリケーション開発 Nuxt.jsとは Next.jsをリスペクトして生ま…

JavaScriptでApplicative Style

book.impress.co.jp この本でApplicativeが全く出てこなかったので 参考: Functors, Applicatives, And Monads In Pictures // a -> a const identity = x => x; // a -> b -> a const const_ = c => _ => c; // 関数合成 const compose = function (/* func…

JavaScript関数型プログラミング Ch.8 非同期イベント/データのための関数型手法

book.impress.co.jp まえがき 非同期コードの課題 関数間の時間的な依存関係 コールバックピラミッドに陥る 継続渡しスタイルを使う 【補】継続渡しスタイル コールバック地獄のリファクタ Promiseによる第一級非同期処理 【補】ECMAScriptのPromiseは厳密に…

JavaScript関数型プログラミング Ch.7 関数型コードの最適化

book.impress.co.jp まえがき 関数実行の中身を調べる 再帰コードの問題点 遅延評価を使用して実行を遅らせる alternation関数コンビネータ(OR)により不要な計算を避ける ショートカットフュージョンを利用する "必要に応じて呼び出す"戦略を実現する メモ化…

JavaScript関数型プログラミング Ch.6 関数型コードのテスト

book.impress.co.jp Part3 関数型のスキルを磨く まえがき ユニットテストへの関数型プログラミングの影響 命令型プログラムのテストにおける課題 単純なタスクを特定して分解することの困難さ 共有リソースへの依存は不一致な結果をもたらす あらかじめ定義…

JavaScript関数型プログラミング Ch.5 複雑性を抑えるデザインパターン

book.impress.co.jp まえがき 例外の問題 適切な使いどころ nullチェックの問題 より優れたソリューション:ファンクター 安全ではない値のラッピング ファンクターの詳細 処理の流れ 実は今まで使ってました Functor則 ファンクターの限界 モナドを使った関…

JavaScript関数型プログラミング Ch.4 モジュール化によるコードの再利用

book.impress.co.jp まえがき メソッドチェーンと関数パイプライン メソッドをまとめてチェーンにする 関数をパイプライン状に配置する 互換性のある関数のための要件 型互換の関数 関数とアリティ:タプルの場合 カリー化された関数評価 関数インタフェース…

JavaScript関数型プログラミング Ch.3 データ構造の数を減らし、操作の数を増やす

アプリケーションの制御フローを理解する メソッドチェーン 関数チェーン コードを把握する 宣言型および遅延関数チェーン SQLライクなデータ:関数としてのデータ 再帰的に考えることを学ぶ アプリケーションの制御フローを理解する 宣言的プログラミング。…

JavaScript関数型プログラミング Ch.2 関数型言語としてのJavaScript

book.impress.co.jp なぜJavaScriptなのか 関数型プログラミングvsオブジェクト指向プログラミング 状態管理 オブジェクトを値として使う 深いフリーズ レンズ 関数 クロージャとスコープ まとめ なぜJavaScriptなのか 最も広範に使われている言語 Webの言語…

JavaScript関数型プログラミング Ch.1 関数型で思考する

book.impress.co.jp Becoming functional まえがき 関数型プログラミングとは何か 関数型プログラミングは宣言型である 処理がどのように実装されているか、データがどのように流れるかを明示している例 宣言的である例 純粋関数と副作用問題 純粋関数 (外か…

laradock環境でstorybook for vueを導入し、HMRの設定をした話

環境 やったこと つまりどころ アプリケーションのHMR on dockerの設定 laradockのポート設定 参考 ポート設定を別ファイルに分割 ポート設定用yamlファイルを作成・ポート設定 コンテナ再起動 Laravel Mixの設定 使用ポートとポーリング間隔の設定 Storyboo…

Vue.js入門 基礎から実践アプリケーション開発まで Chapter9

Chapter 9 中規模・大規模向けのアプリケーション開発(2) 設計 仕様 -> 設計 -> 実装 設計フェーズを経ることによるメリット 開発効率の向上 メンテナンス性向上 Chapter 9 中規模・大規模向けのアプリケーション開発(2) 設計 9.1 コンポーネント設計 9.1.1 …

【Emacs】JSの補完を入れた話

JSの補完を入れた話 company-mode + tern JSの補完を入れた話 環境 導入 company tern .tern-project companyのバックエンドに登録 所感 TODO 環境 Win10 GNUEmacs 25.2 導入 company 自動補完のドライバ M-x package-install RET companyをインストール Ema…

【Emacs】skewer-modeを入れた話

skewer-modeを入れた話 Vue.jsの勉強中、エディタ-ブラウザ間のマウス往復にウンザリして導入した webpackのHMR使えという話なのですが、入門書の進行上、そうもいかなかったのです skewer-modeを入れた話 環境 skewer-modeってなに セットアップ つかう ア…

Vue.js入門 基礎から実践アプリケーション開発まで Chapter6

Chapter6 単一ファイルコンポーネントによる開発 Chapter6 単一ファイルコンポーネントによる開発 6.1 ツールのインストール 6.1.1 Vue CLI インストール Note 6.2 SFC: Single File Componentとは 6.3 SFCの仕様 6.3.2 <script>ブロック 6.4 SFCのビルド 6.5 SFC体…

Vue.js入門 基礎から実践アプリケーション開発まで Chapter4

Chapter4 Vue Routerを活用したアプリケーション開発 今こそProgressive Frameworkを拡張するとき Vue Router: 公式プラグイン Chapter4 Vue Routerを活用したアプリケーション開発 4.1 Vue RouterによるSPA 4.1.1 SPAとルーティング SPAを実装するうえで考…

Vue.js入門 基礎から実践アプリケーション開発まで Chapter3

Chapter3 コンポーネントの基礎 Chapter3 コンポーネントの基礎 3.1 コンポーネントとは何か 3.1.1 すべてはコンポーネントから構成される 3.1.2 コンポーネント化のメリットと注意点 メリット 3.1.3 Vue.jsのコンポーネントシステム 3.2 Vueコンポーネント…

Vue.js入門 基礎から実践アプリケーション開発まで Chapter1-2

gihyo.jp これ Chapter 1 プログレッシブフレームワークVue.js Chapter 2 Vue.jsの基本 2.3 Vueオブジェクト 2.3.1コンストラクタ Vueインスタンスを変数に代入する理由は? 2.7 フィルタ(filters) 2.8 算出プロパティ(computed) 2.9 ディレクティブ 2.9.3 …