ブログのJSをjQuery → JavaScript → TypeScriptとしてみた感想

ただの感想記事です。

ブログからjQueryを削除し、TypeScript（TS）を導入しました。
TypeScriptを利用して全然開発してないので、まだまだわからないことが多いですが、それぞれの感想を書いていきたいと思います。

jQuery→JavaScriptに変更してみて

TypeScriptを導入する前に一旦jQueryで書いていたものをJavaScript（JS）にしました。
ブログに実装されているJSは以下になります。

• ページ内スムーススクロール
• メニューの開閉
• 目次の作成
• table要素をdivで囲う
• 条件によるclassの付与

になります。

JSで実装してみて思ったのが、jQueryって楽だなと思いました。
上記の5つはそれほど難しいものではありませんが、jQueryで数行で済んでいたものが、倍以上の記述になりました。
難しいことをすれば手間がかかるのは普通だと思いますが、その手間がjQueryよりも大きくなったりと、ただのJSは大変だなと思いました。

メリットとしてはjQuery本体がなくなった分、ファイルサイズが小さくなったこと。
あとは、仕組みをより理解できたことです。
なんとなくこういう仕組みだから、こう動いているんだろうな、と思っていたことへ、より理解が深まったことは技術者として良かったと思います。

JavaScript→TypeScriptに変更してみて

続いて行ったのが、JSからTSに変更です。
本来であれば、よりJSへの理解を深めてから行うことだと思います。
またブログのようにそんなに凝ったことをしていないのであれば、あんまり恩恵をうけれないものだと思います。
ですが、なにごとも使うことからと思っているので一旦使用してみました。

typescript、ts-loaderをインストールし、webpackを使用し実装しました。

実装してみて良かったと思うのが、一つの変更を全体を通して問題ないかチェックしてくれるところです。
変更箇所でエラーがでたら、全体の関連する箇所でエラーをだしてくれるので、とっても楽です！！

これだけでも充分ありがたい。

またTSを使用するに当たり以下を読みました。

• TypeScript Ninja

現在のTSのバージョンが3なのでちょっと古い記事になります。
各機能を記載したコードや、コンパイルの前後を見せてくれてわかりやすかったです。
現在の仕様と異なる点はあると思いますが、読んで良かったと思います。

一先ずはtsconfig.jsonの設定で迷ったので、記事を読んで理解を深めることができました。

まだまだ少ししかJSを書いていませんが、複雑になりがちなJS。
その複雑さをカバーすると大変になりますが、そこを助けてくれるTS。
JSフレームワークにも実装が始まっているので、使って覚えていきたいです。

型定義ファイルに関しては、以下を読んでなるほどです。

• 【TypeScript】2018年、型定義ファイルのインストール方法
• TypeScript で型定義ファイル( d.ts )がないときの対処法 - Qiita
• TypeScript2.0時代の、型定義ファイル - Qiita

番外編：Windows10で.tsファイルを使用する問題

全てのPCで同様のことが起きるかわかりませんが、自分が使用しているWindows10のPCでは、.tsファイルは動画ファイルとして扱われます。
切り替えようとしても簡単には切り替えられません。
エディタから直接開けば問題ありませんが、気持ち悪いです。

以下を使用し解決しました。

• 拡張子.tsをMPEG2でなくテキストエディタで開くようにする

番外編：jQueryっているのかの意見

色々記事を読んでいるとjQueryはいらないという記事を見ます。
JSフレームワークなどjQueryで数行書いて実行していたことが、ちょっと設定することでできてしまいますし、確かにアプリ開発などになれば全然いらなくなると思います。

ただWebサイト制作においては全然必要かなと思います。
Webサイト制作で必要なのは「比較的誰でも読んで修正できる」と「早くできる」だと思います。

長いスパン、長期的に保守を行うWebアプリに比べて、作ってお終いのWebサイト。
企業によりますが、人の入れ替わりも激しくレベル差も激しいため、jQuery無しで行うと後々大変という場合があります。
また、Webサイトは短くできると思われる場合が多いので早めにと言われてしまうことが多いです。

ですが、jQueryを使用すればスライダーなどはプラグインで素早く実装できますし、ちょっとした実装であれば難しくできていない、そのための学習コストも少ないので、経験が浅い人でも、できるけど忙しくってパニクっている人でもコードを見る恐怖を減らしてくれます。

ということで、必要な人はやっぱり必要なものだと思います。
技術も多様になってきた今、取捨選択をしっかり行っていきたいですね。
取捨選択を行えるようになるためにも勉強は必要だと思いますが。。。

まとめ

ただの使用した感想記事になってしまいました。
軽くまとめたかったので記事です。
こういうとき、個人ブログは便利ですね。

JSもTSも、まだまだですが、勉強してわかったこと投稿できたらと思います。
ここまで読んで頂き、ありがとうございました。