https://nseg.connpass.com/event/251366/ での発表資料です。
JSのウェブフレームワークで高速なルーターを実装する方法
https://nseg.connpass.com/event/251366/ での発表資料です。
Next.js で始める GraphQL - 30歳からのプログラミング
この記事では、GraphQL を利用したアプリを Next.js で構築していきながら、GraphQL の初歩について書いていく。 GraphQL のクライアントもサーバも、Apollo を用いる。 また、できるだけ型安全に開発したいので、graphql-codegenで型定義ファイルを生成する方法も扱う。 利用しているライブラリのバージョンは以下の通り。 @apollo/client@3.5.10 @graphql-codegen/cli@2.6.2 @graphql-codegen/typed-document-node@2.2.7 @graphql-codegen/typescript-operations@2.3.4 @graphql-codegen/typescript-resolvers@2.5.4 @graphql-codegen/typescript@2.4.7 @type
JavaScript(TypeScript)で メディアサイトを インフラから構築する方法 / jsconf-jp-2021
JavaScript(TypeScript)で メディアサイトを インフラから構築する方法 / jsconf-jp-2021
HTMLコーディングでもReact+TypeScriptの開発体験を得る
前置き HTMLを納品する形式の仕事の際にEJSやpugではなくReact+TypeScriptを使ってHTMLを生成しつつ開発体験を高めてほしい。 ということで具体的にどのようなメリットがあるのかを伝えたくてまとめてみました。 開発環境 1から環境を作るのは大変なので今回はクラクさんのministaを拡張していきます。 ministaの紹介記事はこちら 必要な設定はTypeScript, ESLint, Prettier, Babel, エディター(今回はVSCode)になります。 webpack.config.js const path = require('path') const glob = require('glob') const HtmlWebpackPlugin = require('html-webpack-plugin') const webpackConfig =
Zodで真のTypeScript firstを手にする
fullstack TSなアプリケーションも増えてきた昨今、TSでvalidatorを実装する際に何を採用するかは一大トピックです。今回は、その中でも新しめなライブラリでありBlitzも採用しているZodについて見ていきます。 Zodとは Zodの特徴として、Schema firstなvalidationライブラリであるというのがあります。 validateするschema（単一のschemaからobject, arrayまで）を定義し、それをベースにparseするというものです。 公式にあるexampleを見てみましょう。 import { z } from "zod"; // creating a schema for strings const mySchema = z.string(); mySchema.parse("tuna"); // => "tuna" mySchema.p
Vue Composition APIをチームで導入して得られたメリット - ANDPAD Tech Blog
前書き はじめまして、ANDPADでフロントエンド開発を担当している小泉です。入社から2年弱ですが、ここ1年の社員数の増えるペースが速すぎてすっかり古株になりつつあります。 自分は入社当初からVue.js・Nuxt.jsを使って開発を行っているのですが、2020年7月頃よりスタートしたプロジェクトで、Vueの新しい記法であるVue Composition APIを全面的に採用しています。 この記事では、Composition APIを実際に製品開発に導入するまでの流れから、9ヶ月ほど使っていく中で気づいたComposition APIのメリットとデメリットなどをまとめています。 昨年秋にVue 3.0が正式リリースされ、今年はNuxt 3.0も控えており、これからVue 3.0やComposition APIを本格導入するチームや会社も多いと思いますので、その際の参考になれば幸いです。 技
TypeScriptの表現力で自由なJavaScriptに立ち向かう 〜 Immutable.js 編 〜 | Wantedly Engineer Blog
WantedlyのDX (Developer Experience) Squadでエンジニアをしている原 将己 (qnighy) です。 Immutable.jsというライブラリを使っているJavaScriptコードをTypeScript化するにあたって、既存の型定義では不十分だった箇所を独自に修正しました。このときしたことがTypeScriptの知見として面白いと思ったので紹介します。 Immutable.js とはImmutable.js はFacebookが開発している永続データ構造 (純粋関数型データ構造、不変データ構造) のJavaScript実装です。配列 (List), Map, Set などが実装されていますが、データ構造に対する変更操作は全て「新しい状態を返す関数」の形で提供されています。 import { List } from "immutable"; const u
Vuex ストアに TypeScript の型を付ける（2020年12月版） - STORES Product Blog
業務委託で STORES の開発をしている @inouetakuya です。 下記の記事（2020/09/14）にあるように、STORES では TypeScript の導入を進めています。 プロダクトに途中から TypeScript を導入した話 - STORES Tech Blog 現状、新規に記述するコードについては TypeScript で書いていっているのですが、既存のコードではまだ JavaScript のままになっているものも残っています。 今回の記事ではそれらの既存のコードのうち、Vuex ストアに関するコードをどのように TypeScript で書き換えていったかをお伝えしたいと思います。 環境 対象とした環境は下記のとおりです。 TypeScript v3.9.7 NuxtJS v2.14.5 Vue.js v2.6.12 Vuex v3.5.1 Vuex Type H
Node.js Dual Packages (CommonJS/ES Modules) に対応した npm パッケージの開発 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。フロントエンドエキスパートの平野（@shisama_）です。 フロントエンドエキスパートチームでは業務時間の 30 % の時間で技術探究を行っています。 今回は探究した技術の中から Node.js の ES Modules（以下 ESM）についてと Dual Package (CommonJS/ES Modules) に対応した npm パッケージの開発について紹介します。 ES Modules の特徴 ESM はブラウザ互換 ESM は Strict モード ESM は非同期 ESM は静的解析可能 Node.js の ESM 対応について Dual Package（CJS/ESM）に対応した npm パッケージの開発 Conditional Exports によるファイルの指定 .mjs と .cjs require など CJS 特有の機能を使う ESMから CJS ファ
ts-expect-error を付与しながら .js を .ts に一括で書き換える
やりたいこと 巨大なコードベースに対して、 .js をとりあえず .ts に書き換えてしまいたい。 だが、素朴な拡張子の書き換えで型違反が出ると jest やその他ツールが止まりはじめて面倒。 なので、エラー行には // @ts-expect-error を自動で付与しながら書き換えたい。@ts-ignore ではなく、@ts-expect-error なのは、型エラーを修正した際に、それが伝搬するようにするため。 方法 ファイルの拡張子を .js から .ts に書き換える typescript service 経由で型を検査し、エラー行を集める エラーが出た行に // @ts-expect-error を付与する コード 書き捨てなので汚いです import * as ts from "typescript"; import { uniq } from "lodash"; import
Webpackを一歩一歩確実に理解してReact + TypeScript環境を作る - おじんブログ
動機 毎回 npx create-react-app で React アプリを生成していて Webpack の勉強から逃げていたが、いい加減向き合いたいと思ったため。 昔 Webpack に入門しようとしたら難しいという先入観を抱いたので、できるだけシンプルに、一歩一歩づつ入門する。 最終的に、React + TypeScript の環境を作れるようにする。 リポジトリ 各ステップごとにコミットしているので逐次さかのぼってください。 github.com 前提 最低限の yarn または npm コマンドの使い方がわかること。 npx create-react-app で React プロジェクトを作成した事があること。 ※VSCode 使用を前提としています。 Config なしで実行する 最低限の構成で Webpack が何をするのか理解する。 準備 # run at project
Nuxt.js + TypescriptでVuex内をタイプセーフにする - Qiita
type State = { hoge: string; fuga: number; }; type ChangeHogePayload = { value: string }; type ChangeFugaPayload = { value: number }; export const state: () => State = (): State => ({ hoge: '', fuga: 0, }); type Mutations = { changeHoge: (state: State, payload: ChangeHogePayload) => void, changeFuga: (state: State, payload: ChangeFugaPayload) => void, incrementFuga: (state: State) => void, }; expo
TypeScript入門以前ガイド - mizchi's blog
某社で自分が React/Redux + TypeScript などの講習をやってみた結果、TypeScript 入門用資料が必要だと思って書いたやつです。 このドキュメントのターゲット TypeScript で書かれたプロジェクトに参加する人 TypeScript を導入するために、その事前知識が必要な人 このドキュメントの読み方 ES2015 for Beginners ES2015 for ES5 Programmers ES Modules 非同期表現: Promise と async/await TypeScript エコシステム編 自分が React/Redux などの講習でいろいろやってみた結果、 ES2015 と TypeScript を同時に教えると、初学者は何がどの概念に由来するかの区別が出来ずに混乱します。なので、ES5 -> ES2015, ES2015 -> Ty
斜めに写った画像をCanvasで矩形に補正する - すぎゃーんメモ
将棋駒画像分類の話の続きのような、あんまり関係もないような。 memo.sugyan.com memo.sugyan.com 結局、素材を組み合わせて自動で生成しただけの駒画像ではやはりデータが足りていないようで、「やはりもっと様々な画像から人力でラベル付けしてデータセットを作っていく必要がありそう」ということになった。 とはいえ、インターネットから画像を拾ってこようと思うと、例えば以下のような感じで (引用元: フリー写真素材ぱくたそ) 多少ならともかく 斜めの角度から写っているものは、そのまま矩形に切り出して学習用画像データに利用するのは難しそう。 これらはうまいこと変形して使いたい。 いわゆるperspective projectionの逆変換のような操作が必要になる。 JavaScriptを使ったCanvas APIでの変換では簡単な拡大・縮小などの変換は可能だけど こういったpe
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptのCollection操作をする時はお願いがある、一呼吸置いてから操作をしてくれ
<btn open />
Nondestructive_TypeScript.md