import { IsNotEmpty, MaxLength } from 'class-validator'; import { Column, PrimaryGeneratedColumn } from 'typeorm'; import { ApiProperty } from '@nestjs/swagger'; export class User { @PrimaryGeneratedColumn() @ApiProperty({ example: 1 }) id!: number; @IsNotEmpty() @MaxLength(16) @Column() @ApiProperty({ example: 'alice07' }) displayId!: string; @IsNotEmpty() @MaxLength(16) @Column() @ApiProperty({

tl; dr TypeScriptとExpressを使ってアプリケーションを開発するにあたって、以下の課題がある。 現状、 @types/express における型定義は厳密でない リクエストハンドラの中でごちゃごちゃとやってしまい、ステートフルになりがち こうした課題に対して、gcanti/hyper-ts が有効である。 1. @types/express における型定義はstrictでない 例として、Application インターフェースの render メソッドの型定義を見てみる。 render(view: string, options?: object, callback?: (err: Error, html: string) => void): void; この型定義は厳密さに欠ける。まず、第二引数のoptionsの型は objectである。（cookieメソッドのオプシ

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

2019年4月28日TypeScript,Vetur,VueVue の TypeScript 対応は v2.0 から公式に型定義がサポートされるようになったり、v2.5 で Vue.extend を使ったときに this の型が推論されるようになったりと、改善が何度も行われています。 しかし、課題はまだたくさんあり、その中でもよく聞くのが、テンプレート内の式の型チェックがされないという課題でした。TypeScript はテンプレートを解釈できないので当たり前ですが、もしそれが解決できたらより安全になるでしょうし、開発体験も向上すると思います。 そしてこの課題は Vetur の最新版で解決されました。 Vetur v0.19.0 #Vetur は Visual Studio Code の拡張機能の一つで、Vue の単一ファイルコンポーネント (.vue ファイル) のための様々な機能を提供し

TypeScript + Expressでサーバーサイド開発やってみた。主にツールやデバッグ周りの話をしました。ぜんぜんわからない、おれはふんいきでデバッグしている。

The following exposition is part of a series of articles concerning, Practical Web Development and Architecture. This article continues to focus on the theme, ‘separation of concerns’, demonstrating how the concept can be applied to a NodeJS server application development using the example ws-node-demo. The development of the front-end application ws-ngx-login-demo, a consumer of the NodeJs applic

Last week at Vue.js London I gave a brief sneak peek of what’s coming in the next major version of Vue. This post provides an in-depth overview of the plan. Why a new major version?Vue 2.0 was released exactly two years ago (how time flies!). During this period, the core has remained backwards compatible with five minor releases. We’ve accumulated a number of ideas that would bring improvements, b

MANABIYA 2018-03-24 (sat) Webセッション ３時限目の発表内容 https://manabiya.tech

Vue2.xでは仮想DOMが使われるようになりました。それに伴い、Vue用のテンプレートを仮想DOMをレンダリングするための関数に変換するという処理をコンパイル時に行ってくれる仕組みが組み込まれています。 そして、お手軽にVueを試したい人、プロダクトにVueを使いたい人、コンポーネント志向でアトミックに実装したい人など、様々な用途に応じたテンプレートの書き方(＆コンパイルの方法)を用意してくれています。 そのためテンプレートの書き方とコンパイルの種類については仕様がやや複雑で、公式ドキュメントだけでは理解が難しくけっこうハマりどころだと感じている(事実ずっぽりハマりました)ので、知見を残しておこうと思います。 ※この記事を書いている時点でのVueのバージョンは2.2.1です。 おさらい Vue.jsの利用方法3パターン 1. Vueを<script>タグで埋め込む方法 2. Vue CL

Hyperappとは Hyperapp GitHub ページ GitHub - hyperapp/hyperapp: 1 KB JavaScript library for building frontend applications. Web アプリのフロントエンド用 JavaScript ライブラリ。React, Preact, Vue といった代表的なものよりもずっと小さく、1 KB という超軽量サイズ。他のライブラリに依存することなく使えて、さらにスピードもある Elmアーキテクチャーに基づいてて、アプリケーション設計はElmやReact、Reduxと似てるけど、ボイラープレートは少ないし、TypeScriptにも対応して、とにかくシンプル。 2018 年は Hyperapp の年だ - Qiita 実装サンプル hyperapp/hello-world.md at master

Angular on Electron 初めまして､私が@jialipassionです､初めてQiitaで投稿して､宜しくお願いします｡ 今までhttps://github.com/angular/zone.js でいろいろContributeしていますが､今日はElectronでAngularの開発でいくつヒントを共用します｡ Angular on Electron Electron Native API (NgZoneを利用する) 新しいzone-patch-electronの使い方(自動Patch) Angular on Electron ElectronでAngularの開発は普通のElectronの開発とあまり差がありません｡ https://github.com/maximegris/angular-electron をベースに直接やってもいいですが､自分で@angular/c

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? タイトルは「ビートルズがやって来るヤァ!ヤァ!ヤァ!」のパロディです。 @angular/elementsとは何か？ @angular/elementsは、AngularコンポーネントをWeb Componentsにするためのパッケージです。9/29にPullRequestが起こされ10/28にLGTMが出てlabsブランチに移されました。まだexperimental=実験ステータスのできたてほやほや新機能です。 これは言い訳なんですが、@angular/elementsの方向性もまだ流動的ですし、筆者もまだ全然知識が追いついてません。

私は数年前からReactについて意識しており、実際にReactに関する書物などを購入してHello Worldの実装も行なったことがあるのですが、どうもReactは癖が強い気がしていまして（JSXなど）今までテンプレートエンジンを利用してウェブサイトを作成していた自分には、Reactの素晴らしさがまだ実感できていません。 私がこれらデータバインディング系（またはWebコンポーネント化系？）モジュールに初めて触れたのはKnockout.jsが切っ掛けになるのですが、Knockout.jsを利用することで複雑なDOM操作から解放されたときは本当に感動しました。 しかし、それらのモジュールを使いこなしていく過程でより複雑なことをしようとすると、どう実装すれば良いかわからないことがあり、ドキュメントを何度も読み返して悪戦苦闘することがありました。（Knockout.jsならではの苦闘かもしれません

はじめに Railsにも対応しているJavaScriptのサーバサイドレンダリング用ライブラリairbnb/hypernovaが、airbnbからリリースされました。 この記事では、シンプルなRailsアプリを構築し、これまたシンプルなReactコンポーネントをサーバサイドレンダリングで表示するまでのチュートリアルを解説します。 ReactによるSPA（シングルページアプリケーション）も増え、Google等の検索エンジンでもある程度はページ内容を解釈してくれるらしいですが、サーバ側でHTMLをレンダリングして出力するサーバサイドレンダリングを利用すると、より正しくページ内容を解釈してもらえます。 Hypernovaとは A service for server-side rendering your JavaScript views Hypernovaは、JavaScriptコンポーネント

対象 Rails だけどSPAっぽく画面遷移したい SEO担保しないといけない 新規設計の参考 jQuery まみれの状態からこれと同等のことをするのは、不可能じゃないけど難しいです。 単にどう導入するか知りたいだけなら https://github.com/mizchi-sandbox/packnova/commit/447a91ea3a706c0bb0aac8570d1fbbaf6c9710f1 のコミットで 目指したモノ 最小限の設定で Rails エンジニアでもメンテ出来るSSR/SPAアプリの土台。 ただし土台をハックし始めるとその限りではない。。 スタック webpacker でコンパイル 画面遷移は hypernova-react/turbolinks で自動再マウント ルーティングはRails側に寄せてます。なので react-router は入ってないです。 入れる選択肢

ウォンテッドリーの「ココロオドル」モバイル開発 / Wantedly's "kokoro odoru" mobile development

Deciding on a JavaScript framework for your web application can be overwhelming. Angular and React are very popular these days, and there is an upstart which has been getting a lot of traction lately: VueJS. What’s more, these are just a few of the new kids on the block. Javascripts in 2017 — things aren’t easy these days!So, how are we supposed to decide? A pros-and-cons list never hurts. We’ll d