tag: JavaScript  1/1

Angular2でパスワード再入力みたいなバリデーションを作る(改)

Angular2/4の標準のバリデータには、複数のフォームを比較するみたいなものは用意されてないっぽいので、それの作り方。イケてないバージョンを経て、ng2-validation のソース見て作成。というかもう ng2-validation の equalTo 再実装して解説に近いけど以下解説。まず最初にサンプルソースの抜粋から。こんな感じ。equals-validator.directive.tsimport { Directive, Input, forwardRef, Attribute } from '@angular/core';impor...

[旧版]Angular2でパスワード再入力みたいなバリデーションを作る

Angular2/4の標準のバリデータには、複数のフォームを比較するみたいなものは用意されてないっぽいので、それの作り方。参考にしたのはこちらのページ。でもところどころ改良したので、以下説明。※ よりイケてる実装発見したのでそちらをご覧ください。この記事は参考用&自省用に残します。まず最初にサンプルソースの抜粋から。こんな感じになる。equals-validator.directive.tsimport { Directive, forwardRef, Attribute } ...

TypeScriptでEventEmitterイベントの型を指定する方法

最近人のソースを見てようやく知ったのだが、JavaScriptでよく見かけるイベント( on('close', ~) とか)は EventEmitter なるものを継承して実装するものだそうで、、、自前でやってたわ(汗で、早速TypeScriptでも使おうとしたものの、イベント引数の型の指定の方法に難儀したので、その方法を書いておく。まず大前提として、TypeScriptには「Overload on constants」なる、第1引数の値に応じて第2引数以降の型を定義する機能が...

Promiseのオブジェクトを判定する方法

TypeScriptでちょっとしたライブラリを作ってたのだけど、いざそれをJavaScriptのアプリに組み込んで使ったところ、Promiseがうまく判定できずトラぶったのでメモ。今回やりたかった事はこんな感じの、Promiseだったらそのまま、PromiseじゃなかったらPromise.resolve()でラップして返すみたいな、callback的な処理で戻り値の型を統一するような奴。(実際のコードはcatchを付けてたりともっと複雑。このサンプルだと端折り過ぎで...

Zone.jsをNode.js版ThreadLocalとして使う

Node.js でアプリ作ってて、リクエスト情報(セッションIDとかIPアドレスとか)をログとかで出したいけど、そのためにモデル層にリクエストを引き渡したくない、という事で方法を調べたところ、Zone.js というものが使えそうという事が分かったのでその話。こういう仕組みを作る場合、グローバル変数的なものがあればそこに置いておけばいいんだけど、JavaScriptは非同期処理なので普通のグローバル変数では駄目で、リクエストごと...

SequelizeをTypeScriptで動かす

JavaScript で一番メジャーらしいORMの Sequelize を TypeScript でも動かしてみたので、その手順とかあれこれ。なお、Qiitaにも2015年の解説記事があり、自分も参考にさせて頂いたのだけど、バージョンが上がって?微妙に定義が変わったりしてて(TPojo→TAttributesとかSequelize.Instanceの型が違うとか)混乱したので、2016年末時点の情報ということで一通り書いとく。実際に使ってるソースは前回に続きこれ。せっかちな人はGit...

TypeScriptの個人的tips

年末年始の貴重な休みを使い、何を思ったかTypeScriptでWebアプリを作っていて、とりあえず完成はしてないけど一段落したので、そこで得たtipsをまとめておく。なお、tipsの使用例を見たい場合は↑のGitHubのソースを参照してください。以下目次。今回はそんな大した話はない。型も使えるJavaScriptとしてゆるく使う引数/戻り値の型はきっちり書く型定義ファイルは@typesで参照する型に困ったらanyにキャストmodule.exports ≠ expor...

AngularJS1のお勉強アプリをAngular2に移行した感想

つい最近AngularJS1に触れたばかりにも関わらずこれからはAngular2の時代らしいということで(--;お勉強と実用を兼ねてAngularJS1で作ったミニアプリがあったので、物は試しとAngular2に移行してみた。移行したのはこれ。ページ遷移もない、ただ日時を違うタイムゾーンに変換するだけ…というググればいくつも出てくるアプリ。localtime-converter最新ソースはAngular2版。AngularJS1当時のものはこっち。ソースが1→2でどういう風に...

JavaScript標準のDateクラスで任意のタイムゾーンの日時を生成する

JavaScriptのDateクラスは何かと評判が悪い。タイムゾーンを持っているくせにデフォルト以外を使う方法がないというのもその一つで、場合によっては無理やり時刻を+05:00とかしてお茶を濁したりというバッドノウハウ的なことをしていたりする。今回もそういうソースに当たったのだけど、設定ファイルに+5とか書いてたせいでサマータイム終了に追従してなくてずれたりしたので、せめてバッドな中でもタイムゾーンの時差ぐらい取れな...

AngularJS1で日付を複数選択可能なDatePicker

AngularJS1でカレンダーから日付を選ばせるHTML5の <input type="date"> 的な奴で複数選択したかったのだが、探したら意外と苦労したのでメモ。ググるとjQueryとかbootstrapとか組み合わせるのもいろいろ出てきたのだが、最終的にすんなり動いて使いやすかったのは↓だった。 MultipleDatePickerMultipleDatePickerは、AngularJS1用のモジュールで、CSSフレームワークとかに紐づかない、ほぼそれ単品で動作するモジュール。(...

swagger-jsdocでAPIドキュメントを書こう

Node.jsでAPIを作るにあたって、APIのドキュメントを書く良い方法がないかと探してた結果、Swagger という奴がいいらしいと聞いて試してみたら思った以上に良さげだったのでその使い方とかまとめ。まず Swagger について解説。調べたり使ってみた感じから、特徴やらを列挙してみる。APIドキュメントはいろんなツールがあるが、その中では割と知名度が高いらしい。YAMLとかJSONとかソースコメントとかいろんな書き方ができる。各言...

ここ2ヶ月で知ったJavaScript界隈の用語とか

JavaScriptを本格的に使いだして2ヶ月、言語やフレームワークだけでなく、いろんな技術やら用語やら概念やらを学びまくったので、これからJavaScript学ぼうという人に役立つように、ちょっとリストアップしてみる。なお、HTMLやCSS、またWebの一般的な用語についてはJavaScriptに関係が深いものを除き載せていない。あくまでJavaScript開発メインなので注意(他の言語経験者想定)。ここ2ヶ月で知ったと言いつつ、昔っから知ってた...

mochaでES2015のimport/exportがあるソースをテストする方法

Babel でコンパイルしてるES2015準拠で書いたクライアント側のJavaScriptソース、テストは mocha を Node.js v6系で動かすので普通に動くだろうと思ったら、 import/export だけ認識されなくてこけたのであれこれ調べて対処した話。結論から言うと、結局よくわからず↓のシェルスクリプト書いて動かした。rm -rf ./tmp && mkdir ./tmp && cp -r ./test ./tmp/test && (find ./test -name "*.js" | awk '{print "browserify " $1 " -...

Node.js+Express+Sequelize+AngularJS1で開発してみた感想

ここ何年かJava+PHPなサーバーエンジニアとして働いてきた感じですが、7月から新しい会社でNode.jsを使うこととなり、んで機種転換のために1ヶ月半近く表題の環境で好き勝手に研修課題作らせてもらったので、使ってみた感想とか書いてみる。なお、自分は研修前はJavaScriptはWebアプリのおまけでちょっとした小道具に使うぐらい(ボタンON/OFFしたり)なスキルレベル。でも今は一端なJSerの仲間入りをできたはず…?※ 実業務の感想...

Sequelizeの個人的tips

Node.js の研修で、なんかORMつかうべと見つけた Sequelize を使ってみたものの、結構ハマりポイントがあったので、tipsとしてまとめてみる。なお、予め断っておくが、2016年現在Node.js用のORMはほぼ選択肢がなく Sequelize 一択の模様。なのでハマるなら他のにしようという選択肢は、SQLべた書きぐらいしかない。残念!以下目次。後述するように、この機能あるから使おうねーここにあるよーみたいな話が多め。公式ドキュメントに...

Unity WebGLでWebページの情報を取る方法

ここ一月ほどNode.jsの研修でちょいとWebアプリ作ってて、でその際UnityのWebGLでゲーム作って組み込んだので、そこでハマったネタなどを。WebGLのアプリを作ること自体は、単にUnityのインストール時にカスタムでWebGL用のあれこれ入れて、ビルド時に対象をWebGLにすればOKだった。が、WebGLで動かすということは、それだけじゃなくて当然Webアプリなりと連動したくなる。なのだが、UnityのメインはWebGLじゃないので、普通のWeb...

Node.js開発用のVagrant環境構築(Ansible版)

先日の奴のAnsible版。といっても機能的には本当にシェルスクリプトをAnsibleに置き換えただけなので差分なし。でも繰り返し実行しても問題ないし、今後の拡張とかもやりやすくなったかも?Vagrantfile# -*- mode: ruby -*-# vi: set ft=ruby :Vagrant.configure(2) do |config| config.vm.box = "centos/7" # ホストPCとゲストPCのネットワークを構築 config.vm.network "private_network", ip: "172.16.10.10" # ホストPCの...

Node.js開発用のVagrant環境構築

お仕事代わって Node.js 使うことになってせっかくなので Vagrant で開発環境作ったのでメモ。→ 2016/7/12 Ansible版公開。ホストOSは普通に Windows10 想定。ゲストOSが CentOS7 で、Node.js と MariaDB のインストールまで一発な Vagrantfile はこんな感じ。# -*- mode: ruby -*-# vi: set ft=ruby :Vagrant.configure(2) do |config| config.vm.box = "centos/7" # ホストPCとゲストPCのネットワークを構築 config.vm.networ...

href="javascript:window.open(~)"とURLエンコードで文字化け

タイトルどおり。ハマったのでメモ。たぶん window.open() に限った話じゃないと思うけど、今回それだったのでそれを例に。IE8とFirefox3.5で確認。javascriptでリンクを書くときに<a href="javascript:window.open('http://example.com/%e3%83%86%e3%82%b9%e3%83%88')">文字化け例</a>とかみたいに書けるわけだが、↑のようにここにURLエンコードした文字をいれたところ、受け取り先で文字化けするという現象が発生。...