Object.entries()を用いてオブジェクトをKey-Value型の配列にする機会があったので備忘録として残します。
以下のようなオブジェクトを...
{date: '2022/9/23', title: 'test'}
以下のようなKey-Value型の配列にします。
[
['date', '2022/9/23'],
['title', 'test']
]
Object.entries()は引数に与えたオブジェクトを、そのオブジェクトが持つ文字列をKeyとした配列にして返却します。
概要のほうで記載した内容のサンプルコードを以下に記載します。 （そのまま引数にオブジェクトを入れるだけです）
Object.entries({date: '2022/9/23', title: 'test'})
以上、Object.entries()を用いてオブジェクトをKey-Value型の配列にする方法でした。
業務でildasmを利用してdllファイルを逆アセンブルする機会があったので備忘録として残します。
.NETで生成されたdllファイル等を逆アセンブルするツールです。
基本的にはVisual Studioインストール時に自動でインストールされます。
インストールされる場所は以下となります(Windowsフォルダ配下はバージョンによって違うかもです)。
C:\Program Files (x86)\Microsoft SDKs\Windows\v10.0A\bin\NETFX 4.8 Tools
今回は以下のプロジェクトから生成されるdllファイルを逆アセンブルしてみましょう。
プロジェクト名
・AssemblerTest1
ファイル名
・Program.cs
・Test1.cs
各ファイルは以下のようなコードです。
実行すると単純にコンソール画面にaaaと表示されます。
Test1.cs
namespace AssemblerTest1 { public class Test1 { public static string a = "aaa"; } }
Program.cs
namespace AssemblerTest1 { public class Program { public static void Main() { Console.WriteLine(Test1.a); } } }
それでは実際にildasm.exeを開いて上記プロジェクトをビルド後に出力されるAssemblerTest1.dllを逆アセンブルしてみましょう。
dllファイルから逆アセンブルし、名前空間AssemblerTest1のクラスたちを確認することが出来ました。
中身をのぞいてみると具体的なメソッド等も見ることが出来ています。
意図した名前空間に対象のクラスがあるかどうか等のような内容も確認することが出来るので、今後も必要になった際にはどんどん使っていこうと思います！
JavaScriptでグルーピング処理を行う機会があったので備忘録として残します。
以下のような配列を...
[
{date: '2022/9/23', title: 'test'},
{date: '2022/9/23', title: 'test2'},
{date: '2022/9/22', title: 'test3'},
{date: '2022/9/22', title: 'test4'},
{date: '2022/9/21', title: 'test5'}
]
以下のようにグルーピングします。
{
'2022/9/21': [{date: '2022/9/21', title: 'test5'}],
'2022/9/22': [{date: '2022/9/22', title: 'test3'},{date: '2022/9/22', title: 'test4'}],
'2022/9/23': [{date: '2022/9/23', title: 'test'},{date: '2022/9/23', title: 'test2'}]
}
reduceメソッドについては以下のサイトの解説が非常に分かりやすかったです。
Array.prototype.reduce() - JavaScript | MDN
以下がサンプルコードとなります。
reduceメソッドの2つ目の引数は初期値を表します。
今回は{}としています。
[ {date: '2022/9/23', title: 'test'}, {date: '2022/9/23', title: 'test2'}, {date: '2022/9/22', title: 'test3'}, {date: '2022/9/22', title: 'test4'}, {date: '2022/9/21', title: 'test5'} ].reduce((previousValue, currentValue) => { const date = currentValue.date; // 同じ日付ならそれをKeyとした配列へ追加、そうでなければ新規に配列を作成 previousValue[date] = previousValue[date] ? [...previousValue[date], currentValue] : [currentValue] return previousValue; }, {})
ちょっとグルーピングするには一手間が必要ですが、調べていたらgroupメソッドというのもあるみたいですね（今はまだほぼ全ブラウザで利用できないみたいですが...）。
Array.prototype.group() - JavaScript | MDN
いずれ使えるようになってくれるといいな～と思いながら、しばらくはこの方法でやっていこうと思います。
JavaScript等でHTTP通信を行う際に良く使われるAxiosについて、baseURLの設定方法を備忘録として残します。
今までは以下のようなやり方でbaseURLを設定していました。
// 変数としてbaseURLを管理 const baseURL = "https://example-api" axios.get(`${baseURL}/todos`).・・・
上記でも問題なく動くのですが、axiosにはグローバル変数を管理するaxios.defaults.baseURLというconfigがあるようでそちらに設定することで同様の処理が可能でした。
公式で用意されているので、せっかくならそちらを使うようにしましょう。
axios.defaults.baseURL = "https://example-api" axios.get(`/todos`).・・・
以上、AxiosにおけるbaseURLの設定方法でした。
以前の記事でuseStateで配列を更新する際にmapを用いた例を記載していました。
その方法でも問題なく動きはするのですが、filterを用いたほうがより分岐も少なく、可読性が上がりそうだったのでそちらの処理を備忘録として残します。
スプレッド構文とfilter関数を用いて以下のような処理を書きます。
// 値を定義 const [value, setValue] = useState([]) // オブジェクト型の配列と仮定しています // filter関数で更新対象の配列を排除し、新たに値を挿入します。 setValue([ ...value.filter((v) => v.Id !== something.Id), something ]);
こちらのほうがmapを使った際よりも分岐がなく、パッと見た時の可読性は上がるのかな？と思い、残してみました。 個人的にはこちらの方が分かりやすいです。
C#8.0からインターフェースでもメソッドの実装が出来るようになったことを知ったので実際に試してみました。
明示的なインターフェイスの実装 - C# プログラミング ガイド | Microsoft Docs
実際にインターフェースでメソッドの実装をしてみましょう。
インターフェースを継承のみしたクラスで型定義を行うとコンパイルエラーになりますが、インターフェースの型で定義を行った場合はコンパイルが通ります。
class Program { static void Main(string[] args) { Sample sample = new Sample(); sample.Paint(); //コンパイルエラー IExistsImplement iSample = new Sample(); iSample.Paint(); //出力 --> "Default Paint method" } } public class Sample : IExistsImplement { } interface IExistsImplement { void Paint() => Console.WriteLine("Default Paint method"); }
インターフェースを継承したクラスでメソッドの実装を行った場合はクラスの型で定義してもインターフェースの型で定義してもクラスの実装が使われます。
class Program { static void Main(string[] args) { Sample sample = new Sample(); sample.Paint(); //出力 --> "Change Paint method" IExistsImplement iSample = new Sample(); iSample.Paint(); //出力 --> "Change Paint method" } } public class Sample : IExistsImplement { public void Paint() => Console.WriteLine("Change Paint method"); } interface IExistsImplement { void Paint() => Console.WriteLine("Default Paint method"); }
以上、インターフェースでのメソッド実装でした。
GitHub ActionsにてCI/CD管理をしていたのですが、タイトルのエラーが出て途中でこけてしまう事象があったのでその対処法について備忘録として残します。
以下の2サイトが大変参考になりました！ありがとうございます！
node.js - Github's action is not building react application - Stack Overflow
内容は以下のようなもの。
Treating warnings as errors because process.env.CI = true. Most CI servers set it automatically.
エラー文的にはprocess.env.CI = trueとなっているので警告内容もエラーとして扱っているよ！という内容です。
今回のエラーの内容としてはwarning文がエラー扱いになっていたとのことで、実際にログを見てみるとパッケージ依存関連のwarning等が出ていました。
理想的にはこちらのwarning内容を全て対処するというのが良いかと思います。
しかしながら今回は趣味の個人アプリというのもあり、取り急ぎデプロイしたかったので以下の対処法②の方法にしました。
エラー文にてbecause process.env.CI = true.と書かれているので、そのパラメータをfalseにしちゃいます。
GitHub Actionsのworkflowsファイルへ以下のように追記と書かれている2行を追記します。
steps:
- uses: actions/checkout@v2
with:
submodules: true
- name: Build And Deploy
env: # ←追記
CI: false # ←追記(既にある場合はfalseへ変更します)
id: builddeploy
以上をもって無事にCI/CDが動いてくれました。
とはいえ、理想としては対処法①のようにしっかりwarningを除きたいところです。
（パッケージ依存系も結構曖昧にやっている感があるのでしっかり勉強していかなくては...。）
