JavaScript

こんにちは、しきゆらです。
今回は、Webpackでビルドしたものが出力されるフォルダにできる不要ファイルを削除する方法を知ったのでメモしておきます。

WebpackでJSのコードをビルドしていると、結構な頻度で不要なファイルができたりします。
例えば、デバッグ用に生成したソースマップファイルがそのまま残っていたり、過去に設定を変えてあるところから出力しなくなったファイルが残っていたり等、ビルド先のdistフォルダの中はごちゃごちゃしがちです。
これを何とかしたいなぁ、と思って調べたら簡単に解決できました。

Webpackでこういうことできないかなぁと調べると大抵プラグインが出てきて追加しないといけないことが多く、今回もそのパターンでよくわからないものを追加しないといけないのかなぁ・・・と思っていたのですが、どうも標準機能として用意されているようでした。
ということで結論。

結論: outputの中にclean: trueを追加すればよい

ドキュメントを読むことは大事ですね。
しっかり記載がありました。

こちらによると、ビルドしたものを置くdistフォルダの中身をビルドのたびにきれいにしたい場合はoutput.cleanオプションを使え、とあります。
ただし、この方法が使えるのはWebpack5以降のみなので注意してください。

// webpack.config.jsの一部分
~~~~~~
output: {
   filename: "output.js",
   path: path.resolve(__dirname, "dist"),
   clean: true // この1行を追加すればよい
}

はい、たったこれだけ。
１行追加するだけで、ビルドのたびにdistフォルダの中身をきれいにしてくれるので、過去にビルドした残骸が残ることはなくなりました。

こんにちは、しきゆらです。
今回は、flatMapの処理の中で不要な要素が出てきた場合にそれを排除する方法を知ったのでメモしておきます。

結論: 空配列([])を返すと削除できる

こちらのページにある通り、
処理の中で空配列([])を返すと、その要素の処理を削除することができるようです。

let array = [1,2,3,4,5,6,7,8];
array.flatMap( (item) => {
    if (item % 2 === 0) {
        return item * 2;
    } else {
        return [];
    }
})
// => [4, 8, 12, 16]

こんにちは、しきゆらです。
今回は、以前紹介したasdfを使ってNode.jsをインストールし、個人的によく使っているYarnも使えるように環境を作っていきます。

なお、Node.jsのインストールはすぐ終わったのですがYarnのインストールとか諸々に至るまでに紆余曲折ありました。
まずは、インストールして環境構築までの流れをまとめます。
その後に、紆余曲折部分をメモしておきます。
必要なコマンドだけよこせ！という方は、以下の「環境構築の流れ」を参考にしてみてください。

環境構築の手順

コマンド自体の使い方等はそれぞれのツールのサイト等で確認してください。
なお、インストール先はタイトルにある通りWSL2上に動いているUbuntu20.04です。

# node用のプラグインを追加
asdf plugin add nodejs

# nodeをインストール
asdf install nodejs latest

# システム全体で使うバージョンを指定
asdf global nodejs latest

# yarnを使う準備
corepack enable

# asdfの再構築
asdf reshim nodejs

これにて、環境構築は終了です。

yarnの手順が以前とだいぶ変わりましたが、npmで個別にインストールせずにパッケージマネージャを管理する仕組みが入ったようです。
そのおかげで手順がさっぱりしました。

では、前述の通り環境構築の紆余曲折や各ドキュメントを見ながらの細かい話は以下にまとめていきます。

こんにちは、しきゆらです。
今回は、タイトルの通りWSL2からclaspを使おうとするとofflineと怒られる問題が起こったのでこれを回避する方法をメモしておきます。

気が付くとWSL2からclasp pushをしようとすると、以下のようなエラーが出てしまってプッシュできない状態になっていました。
よくわからないですが、たまにプッシュできたりするので何が悪いのかよくわかりません。
WSLをインストールしなおしたりしても解決しませんでした。
また、調べてもそれっぽい生地が出てこないので「おま環」ぽい気がしています。

さて、これではWSL内で書いたGASをプッシュできません。
これを回避する方法をメモしておきます。

回避方法は単純で、Docker上からclasp pushをするだけ。
調べてみると、結構DockerでGASを管理したい人がいるようで、情報がそこそこありました。
ということで、プロジェクト諸々をDocker上にマウントしてコマンド実行できるようにしていきます。
なお、ここではGASをTypeScriptで書いたのちWebpackでビルドしたものをclaspコマンドでプッシュする流れです。
参考: https://qiita.com/rei-ta/items/61b3fde6a069b77d335d

こんにちは、しきゆらです。
今回は、JS/TS環境でテストを書いて実行できる環境を作る手順をメモしておきます。

個人的に、JSの世界は定期的に天変地異が起こってこれまでデファクト的なツールが使われなくなるイメージがあり、あまり追えていないのが現状です。
そんな中、GASを書くことが増えた影響でJavaScript/TypeScriptを書くようになり、JS側の環境構築をちょこちょこやることが増えたのと、テストを書きたいと思って毎回同じことを調べている気がしたのでここに残しておこう、という魂胆です。

JavaScriptのテストフレームワーク

そもそも、JSのテストフレームワークにはどんなものがあるのか、というところからわからなかったのでちょっと調べてみました。
調べてみると、最近はJestというものが強いらしいです。

参考: https://2021.stateofjs.com/ja-JP/libraries/mobile-desktop/

なお、上記サイトではグラフィカルにJSの環境について知ることができるので、暇な時に見てみると面白いかもしれません。

こんにちは、しきゆらです。
今回は、最近遊んでいるElectronで詰まったところをメモしておきます。

Electronとは、というところはググればいろいろ出てくるのであまり書きません。
個人的には、Webの技術でデスクトップアプリを作れる便利ツールという認識です。

さて、まずcontextBridgeとは何ぞや、というところですが、私もちゃんと触り始めたのは最近なので詳しくはないので書きません。
(というか、書けません)
詳しくは公式ドキュメントあたりを見てくださいな。
https://www.electronjs.org/docs/api/context-bridge
https://www.electronjs.org/docs/tutorial/context-isolation

個人的理解では、レンダラープロセスからNode関連を使うために、扱える範囲を絞るための機能というイメージです。

では、contextBridge経由でAPIを公開するところで詰まったところと、解決方法をメモしていきます。

なお、実行環境等は以下の通り。

• OS: Ubuntu 21.10 on WSL2
• electron: 13.1.7
• webpack: 5.45.1

こんにちは、しきゆらです。
最近はGASをよく書いています。

そんな中、GASを書いていて困るのは「コードにパスワードとかを直書きしたくない」ということ。
環境変数のようなものがあればいいのに・・・と思っていました。

探してみると、一応それっぽいものは用意されていました。
それが、PropertiesServiceというもの。
ドキュメント：https://developers.google.com/apps-script/reference/properties/properties

こいつを使えば、コードに書きたくない隠しておきたいものを置いておくことができます。

ということで、今回はPropertiesServiceの設定方法や使い方をメモしておきます。

こんにちは、しきゆらです。
今回は、SimpackerというGemを使ってサーバ・フロント両方が良しなに動いてくれる環境を整えていきます。

今回はWSL2環境にUbuntuを入れ、そこで動かすことを想定しています。

こんにちは、しきゆらです。
今回は、DOMに対してクラス名を外す処理とつける処理を1行でやる方法を知ったのでメモしておきます。

DOMへのクラス追加・削除

DOMに対してクラスを追加・削除するには、それぞれadd/removeというメソッドが定義されています。
これらを使えば、動的にDOMのクラスを変更することができます。

しかし、例えば既存のAというクラスを外してBというクラスをつける
という処理を書く場合、素直に書くならば以下のように2行になってしまいます。

dom.classList.remove('A');
dom.classList.add('B');

クラスの追加・削除をまとめる

上記のようなコードを1行で書くには、以下の方法で行えます。

dom.classList.replace('A', 'B');

replace( oldClass, newClass )
既存のクラスを新しいクラスで置き換えます。
Element.classList – MDN

MDNを眺めていて見つけました。
知っていなくてもなんとかなるけど、知っているとコードがスッキリするやつですね。
知っているつもりでも、改めて見てみると知らないことがあるので、時々見てみるといいかもしれません。

まとめ

今回は、DOMの追加・削除を1行で行うメソッドを発見したのでメモしてみました。
置き換えるという方法でできる処理は1行で書けるので、知っていると少しだけコードが短くなると思います。

今回は、ここまで。
おわり

こんにちは、しきゆらです。
今回は、以前に少しだけ触れたparcelを使って開発環境を構築してみました。
また、個人的に以前まで疑問だった、JSとSCSSを用いた場合にどう管理するのか問題を解決することができたので合わせてメモしておきます。

parcelに関しては、以前少しだけ記事にしたことがありました。
=> 以前の記事：【JS】フロントエンド界隈で話題のparcelことはじめ
以前まではWebpackを利用していましたが、難解な設定や多様なプラグイン等、気軽に使うにはハードルが高い状況でした。
そんな中で、parcelは面倒で難解な設定ファイルを作成せずとも、自動で関連するファイルを監視し、変更があれば適宜処理を走らせてくれます。

そんなparcelさんですが、実際にparcelを使ったものづくりをするときにどうすればいいのかわからない部分がありました。
それは、SCSSを使った場合の読み込み方です。
HTMLからSCSSを読み込んでも、ブラウザは反映してくれません。
それをどう読み込めるようにするのかが疑問でした。
これを解決することができたので、合わせて記録しておきます。