vaguely

和歌山に戻りました。ふらふらと色々なものに手を出す毎日。

JavaScript

Babelを使ってみようとしたらハマった話とドラッグで要素を動かしてみたい話

はじめに Babel と Webpack を使う サンプルコード(失敗) はじめに 投稿が大変遅れましたが、この記事は JavaScript Advent Calendar 2019 の13日目の記事です。 要素をドラッグして動かしたい。 せっかくなので JavaScript で書いてみよう。 と思ったら Bab…

JSConf China 2019 in 上海参加記録( 2 日目)

はじめに 会場 Keynote. Learn as I write the Docs 2. Serverless is your BFF 3. Entropic package registry 4. Redux Based Modular Design 5. Diving into TypeScript design metadata with NestJS 6. Writing code to refactor code 7. JavaScript 的执…

JSConf China 2019 in 上海参加記録( 1 日目)

はじめに 会場 Opening & Opening Note Keynote. Continuous learning & leadership evolution 2. The beauty of TypeScript 3. ClojureScript - Winning through simplicity 4. Modern GraphQL workflow 5. Building (Progressive) Web Apps 6. 面向传统, …

WSL の Ubuntu 18.04 で SpiderMonkey をビルドした話

はじめに WSL のインストール 必要なソフトウェアのインストール SpiderMonkey のビルド はじめに ここまで TypeScript(JavaScript) の prototype などを追ってきて、ふと思ったのが、「これって内部的にはどう扱われているのだろう」ということでした。 そ…

【TypeScript】prototype を追いかける

はじめに prototype メソッド static メソッド 関数 クラス クラスインスタンス マージしてみる はじめに 【TypeScript】InversifyJSでIoC(DI)体験 1 【TypeScript】InversifyJSでIoC(DI)体験 2 【TypeScript】Decoratorを覗き見る 1 【TypeScript】Decorato…

【TypeScript】Decoratorを覗き見る 2

はじめに Decorator Factory 関数の呼び方 Prototype はじめに 【TypeScript】InversifyJSでIoC(DI)体験 1 【TypeScript】InversifyJSでIoC(DI)体験 2 【TypeScript】Decoratorを覗き見る 1 今回は Decorator Factory から見てみますよ。 Decorator Factory …

【TypeScript】InversifyJSでIoC(DI)体験 1

はじめに 準備 とりあえず DI ってみる InversifyJS とたわむれる 1 はじめに 諸般の事情から TypeScript に漬け込まれている今日この頃。 ふと TypeScript 単体で DI ってできないのかな~と思ってググった時に出てきた、 InversifyJS を試してみることにし…

コンパイルを自動化したい話 + (Pikaday + TypeScript) で IE でも DatePicker を表示したい話

はじめに npm scripts で自動的にコンパイル IE11 での input type='date' 複数ファイルをバンドルして出力する はじめに ASP.NET Core + TypeScript ってみる 1 ASP.NET Core + TypeScript ってみる 2 ASP.NET Core + TypeScript ってみる 3 PostCSS 、 Aut…

ASP.NET Core + TypeScript ってみる 3

はじめに fetch について webpack を使う output.library について 参照 はじめに ASP.NET Core + TypeScript ってみる 1 ASP.NET Core + TypeScript ってみる 2 今回は少~しだけ fetch の話と、 webpack を使った import / export の話です。 全然 ASP.NET…

AngularとSpringBootでWebページを作ってみたい その2

はじめに node_moduleをインストールし直す ビルドデータの出力先の変更 CSS Grid Layoutを使う RxJSでJSONデータ取得 おわりに 参照 はじめに AngularとSpringBootでWebページを作ってみたい その1 引き続きWebページを作成すべくあれこれ試しています。 今…

AngularとSpringBootでWebページを作ってみたい その1

はじめに ヘッダーを作る バナーを作る アニメーションをつける キーイベントを取る top-banner.component.tsのコード おわりに 参照 はじめに ひょんなことから試しにWebサイトを作ってみることにしました。 フロントはAngular、バックはSpring bootで、以…

AngularのAnimate2

はじめに マウスオーバーとマウスが離れた時のイベントを取得する CSS アニメーション ngFor 参考 はじめに 前回の続きです。 公式ドキュメントのボタンのように、マウスオーバーした時にボタンが浮き上がって見える、という動きを真似してみます。 マウスオ…

AngularのAnimate

はじめに アニメーション EaseType アニメーションの開始・終了イベント 参考 はじめに 前回に続いてAngular.jsのお話。 昔Angular.jsの弱点としてアニメーションが挙げられていた気がしていたので(別のものと混同している恐れもあります)、 ちょこっと調べ…

関モバ #19で発表してきました

はじめに 準備 スライドについて おわりに 参考 はじめに 10/26に行われた関モバ #19で発表してきました。 kanmoba.connpass.com 今回のネタは前回のWebVR。 https://masanori840816.github.io/KanMoba19/slidepage.html 緊張もしたし、時間も少しオーバーし…

three.js + WebVR BoilerplateでモバイルVR

はじめに 準備 3Dモデルを作る Sceneを作る 3Dモデルの読み込み ライティング 結果 おわりに 参考 はじめに 前回Spring Bootを使ってHTMLを表示するところまでやりました。 そのままAngularJSで何かサイトを作ろうと思っていたのですが、ちょっと予定を変更…

Angularでテキストを分割してテーブルに入れる

やったこと Controller as コード 参考 終わりに ちょっと必要になったのでメモ。 やったこと TextAreaに入力された文字列を、改行・コンマ区切りで分割してTableにセットします Controller as 以前Angular.jsを使った時は、formなどからデータを取得する際…

Angularにも触れてみる 2

前回の続きです。 やったこと 登録済みのタグ(カテゴリ)情報をDBから取得して、チェックボックスとして表示する 投稿ボタンを押した時に、チェックされたチェックボックスのIDをJSONとしてサーバ側のコントローラに渡す DBからデータを取得する サーバ側から…

Angularにも触れてみる 1

はじめに 前回はReactを使ってブログ記事を表示するページを作りかけてみたわけですが、表示するための記事を投稿するためのページが欲しくなりました。 投稿するページは自分だけが利用できればそれでよく、正直DBにそのままデータを突っ込んでも。。。と思…

React.jsに触れてみる4 (+Sinatra)

ふとした思いつきで、今年のはじめに作成しかけたまま放置しているブログで、Reactを使ってみることにしました。 元のプロジェクトはsntVaguely - GitHubです。 やったこと Ajaxを使って、ActiveRecordで取得したデータをJSON形式で取得する。 取得したJSON…

React.jsに触れてみる3 (2の修正)

前回をなんとなくChromeで表示したところ、エラーが結構出ていたため修正したお話。 ソースコード javascript.js (function () { var _intRightTabNum = 2; // 動的にCSSを切り替えるのに使用. var tabBgStyle = { color: '#0000FF' }; var ShowTabs = React…

React.jsに触れてみる2

3/31追記 Chromeで実行するとエラーが発生していたため、一部コードを修正しました -> React.jsに触れてみる3 (2の修正) 別のネタをはさみましたが、前回の続きです。 やったこと Radioボタンで作成したタブをクリックした時にページの内容を表示する 上記ペ…

React.jsに触れてみる1

また唐突な路線変更ですが...。 前回までのサーバーサイド言語のJava置き換えに挑戦しているうちに、「ボタンやタブクリックで変更するHTMLは、わざわざHTMLの形で読み込む必要はないんじゃないか」という考えに至りました。 で、切り替えて表示するHTMLをJa…

Servlet + TomcatでWeb その2

はじめに 前回の後半で、 非同期でHTMLファイルを読み込んでページの一部を置き換える処理をしていましたが、結局JavaScriptから直接WebContent>contentsにあるファイルを取得することにしました。 javascript.js 〜省略〜 this.getHtml = function(intNewT…

【Ruby Gem】JasmineでJSテスト 2

今回はBackbone.Viewのテストについて(そろそろRuby Gem版だろうがスタンドアローン版だろうが関係ない内容になっていますが…)。 以前から使用しているテスト用のプロジェクトをGithubにあげてみました。 * https://github.com/masanori840816/sntTabTest や…

Chromeでのbackbone-min.js、underscore-min.jsの読み込みでエラー

ちょっと良くわからない問題にぶつかったのでメモ。 Google Chromeで以前から作成しているサイトを開くと、「backbone-min.map」と「underscore-min.map」で404エラーが発生します(XubuntuのChrome ver.40.0.2214.115、backboneはver.1.1.2、underscoreは1.8…

【Ruby Gem】JasmineでJSテスト 1

前回に引き続きJasmineと戯れてみたメモ。 思ったより苦戦したので、とりあえず現状をまとめます。 なおテスト対象のJavascriptはここ参照(コードはそろそろGithubにでも上げることにします)。 javascriptSpec.js describe("javascript.js", function() { va…

【Ruby Gem】JasmineでJSテスト 準備編

Javascriptのテストをしたい、と思い立って調べたところ、Backboneの本で紹介されていたJasmineが良さそうだったため、試してみることにしました。 やりたいこと 前回まで作成していたTabを非同期で切り替えるSinatraプロジェクトで、Jasmineを使ってテスト…

Backbone.jsを使ってみる 3

引き続きBackbone.jsについて。 今回はBackbone.ModelとBackbone.Collectionを使ってこれを置き換えてみます。 やったこと Backbone.ModelとBackbone.Collectionを使って、Ajaxで取得するHTMLファイルの名前を管理する。 HTMLファイルは、タブで切り替えるペ…

Backbone.jsを使ってみる 2

前回の補足。 Viewのイベント・メソッドを指定する部分「events:{}」で、イベントを取得するID・クラス名を指定する方法について。 viewTab.slim section#tab_frame input#arrow_button_left.button_arrow type="button" label.arrow_label for="arrow_butto…

Backbone.jsを使ってみる

前々回作成したタブの切替部分を、Backboneを使って置き換えてみました。 準備 必要なファイルを取得して、javascriptファイルと同じ、「public/js」以下に置きます。 Backbone.js Underscore.js ※その他、「json2.js」も入れている方もいるようですが、とり…