Tag Javascript

[ESLint] eslint-plugin-importを利用して自動でimportをアルファベット順にソートする

以前までTypeScriptの開発ではTSLintを使っていましたが、TSLintの開発が縮小されていくということもあり、最近はESLintを利用しています。 TSLintにはimportがアルファベット順に並んでいないと警告を出してくれるorderd-importsというルールがあります。autofixもサポートされており、VSCodeのTSLint拡張を使うと保存時に自動でアルファベット順にソートしてくれていました。 ただ、ESLintに移行するとこれに代替する機能が標準ではありませんでした。

TypeScript 3.7から利用できるOptional Chainingについて

半年ほと前にTypeScript 3.7がリリースされ、Optional Chainingが利用できるようになりました。 ここ最近で仕事でもよく利用しており、とても便利なので紹介したいと思います。nullチェック、undefinedチェック TypeScriptのコードを書いていると、nullチェック、undefinedチェックをするコードはたびたび頻出します。 例えば以下のようなFooという型があったとします。 以下のFooという型はオプショナルなbarというプロパティがあり、barの中にはオプショナルなbazというプロパティがあるとします。

NODE_ENV=productionにしてyarn install(npm install)するとdevDependenciesがインストールされない

この仕様を忘れていて、幾度となく時間を浪費してきたので備忘録としてブログにしておきます。 NODE_ENV=productionにしてyarn install(npm install)するとdevDependenciesがインストールされません。 NDDE_ENVを利用してAPIのリクエスト先を変えたり、DBのアクセス先を変えたりすることは多いと思います。 例えば、NODE_ENV=testの時はtest環境のAPIにアクセスし、NODE_ENV=productionの時はproductionのAPIにアクセスするというような設定です。

GitHub Integrationを利用して、Next.jsアプリケーションをZeit Nowにデプロイしてみる

Zeit Nowが無料かつデプロイが簡単で良いという情報をみて、 試してみたくなったので実際にデプロイしてみました。Zeit Nowについて Zeit Nowのイントロダクションのページには以下のように書いてありました。 > ZEIT Now is a cloud platform for static sites and Serverless Functions that fits perfectly with your workflow.

Next.jsでNODE_ENVによってAPIリクエスト先を変える

フロントエンドのアプリケーションを書いていると、プロダクション環境と開発環境でAPIの接続先を変えたい時があると思います。 Next.jsには環境変数をビルド時に埋め込むことができ、プロダクション環境と開発環境でAPIの接続先を変えることができます。 本ブログではNext.jsアプリケーションでどのように環境変数を埋め込むかをサンプルを交えて説明します。

yarn whyコマンドを駆使してGitHubセキュリティアラートに対応する

色々と教えてもらったので自分の備忘録としてブログにしておきます。GitHubにはセキュリティアラートという機能があります。この機能はリポジトリ内の依存ライブラリに脆弱性が発見された場合、アラートを投げてくれるというものです。リポジトリの設定から機能を有効にしておくだけで、依存ライブラリの脆弱性を自動で検知してくれます。JavaScriptの場合は定期的にリポジトリ内のpackage.jsonとlockファイルがチェックされれます。packaeg.jsonやlockファイルの中のライブラリに脆弱性がないかを脆弱性データベースに問い合わせ、脆弱性が検知されたらアラートを発行されます。

nodenvでinstallできるNode.jsのversionのリストを更新する

先月Node.jsのversion 12系がLTSになりました。個人開発でも12系を利用しようとしてnodenvでインストールしようとしたところ、インストールできるNode.jsのversionのリストが古く、version 12.13.1がインストールできませんでした。

E2Eテスティングフレームワーク、Cypress,TestCafeを試してみた

E2Eテスティングフレームワーク、Cypress,TestCafeを試してみた 最近、注目されつつある2つのE2Eテスティングフレームワークを試してみました。 Cypress TestCafe Cypressは一休さんのブログ,E2EテストをSelenium Webdriver からCypress.io に移行した話でも述べられており、注目されているように感じます。2つのE2Eテスティングフレームワークを触ったのでこれらの違いについて述べていきたいと思います。