JavaScriptとTypeScriptを共存させ、段階的に移行する方法
某サービスのフロントエンド開発に携わるようになってからずっと考えていることがある。 TypeScriptに移行して、型に守られたい！ ただ稼働しているサービスをいっきにTypeScriptに移行するのは危険で膨大な工数がかかるため、段階的に移行できないかと考えた。 ということでJavaScriptとTypeScriptを共存させる方法をまとめる。 環境は以下のとおり。 webpack@4.0.1 webpack-cli@2.0.9 webpack v3系の場合は不要 typescript@2.7.2 ts-loader@4.0.0 ※ あとでbabel-loaderについて追記予定です！ → 2018/03/23 追記しました 移行前の状態 極小サンプルを使って紹介する。 // src/main.js import { add } from './module' const result
既存ReactプロジェクトにTypeScriptを導入した話 - asoview! Tech Blog
アソビュー Advent Calendar 2019の2日目。 フロントエンドエンジニアの指田です。 今回はアソビューの既存ReactプロジェクトにTypeScriptを導入した内容についてお話します。 はじめに Babelでコンパイルしている既存ReactプロジェクトにTypeScriptを導入した話です。 本記事ではTypeScript等の説明は致しません。 導入 既存のビルド構成は変更しない。（@babel/preset-typescriptを利用。ts-loaderは使用しない） 導入直後はコード変更もしない。 完全にTypeScriptにするまでJavaScriptとTypeScriptは混在する。 インストール JavaScript Standard Styleを利用しているため、Typescriptのconfigも追加してます。 # TypeScript yarn add -
Express.jsでasync/awiatをいい感じに使う - ishikawa_pro's memorandum
はじめに お久しぶりです。 最近は業務でTypeScriptを書き始めたりしてました。 今日は、会社のテックブログに載せるつもりで書いてみたけど、内容的に会社のブログで載せるほどの内容にならず、ボツにした記事をここで供養しようと思いますw ちなみに、会社のテックブログに書いた内容はこちら 👇 https://cam-inc.co.jp/p/techblog/407753782164718758 Express.jsのTIPS紹介 ということで今日は、Express.jsのtipsを１つ紹介します。 Express.jsとは まず簡単にExpress.jsの説明です。 Express.jsは、Node.js製の薄いWebアプリケーションフレームワークです。 https://expressjs.com/ja/ とりあえず、これだけ書けばサーバーを動かすことができます。 const expre
npm-scripts を書く時の手癖 - mizdra's blog
かれこれ 5 年くらい趣味開発で npm-scripts を書き続けている。長年書き続けているとノウハウが蓄積されてきて、「こう書くとスッキリする」「迷いがなくなる」「後から拡張したくなった時に、簡単に拡張できる」みたいな書き方が身についてきた。自分の型、あるいは手癖のようなものだと思う。 せっかくなので、id:mizdra の今の npm-scripts を書く時の手癖を書き連ねてみる。 基本形 { "scripts": { "build": "webpack --mode production", "dev": "webpack-dev-server --mode development", "lint": "eslint .", "test": "jest" } } 一番シンプルな npm-scripts を書く時のパターン。以下の 4 つの script を登録している。 buil
JavaScript初心者が失敗しがち/間違えがちなこと8選 - Workship MAGAZINE(ワークシップマガジン)
フロントエンドを構築するにあたって必須となるプログラミング言語、JavaScript。 専業プログラマ以外も扱うことが多く、ブラウザさえあれば動作を確認できるという点で比較的とっつきやすいプログラミング言語といえます。しかしJavaScriptの言語仕様は、多くの初心者を混乱させる落とし穴も多く潜んでいるのです。 今回はJavaScript初心者が失敗しがち/間違えがちなことを8つピックアップしてみました。 1. 型の違いで想定外の挙動になってしまう JavaScriptは「動的型付き言語」と呼ばれる、実行時の値によってデータ型が決まる言語のひとつです。動的型付き言語では、プログラマはコード中に型を書く必要がないので、初心者には「型」という用語自体がピンと来ない人もいるかもしれませんね。 JavaScriptのデータ型には「真偽値」「数値」「文字列」「シンボル」「undefined」「nu
async-lockを使った排他制御
async-lockを使ってサーバサイドで排他制御させる方法です。排他制御を使えば同時アクセスよるデータの不整合を防げます。本記事で扱うモジュールのバージョンは次のとおりです。 Node.js - 14.16.0 express - 4.17.1 async-lock - 1.3.0 インストール 次のコマンドを実行します。 npm install async-lock 以降は使い方になります。 execute function を使う場合 コールバック関数を抜けてからロックが解放されます。execute functionでのエラーをコールバック関数で判定する必要があります。 実行結果 node async-lock-sample-execute.jsを実行し、ブラウザから/start-lock > /start-lock2の順に実行した場合の実行結果(ログ)です。 16206946945
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
MochaとChaiでなんでもテスト ～WebAPI編～ | キリウ君が読まないノート