code-log

フロントエンドやサーバーレスの話題中心です

JavaScriptで連想配列に対して配列でfilterする方法

こんにちはhiro08です。

JavaScript連想配列に対して、配列のデータにマッチする値を取り出したい場面がありました。結果として連想配列に対してfilterをして、includesを使って配列にマッチするデータを取り出す方法で解決しました。そのときのメモです。

// 連想配列
const data = [
  {
    id: 1
  },
  {
    id: 2 
  },
  {
    id: 3 
  }
];

// 配列
const arrData = ["1", "2"];

// 配列にマッチするデータを検索
const filterData = data.filter((v) => arrData.includes(v.id));

console.log(filterData); // [ { id: 1 }, { id: 2 } ]

Day.jsで月末までの日数を割り出す方法

こんにちはhiro08です。

Day.jsで本日の日付から月末までの日数を知りたい機会がありました。結論としてはDay.jsに内包されているdiffを使えば簡単に割り出すことができたのでご紹介します。

const dayjs = require("dayjs");

const today = dayjs().format("YYYY-MM-DD"); //今日の日付を取得 2021-06-12
const monthEnd = dayjs().endOf("month").format("YYYY-MM-DD"); //今月末を取得 2021-06-30

console.log(dayjs(monthEnd).diff(today, "day")); // 差分18が取得できる

diffはday, week, month..等さまざまな形で指定することができます。

参考
day.js.org

Gatsby Cloud + AWS S3 + microCMSのビルドとデプロイ設定

この記事はJamstackその2 Advent Calendar 2020 21日目の記事です。

こんにちはhiro08です。

GatsbyJSのような、SSG(Static Site Generation)の機能を備えたフレームワークは、ビルドが非常に重要になってきます。そして、GatsbyJS向けにビルド周りの足回りや、URLプレビュー機能、アクセスコントロールといった便利な機能を提供しているサービスがあります。それがGatsby Cloudです。

続きを読む

私のWrite Code Every Day戦略

こんにちはhiro08です。

ソフトウェアエンジニアとして成長するためには?といった話題で頻繁に登場するのが、Write Code Every Dayでした。私はWrite Code Every Dayをそのままの直訳で、毎日コードを書こう = コードを書く習慣化しよう、といった単純な意味として捉えていました。

しかし、Wite Code Every Dayの元になったJohn Resig氏の原文を読んで、いくつかのルールを設けてることを知りました。以下は、Write Code Every Dayの原文のリンクです。
johnresig.com

続きを読む

2020年私のアウトプット総括

こんにちはhiro08です。

2020年もそろそろ終わりですね。去年の12月~今年の3月まで、カックさんのブログメンタリング(外部リンク)に参加した経緯もあって、アウトプットに力を入れた年でした。(まとめ記事書けなくてすみません!!)

上半期は順調でしたが、下半期になるとアウトプットの量が落ちてしまったのが反省点です。理由はモチベーションの維持ができなかったこと、アウトプットに対する心理的障壁が高くなってしまったことの2つです。この辺の反省点は、後日自分なりに処理していきます。

そんな私ですが今年のアウトプットを総括してみます。

続きを読む

Storybook + Figmaで始めるデザイン駆動コンポーネント開発

こんにちはhiro08です。

Storybookのアドオンを使えばFigmaのデザインデータを埋め込みすることができます。

f:id:kamimura-dev:20200831154750p:plain

利点として、実際のFigmaで作成されたデザインデータを見ながらコンポーネントを開発することできます。個人的にDXが爆上げで、必須のアドオンになっています。もちろん、Storybook自体をホスティングができるので、エンジニアとデザイナーの間でコミュニケーションの差異がないか確認しながら作業できるのも魅力です。

続きを読む

tmuxの環境構築をShell Scriptで自動化すると便利

こんにちはかみむらです。

tmuxで開発していると、自分の開発体制がテンプレート化してくると思います。しかし、ターミナルを立ち上げて、1からtmuxで開発環境を構築するのは大変ですよね。

そこで、Shell Scriptでtmuxの開発環境を自動化すると便利です。例えば、セッションを自動で作成したり、ウィンドウを自動で分割できます。

こちらがコマンドを入力して、一発で開発環境を整えてる画像です。非常に快適になりました。

f:id:kamimura-dev:20200608093941p:plain

続きを読む