これは2019年12月6日に開催したTypeScriptイベントYYTypeScript#12のイベントレポートです。
YYTypeScriptは一言で「TypeScripterの部室」です。発表者の話を聞く「一方向的な勉強会」とは真逆で、TypeScriptについて、雑に・ゆるく・ワイワイ話しながらTypeScripter同士の交流を深める「双方向的な座談会」の形式になります。集まった人たちで「今日話たいこと」「聞きたいこと」をいくつか挙げていき、それをテーマに雑談していきます。
今回の配信動画
YYTypeScript #12 の生配信収録をアップしました！ https://t.co/Y09sM9m0HS
— suin❄️TypeScriptが好き (@suin) December 6, 2019
過去回の配信動画 → YouTubeプレイリスト「YYTypeScript」
前回 → YYTypeScript#11「YouTubeの動画でTS入門者におすすめのやつを紹介する」「JSに詳しくないチームで、新規プロジェクトをTSで始めるに当たってのアドバイスを下さい」「React Hooksを使っていて、Reduxを導入すべきかどうか」「バックエンドにもっと関わるにはどうしたらいい？」 - Qiita
雑談
TSあんまり慣れてない人が、これを作ればTS大体理解できるようになるもの、について話したい
みんな知りたい
JS知らない人でもわかる的な
・・・
- TSチュートリアルから始めた人います？
- Hello Worldの次くらいの課題。
- TodoMVC
- 大体ってどのくらい？
- バックエンドもフロントエンドもできたら嬉しい
- TSでバックエンドは情報が少ないのでフロントエンドのほうが良さそう
- フロントエンドから取り掛かるとビックバン的になる
- VueとかAngularも覚えないとならない
- なので、LineのボットとかSlackのボットとかがいいかなと
- InputとOutputを考えればいいので
- TODOリストは題材としては優れている
- 黒い画面なんで怖い？
- バニラJSをTSに書き直すのもいいかも
-
JavaScriptでおみくじを作ろう (全9回) - プログラミングならドットインストール
こういうのを全部TSに直すのは？
-
JavaScriptでおみくじを作ろう (全9回) - プログラミングならドットインストール
eslintのアップデート、どう追従している？
- eslintを使っている。
- バージョン上がったら新しいルールが増える。
- だんだん管理しきれなくなってきたり、新しいものに追従しきれなくなってきている。
みんなどういうふうにeslintのアップデートに追従してますか？airbnbのプリセットをそのまま使ってたりします？
・・・
- linterとは？
- コーディング規約やベストプラクティスに従った書き方になっているかチェックするツール
- ESLint 最初の一歩 - Qiita
- git pushしたらCIでlinterでチェックしたり。
- 保存するタイミングでlinterを実行したり。
- lintという単語のもともとの意味
- コンパイラよりも詳細なチェックをする
- lintは糸くずという意味。ウールの中から糸くずを見つけることが相当困難なことを比喩して。
- バージョンアップ時にlintルールが増える
- eslintの場合は
.eslintrcという設定ファイルがある。- バージョンアップのときに設定ファイルに追記する必要がある。
- 新しいルールは https://qiita.com/mysticatea この方見てます
- 自分はstandardのほうをカスタマイズしていた。
- アップデートしたことはない。
- アップデートしたとき
- いったんルールを忘れて組み直す
- チームで開発してる場合はルールだけを直すほうが良い
- コード量が多い場合は簡単に変えられない
- 言語のバージョンを上げたタイミングとかでコードを変えるのが良さそう
- 個人でやってる場合はガッと直してしまったりもする
- 見た目的なものと動き的なものがあるので分けたほうが良い
- Prettierは規約について議論する時間が無駄なので一律で強制的に適用していくポリシー
コンパイル後のJSをどうロードしているかを聞きたい
フロントはTS、サーバサイドはJavaでやってる。
TSコードをJSにコンパイルするところまでやった。
みんな普通に<script>タグでやってる？
・・・
- 脳死的にwebpackを使ってる。
- parcelはTSもロードしてくれると聞いた。
- webpack + ts-loader
- 開発ならparcelでいい気もする。
-
<script>タグのTypeScriptを読み込んでくれる
-
jQueryで書かれたプロダクトを移行するなら、Vue、Reactどっち？
Vueにしようと思っていたが、Vue3.0が来ると言われている中、今VueをはじめてVue3で書き直しになるのも嫌なので迷っている。
・・・
- Vue3ってJSXサポートする？
- します
- 前の書き方も使えるようにするとのこと
- 逆にReactはそういうこと起きるのか？
- なさそう
- React2はそもそも出てないし。
- Vue3でもVue2のコードがそのまま使えるはずだし、あんまり気にしすぎなくてもいいのでは。
VueならNuxtを入れたほうがいいと聞くがどうなの？
Nuxtを使うといろいろ便利なのを提供してくれると聞いたが、SSRはやる予定ないし、Nuxtを使ったほうがいいのか迷ってる
- Nuxtのデメリットは？
- 自由にカスタマイズできない部分がある
- Vue3とNuxt
- たしかにNuxtの対応が遅れてVue3にすぐに移行できないとかはありそう。
- NextとかNuxtって何？
- Next(React版)のVue版がNuxt
- vue cli でもvuexとかrouterのディレクトリ作成できないですかね？
- Nuxtは置き場所が決まっているので混乱しにくいよね
- NuxtからVueに脱出するのはかんたん？
一部分だけVueを組み込むパターン vs SPA の良さ・悪さを聞きたい
バックエンドがPHP、フロントがjQueryのアプリがあって、Vueに移行を考えている。
のちのちモバイルアプリの構想もある。ネイティブアプリもあるし、ウェブのモバイル対応もしたい。
・・・
- 重い処理ならwasmにしよう！
- 銀の弾丸はない
- セキュリティや認証などの実装方法が全く違う
- リッチにしたいところだけを部分的にSPAにしてみてから判断するのもあり
- CDNVueおすすめ
- SPAにするとサーバーサイドも変更しないといけない
SPAってどのくらい一般的なのか
Vueを勉強していて、SPA、SSRの意味が分かってきたが、
SPAとかがどのくらい一般的なのか聞きたい。
SPA、SSRはどういう目的で使うのか
・・・
- SPA
- Gmail、Slack
- 画面側の動きが激しいというか、GUIアプリらしさが強いアプリはSPAが向いている
- リッチなUIが必要なとき
- ページをリロードせずに表示されている情報を変更したいとき
- インタラクティブにページを変更したいとき
- チャットとか
- ホームページみたいなのはSPAにする価値はあんまりない。
- Gmail、Slack
- SSR
- 最初の表示が早くなる
- レンダリング済みのHTML + 差分のデータを送りつける
- SPAだからといってSSRしないといけないということはない
- SSRする場合はNode.jsのサーバが必要になる
- SSRがないと検索エンジンに情報を渡せない検索エンジンもある
- GoogleはクローラーがJS動かしてちゃんと内容を拾ってくれるようになってる
- ユーザが触れる部分はSSRあったほうがいいとか、業務アプリの管理画面はSSRはいらないとか。
- 業務アプリもあまりにも重くなってくるとSSRほしくなることも。
- 最初の表示が早くなる
オレオレPlayground作ったから見て
素敵！
denoでなんですか？
tsをcliで動かして学びたいのですが、そういう使い方ができるもの？
・・・
そういう使い方をするのであれば ts-node を使ったほうがいいと思います。
参加してよかったこと(参加者の感想)
- フリーランスなので話せる機会が少なく、こういう場が必要
- 自分がまだ未熟であることを知ることができる！
YYTypeScriptは毎週やってます
YYTypeScriptについてワイワイ話したい方は、YYTypeScriptのイベント情報をチェックしてみて下さい。
以上、YYTypeScriptのレポートでした。次回もワイワイやっていきたいと思います！ では、また来週！