【じぃの最近】
いろいろやってます〜〜

どうも！こんにちは！

お久しぶりです。笑

最近勉強をどっぷりしていたので、ブログが触れていませんでした。。

そこで、ここ最近どのような勉強をしていたかを書いていきたいと思います。

①typescriptをやってみた

本ブログは「Nuxt.js+microCMS+Netlify」のJAMStackなブログですが、Nuxtにはtypescriptは導入していませんでした。
ただ、typescriptの静的型推論が気になり、遊びがてら私がLP作成で使用するスターターキットに導入してみました。

LP制作ですが、

• ・制作は一回きりだが、クライアントが更新する可能性がある。

というのがあるので、jsやcssをmin化するのは難しく、gulpで制作を行っているため、typescriptの導入はgulpに入れることにしました。

typescriptの導入はそこまで難しくなかったのですが、別のtsファイルをimportをするrequire文に変換され、うまくいきませんでした。

ここからの解決が至難・・

色々調べると、import文はnode.jsのrequire文に書き換えられるので、そこを使えるようにするには、ファイルをバンドルさせるしかないという着地点になりました。

バンドルというとwebpackが一番有名ですが、「俺はgulpのみでやりたいんだ！」というのがあったので、すごく探してたどり着きました。

それは以下2つのプラグインを合わせることでした。
Browserify
through2

以下のようなソースにすることでどうにか動きました。笑

// gulpfile.js
function bundleTs(cd) {
  setTimeout(() => {
    gulp
      .src([`${dist.js}common.js`])
      .pipe(plumber({ errorHandler: notify.onError('bundleTs Error: <%= error.message %>>') }))
      .pipe(
        through2.obj(function (file, encode, callback) {
          // fileにはsrcで読み込んだファイルの情報が引き渡される
          // file.pathを利用してbrowserifyインスタンスを生成する
          browserify(file.path)
            .transform(babelify, { presets: ['@babel/preset-env'] })
            .bundle(function (err, res) {
              // bundleを実行し，処理結果でcontentsを上書きする
              file.contents = res;
              // callbackを実行し，次の処理にfileを引き渡す
              // nullになっている部分はエラー情報
              callback(null, file);
            });
        })
      )
      // .pipe(source('bundle.js'))
      .pipe(gulp.dest(dist.js));
    cd();
  }, 1500);
}
exports.bundleTs = bundleTs;

setTimeoutをしているのは、gulp.seriesでタスクを非同期にしているものの、
typescriptのコンパイルより早くバンドルが動くので苦肉の策で1.5秒ずらしてバンドルさせるようにしています。

typescriptを入れるとvscode上に、波線で教えてくれるので便利ですが、まだまだany型を使う場面が多く、
もっと他の型と友達になりたいです。笑

②typescriptを勉強してみた

gulpにtypescriptが導入できたので、もうちょっと勉強してみたく、Udemyのtypescriptの動画で勉強しました。

Udemyの講座は何回かやってみたことはありますが、今回のものは分かりやすく勉強になりました。

そこで、同じ人の講座で何か無いかな〜と探していると、「React+typescript+firebaseでつくるタスク管理」なるものがあるではないですか！

VueはNuxtで触っていたので、必然的に次はReactをやってみたかったのですが、このブログを制作したことで少し燃え尽きて、新技術を行う気力がありませんでした。笑

しかし！今回はfirebaseとの絡みがあるので、認証系やDB連携ができると思い発起しました。

次回に続く

今回は、typescriptを頑張って勉強してみましたの回になりましたが、
次回はReact+firebaseでタスク管理アプリ、さらにチャットアプリまで制作しましたので、そこをお伝えしようと思います。

ちなみに今は、勉強後のアウトプットとして、友人の大工計算アプリを作っています。笑
そのアプリも完成後お見せできればと思います！

それでは、次回もゆたしく〜〜