はてなブックマーク

この記事執筆のちょうど10日前、10月9日に自作のフレームワーク解説記事を投稿したところ、翌日の昼くらいから凄まじい勢いでシェアされました TypeScript製として世界最速を実現したフルスタックフレームワーク「frourio」をQiitaで紹介しました 1日ちょっとで6,000View、130LGTMを獲得し、GitHubスターは30以上も増加🎉🎉🎉 ありがとうございます！https://t.co/LMXUCZhmmn — Solufa (@m_mitsuhide) October 10, 2020 バズるためにやったことはほとんどなくて、普段誰も反応しないTwitterに1回投稿しておいただけでした 金曜の夕方くらいに投稿してやはり反応がなかったので今回も空振りか～と思っていたら土曜の昼から急にLGTMがたくさんついてTwitterでもシェアされるようになったのです この記事で

今年6月のTypeScript Meetup #4で初公開されたTypeScript製フレームワーク「frourio (フルーリオ)」が今月のアップデートでめちゃくちゃカッコいい感じに仕上がっているので紹介します frourioはフロントからバックエンド・ORマッパーまでのアプリ全体を一つのTypeScriptとして統合型チェックが可能になるフレームワークです 1つのディレクトリで完結するので一見するとモノリシックのようですが、型で繋がっていること以外はフロントとバックが個別のプロジェクト扱い（それぞれに別のpackage.jsonがある）なのでフロントはVercel、バックエンドはDockerでAWSにデプロイするみたいなことが可能です 新しいfrourioの特徴 TypeScript製で最速のフレームワーク コマンド1発でフロントSPA + RESTサーバー + ORマッパーの環境構築

一般的にTypeScriptでDIをしようとするとクラス+デコレータを避けて通れません しかし個人的には関数型っぽくコーディングするのが好きなのでクラスもデコレータも使わず関数だけでDIする方法を考えました たった15行なので解説の前にコードを紹介します type Deps<T extends Record<string, any>> = { [P in keyof T]: T[P] extends { _velona: boolean } ? (...args: Parameters<T[P]>) => ReturnType<T[P]> : T[P] } export const depend = <T extends Record<string, any>, U extends any[], V>( dependencies: T, cb: (deps: Deps<T>, ...arg

ディレクトリ内全てのファイル一覧を取得するというありふれた処理ですがたまたまワンライナーを思いついたのでメモ代わりに紹介します 同期メソッドなので使いどころには注意してください const fs = require('fs') const listFiles = (dir) => fs.readdirSync(dir, { withFileTypes: true }).flatMap(dirent => dirent.isFile() ? [`${dir}/${dirent.name}`] : listFiles(`${dir}/${dirent.name}`) ) console.log(listFiles('hoge/fuga')) fs.readdirに withFileTypes: true オプションが追加されてたんですね、最近知りました https://nodejs.org/a

この記事の内容はfrourio v0.12以前のものであり、最新のfrourio v0.13以降の情報は以下リンクを参照してください frourio でフロントエンドとバックエンドを一緒に静的型検査する フロントとサーバーの疎通をTypeScriptで静的に検査したい フロント（React/Vue/Angular）とサーバー（Express/Nest）を両方TypeScriptで開発しているプロジェクトの情報を少しずつ見かけるようになりました しかしながら、フロントのTSとサーバーのTSは緩く型で繋ぐ程度で両者のAPI疎通まで静的に型検査することは難しいです せっかく両方TSで作っても、ブラウザを動かすとかテスト回すとかで動的に疎通チェックをしているのではないでしょうか フロント開発で特に厄介なのが、HTTPリクエストで使うaxios/ky/fetchです エンドポイントを文字列で指定する

Node.jsの作者であるRyan Dahlが新たに開発した「Deno(ディーノ)」のv1.0がリリースされました 初めて触ってみたので過程を記事で共有します Denoの特徴は 設定なしですぐ動くTypeScriptとJavaScriptの実行環境 package.jsonの代わりにTSファイルのURLがエントリーポイント 標準モジュールが豊富でインストールとキャッシュ管理も自動 ファイルやネットワークへのアクセスがデフォルトでは禁止されていてセキュア コードフォーマッタやテストライブラリも標準装備 Deno公式サイト 最初のコミットはちょうど2年前 インストールの前に、ふと思い立って3,400以上もあるコミットの始まりを探してみました Ryan Dahlによる最初のコミットは2018/05/14（多分NY時間だと13日）でした ピッタリ2年目ということで2020/05/14（NYでは13

気付いた頃には全部埋まってた本命のTypeScriptアドベントカレンダーの初日が投稿されないようなので代わりに投稿させてもらうことにしました！ エンドポイントに文字列を使い続ける限りHTTPリクエストは型安全に出来ない axios, ky, fetch, request, superagent... どれを使っても「エンドポイントの指定が文字列」なせいで型安全にならない・・・ という課題にTypeScriptユーザーなら誰もが共感してくれるのではないかなーと思ってます (TypeScript 4.1 の template string types である程度は改善しそうです) 例えば、axiosで以下のようなリクエストをするとして、 const userId = 1 const res = await axios.get<History>(`/user/${userId}/histori

エンドポイントに文字列を使い続ける限りHTTPリクエストは型安全に出来ない axios, ky, fetch, request, superagent... どれを使っても「エンドポイントの指定が文字列」なせいで型安全にならない・・・ という課題にTypeScriptユーザーなら誰もが共感してくれるのではないかなーと思ってます 例えば、axiosで以下のようなリクエストをするとして、 const userId = 1 const res = await axios.get<History>(`/user/${userId}/histories`) console.log(res.data) VSCodeでres.dataの返り値の型を見ると Historyなんだなあということがわかります 型が表示されてるので一見問題なさそうですが、 ＿人人人人人人人人人＿ ＞　突然の仕様変更　＜ ￣Y^Y

axios-mock-serverとは フロントエンドの開発体験を向上させ、生産性を格段に高めるために作られたTypeScript製のモックサーバーです。 axios専用ではあるものの、JSON Serverよりも遥かに手軽にRESTfulなモック環境を構築出来ます。 GET/POST/PUT/DELETEのAPIエンドポイントを数行で作成できる サーバーを立てないので静的なJSファイルに出力してブラウザ単体でも動かせる TypeScript対応 Node環境のaxiosでも動く Nuxt.js同様のオートルーティング機能でパス記述が不要 IE11対応(>= v0.13.1) axios-mock-server - GitHub この記事はやたら長いので以下の入門記事から読むのをおススメします。 秒でaxiosをモックするnpmモジュールの入門サンプル Nuxt.jsのaxiosを秒でモッ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 2019年の2月まで表参道のプログラミングスクールでVue.js(+Nuxt.js)を教えていました。 とある生徒に「Vue.jsとVuexの関連がわからないので図解して欲しい」と頼まれてホワイトボードにサクッと書いて説明してみたらわかりやすいと大好評。 しかもその生徒が私のラフ図をキレイな動画に作り直してくれたのでカットごとの紹介記事を書くことにしました。 この記事でわかること state/mutations/commit/actions/dispatchの違いがわかるようになります。 getterやsubscribeについては扱いま

WebGL Advent Calendar 2014の12日目が空きっぱなしだったので書いてみました。 JavaScriptを1行も書かずに出来るWebGLの新しい面白さを紹介します。 #「JavaScriptそのものが苦手」な人のためのWebGL入門記事です 恐ろしいほどに長い初期化、意味不明なGLSL、名前も聞きたくない行列&ベクトル・・・ WebGLはブラウザで3DCGが出来るという魅力で多くの人を惹きつけましたが同時に多くの挫折を生み出してきました。 難しすぎるのです。 「three.js使えば簡単じゃん。」 確かにWebGLを自力で書くよりは50倍くらい楽です。 しかしそれは重要な事実が考慮されていません。 それは「そもそもJavaScript自体が難しい」ということ。 遅い・重いと批判されるjQueryがそれでも圧倒的な人気を誇っているのはJavaScript自体の難しさを解決