TypeScriptは近年JavaScriptに代わってWebフロントエンド開発で利用されているプログラミング言語です。TypeScriptは開発生産性および開発者体験に優れていることから、開発現場で広く採用されています。TypeScriptを学ぶことは、今後のWebフロントエンド開発では、ほぼ必須といって良いでしょう。この記事ではTypeScriptを使うメリット、ならびに「TypeScript Deep Dive 日本語版」を活用してTypeScriptを短期間で学習する方法を紹介します。 はじめに 筆者はSIer出身のITエンジニアです。ゲーム開発会社などを経由して現在は一般企業でエンジニアとして勤務しています。はじめてTypeScriptの重要さを知ったのは、2018年ごろに「TypeScript Deep Dive」を読んだときでした。そして、今後必ず多くの人に役立つと考え、オリ

出典: https://www.npmtrends.com/typescript TypeScriptはJavaScriptを拡張して作られたプログラミング言語です。トレンドが示すとおり、TypeScriptはJavaScriptに代わって第一に選択される言語になりました。TypeScriptが提供する静的型システムは、コードの保守性と可読性を大幅に向上させます。またブラウザ等の互換性を心配することなく、モダンで便利なJavaScriptの機能を利用できます。 TypeScript DeepDiveは初心者からベテランまで役立つオープンソースのドキュメントです。JavaScriptのモダンな機能からTypeScriptの様々な魔法に至るまで丁寧に説明されています。多くのコードサンプルがあり、具体的なTypeScriptの使い方を簡単に理解できます。TypeScript DeepDive日本

webpack5でPugとTypeScript、ESLint、Prettier、Airbnbの設定方法 - Babelによる古いブラウザ対策も紹介 今回はwebpack5でPugとTypeScript、ESLint、Prettier、Airbnbの設定方法について説明します。また Babelを使った古いブラウザ対策も紹介します。 設定する内容は以下です。 Pugの設定TypeScriptの設定Dart SassESLintとPrettierの設定AirbnbによるESLintのルール強化Babelによる古いブラウザ対応 説明する環境は以下です。 macOS Catalina v10.15.5Visual Studio Code v1.57.0webpack v 5.51.1node.js v16.13.1

現在、TypeScriptの重要性は、フロントエンド開発を中心としてますます増すばかりであります。それだけに、TypeScriptをどのように使うべきかという問題については多様な意見が見られます。 これまで筆者はTypeScriptの使い方に、特にコンパイラオプションの使い方について意見を散発的に発信してきましたが、このたび記事にまとめました。この記事では、特に次のような意見に対しての反対意見を述べます。 厳しいコンパイラオプションは型パズル愛好者のためのものであり、普通の人は細かいことを気にせず緩い設定でよい。熟練のJavaScript使いにはTypeScriptは必要ない。例え話最近はTypeScriptを補助輪に例えたりするのが流行っていますので、この記事でも例え話をしてみます。筆者の考えでは、TypeScriptというのは例えるならば料理人が使う包丁のようなものです。コンパイラオプ

ハイクラス求人TOPIT記事一覧「がんばらないTypeScript」のための現実的な設定を考える ─ 4レベルの厳しさを使い分けてTypeScript疲れを克服しよう！ 「がんばらないTypeScript」のための現実的な設定を考える ─ 4レベルの厳しさを使い分けてTypeScript疲れを克服しよう！ エンジニアHubでは2019年に「がんばらないTypeScript」を紹介しました。JavaScriptに静的型付けなどを提供するTypeScriptは、今では実プロジェクトに採用されるプログラミング言語になっています。そこで現実的なTypeScriptの設定を、藤吾郎（gfx）さんに解説してもらいました。 2021年の現在、TypeScriptの価値はますます広く認められるところとなり、多くのJavaScriptプロジェクトがTypeScriptで開発されるようになってきました。またT

Vue.jsのユニットテスト環境作成の方法をまとめました。環境作成までがメインでユニットテストの作成方法についてはどのドキュメントを何の為に読んだかをまとめています。 はじめに おはようございます、加藤です。Vue.jsのユニットテスト環境作成の方法をまとめました。もし、このブログが公開から時間が経っているなら情報が古い可能性が高いです、ご注意ください。 なぜわざわざこんな事を言うかというと、私がこのブログを書いた理由は簡単に環境作成できるにも関わらず古い情報にぶつかって無駄に時間を溶かしたからです。。。 tl;dr Vue.jsのユニットテストの導入方法 マウンティングオプションは mount と shallowMount どちらを使うべきか 見るべきドキュメント 環境作成までがメインでユニットテストの作成方法についてはどのドキュメントを何の為に読んだかをまとめています。 ブログを書く経

TypeScriptはMicrosoftが開発するプログラミング言語です。JavaScriptのスーパーセットという位置づけで、静的型付けなど強力な言語機能を備えています。TypeScriptは高度なウェブアプリケーションの開発で使われることが多く、ほとんどのフロントエンドエンジニアが使っているといっても過言ではありません。 ▲TypeScriptの公式サイト TypeScriptはコンパイラによってJavaScriptのコードが得られますが、TypeScriptのコンパイラにはECMAScript Modules（ES Modules = importやexport文のこと）をまとめる機能が提供されていません。そのため、ES ModulesのJSファイルをまとめるモジュールバンドラー（例：webpack、Rollup等）をTypeScriptと合わせて使うのが一般的です。 この記事では、

最近webアプリ(RailsのviewでVue.jsを使ってる感じの部分)をフロントエンドだけ切り離してリライトする業務をやった。 他の業務と並行で進め、実装からリリースまでの期間は大体営業日換算で2週間ちょいくらい。 バックエンドのAPIなどはすでに開発済みのものを使えたので純粋にフロントエンドのみ。 途中、既存の動いてるアプリへ機能追加などされていたので都度追従していく作業もやった。 そもそもリライトすることを決めたのは元のアプリが歴史的な経緯などあり、トランスパイルできる環境に無く、加えてAndroid4.2以降のwebブラウザに対応する必要があったため。素手でES5を書き続けるのは規模が大きくなっていくとだいぶ辛いしここらでちゃんと整えましょうということで重い腰をあげたという感じ。 フロントエンドライブラリとしてはVue.jsに元々は慣れてたこともあり、Vue.jsを利用。この夏に

TypeScript再入門 ― 「がんばらないTypeScript」で、JavaScriptを“柔らかい”静的型付き言語に JavaScriptプロジェクトでTypeScriptを導入する際には、“柔らかい”静的型付き言語とするのがおすすめです。藤吾郎（gfx）さんがまとめた「がんばらないTypeScript」のガイドラインです。 TypeScriptは、すべてのJavaScriptプロジェクトで採用する価値のある技術です。TypeScriptとこれに対応したエディタを導入することで、補完や型ベースの整合性のチェックにより、すべてのプロジェクトで生産性が上がります。またリファクタリングも容易になるので、長期あるいは大規模なプロジェクトでも品質を保ちやすくなります。 この記事では、TypeScriptについて最低限の知識とともに、サクッと（どちらかというと既存のプロジェクトに）導入するための

フロントエンドエンジニアの松原(@simezi9)です。BASEでは現在ショップ向けの管理画面をリニューアルするプロジェクトが進んでいて、UI/UXの更新と同時に創業当時から継ぎ足して作ってきたフロントエンドの技術スタックを一新しようとしています。この記事では、具体的にそのフロントエンドの更新でどのようなことに取り組んでいるのかをいくつかご紹介したいと思います。 Vue + TypeScriptを利用したMPA(multi page application)化 HTMLの構築をPHP(サーバーサイド)からJS(クライアントサイド)へ移行する 従来の「BASE」の画面ではPHPでHTMLの構築を行っていましたが、HTMLの構築をすべてPHPのコードから分離させて、Vueによるクライアントサイドでのレンダリングにしています。また管理画面の特性上（1ページあたりの閲覧時間が長く相対的にローディン