Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

やってみる 環境の作成 まず、npm initを実行しディレクトリ内でnpmプロジェクトを初期化します。対話式でプロジェクトの設定を聞かれるので指定します。今回はすべてエンターキーを押して既定の設定としました。 % npm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults. See `npm help json` for definitive documentation on these fields and exactly what they do. Use `npm install <pkg>` afterwards to install a pac
JSer.info #502 - TypeScript 4.0が正式にリリースされました。 Announcing TypeScript 4.0 | TypeScript Variadic Tuple Types、Labeled Tuple Elements、Class Propertyの型がConstructorから推論されるようになるなどの型機能の改善がされています。 また、ES2021で入る予定のLogical Operators and Assignment Expressionsがサポートされています。 その他にはcatch節のデフォルトがunknownとなるように変更され、jsxFragmentFactoryオプションのサポート、--incrementalと--noEmitの組み合わせをサポートが追加されています。 Babel、PreitterはTypeScript 4.0に対応
JSer.info #491 - Firefox 77がリリースされました。 New in Firefox 77: DevTool improvements and web platform updates - Mozilla Hacks - the Web developer blog Firefox 77.0, See All New Features, Updates and Fixes Firefox 77 サイト互換性情報 | Firefox サイト互換性情報 Firefox 77 for developers - Mozilla | MDN 開発者ツールのSource Mapロード時間の改善、デバッガーのステップ実行の改善、ネットワークパネルの改善などが行われています。 またES 2021で入る予定のString#replaceAllの実装、JPEG画像がExifデータに基づい
Denoは、単一の実行ファイルとして提供され、外部コードのフェッチに対応しているので、他のツールを使用することなく任意の動作を定義できる。 コードはWebブラウザと同様にサンドボックス内で実行され、ストレージやネットワークへのアクセスなど、悪意のある行動につながるような操作は、標準では許可されていない。 JavaScriptのコードをスタンドアロンプロセスとして動作させるための取り組みとしては、すでにNode.jsが存在するが、Node.jsは多数のユーザーを抱えていることからシステムの進化が難しく、かつ時間がかかる。また、JavaScriptの仕様変更や、TypeScriptのような派生言語の登場が、今後のNode.jsの開発を困難にする可能性がある。 さらに、Denoの開発者は、Node.jsにおける外部ライブラリとのリンクがNPMリポジトリを介して一元化される点が、Webの理想と一致
この記事はGWアドベントカレンダーの「なにか新しいことにチャレンジするカレンダー」の5/6記事です。 APIを策定し、SDKを作る側になると、どの言語に対応するかという悩みが出てきます。 SDKを作る労力は最小限にしたいので、できればどれか一つの言語で作ったらそれを他の言語に自動変換したいですよね。 自動変換できる!!とまでは行かないものの、結構惜しいところまで出来てるんじゃないかなというライブラリをまとめてみました。 ※どのライブラリも惜しい!もう一歩! というところで、完全に自動変換は難しそうでした。9割自動変換→のこり1割手動で治す みたいなやり方であればうまくいきそうです。 JavaScript -> TypeScript Javascriptの6割の人はTypeScriptも使ったことがある・・・みたいな話もありますが、旧いライブラリはまだJavaScriptですよね。移行コスト
こんにちは、フロントエンドチームエキスパートチームの穴井(@pirosikick)です。 弊社の製品である kintone は Closure Tools (Closure Library と Closure Compiler の総称) を使って開発していますが、TypeScript を使ったモダンなスタックへの移行を検討しています。 その移行の過程で Closure Tools 側のコードを TypeScript で型安全に再利用したいケースが発生し、その解決策として Clutz というツールを試しています。 今回は、この Clutz がどういったツールなのか、その使用方法と注意点などについて紹介します。 この記事は次の条件に当てはまる方には特におすすめできる内容になっています。 Closure Tools(Closure Compiler, Closure Library)を使って開発
みなさんこんにちは。 今回は Next.js + TypeScript のプロジェクトに、ESLint と Prettier を導入してみましたのでそのメモを残します。 背景 久しぶりに開発業務で Next.js v9.3.0 と TypeScript v3.8.3 を使ったプロダクトを開発機会があり、改めてイチから環境を構築しました。 TypeScript の構文チェックには TSLint がありましたが、現在は deprecated になっているため ESLint を入れます。 Prettier は v2 がリリースされましたのでv2.0.2 とします。 TSLint ライブラリ "next": "9.3.0" "eslint": "^6.8.0" "@typescript-eslint/eslint-plugin": "^2.25.0" "@typescript-eslint/par
世の中たいへんな状況ですが、 EY-Office では淡々と新しいReact教育のテキストを書いてます。 今回のテキストは現在の主流になりつつある、以下のような技術を使ったReactの入門テキストです。 React Hooks メイン (React.Componentクラスは解説程度) TypeScriptメイン Redux章には、Redux Toolkit を採用 これらの技術は、先端の技術を採用するネット企業等では既に使われている技術なので、ネット上には充分に情報があり楽勝かなと思ったのですが、案外苦労しました。 Create React App 2年前に 作りながら学ぶ React 入門 を書いた時には、まだ Create React App はありませんでした。Webpack, Babel, ESLint … をインストールし、設定ファイルを書かないと React が試せない状況で
フロントエンドエンジニアの今村です。TypeScriptではenumを使わずunion型を使いましょう、という話を書きます。 モチベーション 何を今さら、と思う方もいるかもしれません。 TypeScriptのunion型はenum的なものを表現可能であり、基本的にenumよりもunion型を使うべき、という意識を持っているTypeScriptプログラマーはすでに少なからずいるのではないかと思います。しかし、ではenumの使用はいかなる場合も避けるべきなのか、そうでないとしたらどのような基準でenumとunion型を使い分けるべきなのか、といった点について、広く合意の取れたガイドラインはなさそうです(少なくとも私は知りません)。この結果、コードレビューなどで少しやりづらさを感じることがあったので、白黒つけてしまいたいという気持ちからこのブログを書いています。 結論としては、enumは全面的に
AWS CDKにParcelを使ってJavaScript/TypeScriptをバンドルしてくれるモジュールが追加されました!使い方をご紹介します。 はじめに おはようございます、加藤です。先日リリースされたAWS CDK 1.23から、aws-lambda-nodejsというモジュールが追加されました。これを使う事で、Lambda Function用のTypeScriptのトランスコンパイルとバンドルを簡単に行う事ができるのでご紹介します。 aws-lambda-nodejs ってなに? 現在このモジュールはベータ版です。ご注意ください Node.jsでLambda Functionを作る為のHigh level Constructです。Lambda Functionに外部モジュールを参照するコードをデプロイする場合は、当然それらを一緒にデプロイするかLambda Layerにデプロイす
TypeScript v3.8.1 RC 変更点 こんにちはメルペイ社な@vvakameです。 TypeScript 3.8 RCがアナウンスされました。 What's new in TypeScript in 3.8 Breaking Changes in 3.8 TypeScript 3.8 Iteration Plan TypeScript Roadmap: July - December 2019 Roadmapはこちら。 この辺に僕が試した時のコードを投げてあります。 変更点まとめ 型のみのimport, exportのサポート Type-Only Imports and Exports import type { foo } from "./foo"; や export type { foo }; をサポートした flowtypeには前からあったやつですね ECMAScript
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 皆さんは JSON Schema 使ってますか? 現在では、Web APIのペイロード定義・検証、モックサーバー作成、ユーザー入力フォーム検証、設定ファイルのスキーマ定義・検証・IDEでのエラー表示など、多くの場面で、また多くの言語でライブラリが整備され利用されています。 JSON Schemaの強み Internet draftのフォーマットで仕様が公開されている 多くの言語での多くの実装(言語によっては複数)が存在する 1回書けば、フロントエンド、複数のバックエンドすべてで利用できる可能性が高い 代替実装が存在すると競争原理が働く
TypeScriptはMicrosoftにより2012年10月1日に発表されました。 TypeScriptはスケールするJavaScriptです。 「スケールする」とは、開発に関わる人数や、規模が増えた際にもうまく機能するということです。 TypeScriptはJavaScriptの上位互換でJavaScriptに型が追加されているものです。TypeScriptで書かれたコードは純粋なJavaScriptにコンパイルされます。 TypeScriptはJavaScriptが実行できる全てのブラウザ、コンピュータ、OSで動作し、オープンソースです。 特徴は僕によると…
const compile = require('types-assert/compiler').compile; const assert = require('types-assert/assert').assert; // tsファイルをtypes-assertのオブジェクトに変換 const type = compile('type.ts'); const obj1 = { stringProp: "hoge", numProp: 2 }; // 型が正しい場合はスルー assert(obj1, type.Interface1); const obj2 = { stringProp: "hoge", numProp: "2" }; // 型がおかしいのでError assert(obj2, type.Interface1);
同じTypeScriptという言語を利用する場合においても、トランスパイラによってTypeScript自体の機能制限がかかったり、思わぬトラブルを招く場合があります。それぞれのトランスパイラの特徴を踏まえた上で、それにより生じる問題も見ていきましょう。 1-1. tsc TypeScriptの開発元であるMicrosoft純正のTypeScriptトランスパイラです。TypeScriptを利用する際に typescript パッケージをインストールする必要がありますが、それに同梱されています。 公式ツールなだけあって最も早く最新バージョンのTypeScriptに対応したり、言語すべての機能を利用することができる一方で、バンドラではないためminifyやchunkの設定はできません。また、Path Aliasesの未解決や旧ESへの互換性が不完全であることが欠点として挙げられます。 tsco
#TypeScript #react 2019/10/05 この記事のミッションステートメント TSの型に疲れて生JSに戻ろうとしている人の足首を掴み、世の中にある生JSを一つでも減らす 対象読者 JSよりはちょっと硬いものを使いたい人 TSのd.ts定義で疲れてしまった人 TSは面倒と思っている人 非対象読者 「なんでこんなもの必要なの?」と思った人 多分それは幸せな環境です。大切にしましょう。 @ts-ignoreとは あらゆる型の不整合を握りつぶす。 // @ts-ignoreとコメント形式で書くことで、次の行の型チェックがスルーされる eslint-ignoreなどに近い 構文エラーは潰せない babelなどを通してどうしてもOptional Chainingを使おうとしたことがあるが、やっぱりこれは無理 危険なのでは? 安全でないのは間違い無い 用法用量を守って正しく使いましょう
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く