[TypeScript]二次元配列からundefinedを取り除きつつ、型も除いた情報で定義する | DevelopersIO
t_o_dと申します。 map関数で生成された配列等、配列内にundefinedが入るケースがあります。 その際にfilterで取り除くのですが、単純な条件だと型情報にはundefinedが残ったままです。 そこで今回は型もundefinedを取り除いた情報になるようにfilterする方法を記録いたします。 環境 mac OS Ventura 13.2.1 typescript 4.9.5 修正前 修正前のコードは以下の通りです。 // 型 : ((string | number)[] | undefined)[] const members = [ [1, "takahashi"], [2, "kato"], undefined, [4, "saito"] ] // 型は「((string | number)[] | undefined)[]」のまま const selections =
![[TypeScript]二次元配列からundefinedを取り除きつつ、型も除いた情報で定義する | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/b3e248037db933d91fd7e8223803b92308f955d5/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2020%2F09%2Ftypescript.png)
[TypeScript]二次元配列をカラム毎に分割した連想配列に変換する方法 | DevelopersIO
t_o_dと申します。 二次元配列は表形式データを扱う上で便利なので利用する機会が多いです。 ただ項目ごとに関連するデータをまとめたい場合は連想配列を利用したいです。 そこで今回はTypeScriptで二次元配列を列番号指定でカラム毎に分割した連想配列に変換する方法を記述します。 環境 mac OS Monterey 12.6 typescript 4.8.3 結果 変換する対象は以下のようなstring型の二次元配列です。 const sample = [ ['a001','サッカー','高橋',], ['a002','野球','斉藤',], ['a003','野球','高橋',], ['a004','テニス','斉藤',], ['a005','テニス','高橋',], ['a006','テニス','鈴木',], ] 変換後の形式としては以下のような連想配列です。 { "高橋": [ [
ReactベースのあたらしいフレームワークRemixをためしてみた | DevelopersIO
OSSとしてリリースされたばかりのReactベースのフルスタックWebフレームワークであるRemixをためしてみました。 はじめに こんにちは、CX事業本部MAD事業部の森茂です。 re:Inventを前にAWSの情報も気になるところですが、フロントエンド界隈もReact Conf 2021を前にReact v18 betaをはじめ、Next.js v12やReact Router v6、新しいRoutingライブラリReact Locationのリリースなどなど注目のリリースラッシュが続いているようです。そんな中Reactをベースにした新しいフレームワークであるRemixが本日（2021/11/23日本時間）リリースされました。 Remixとは RemixはReactRouterの作者でもあるMichael Jackson氏（@mjackson）とRyan Florence氏（@ryan
ExcelやGoogleスプレッドシートをMarkdown出力するVS Codeの拡張機能「Excel to Markdown table」が便利すぎる件 | DevelopersIO
Markdownでテーブルを表現するにはつらみが深すぎる みなさんはMarkdownでテーブルを書くことは得意ですか? 私は苦手です。 簡単なテーブルは簡単に書けるのですが、以下のようなテーブルを書くことには抵抗感があります。 行数、列数が多い セル内に書くテキスト量が多い セル内でリストを表現する 一方、私は先日、「Markdownで手順を書いています!」とこちらの記事で伝えました。 そんな私に対して、 「オイオイオイ。 Markdownでもなんでもいいけどよォ... テーブルを使いたい場面は多いんだぜ。」 というセリフが聞こえてくる気がします。 私のようなMarkdownでテーブルを書くことにつらみを覚える方への解決策として、以下記事で紹介している「MarkdownTableMaker」があります。 このアドオンを使うことで、選択したスプレッドシートをMarkdownに出力してくれます
リアルタイムにコンポーネントをプレビューできるReact Preview (beta) を試してみた | DevelopersIO
吉川@広島です。 Are you a React dev? Do you use Visual Studio Code? I just released the beta of React Preview for VS Code ?https://t.co/HnFpTpO9op pic.twitter.com/qU4sxTo30g — François Wouts (@fwouts) June 25, 2021 「お前らReactとVSCode使ってる？ React Preview for VS Codeのベータ版を出したぜ」 こちらのツイートが目に入り、「え、これすごくない？」ということで試してみました。 本記事ではReactアプリケーションの初期構築手順は割愛します。 環境 react 17.0.2 typescript 4.3.2 styled-components 5.3.0 VS
[React] カスタムフックを作るときにこころがけていること | DevelopersIO
カスタムフックを作るときに、私が気をつけているいくつかのことを例を用いながらその理由を書いていきます。 私がカスタムフックを作るときにこころがけていることがいくつかあります（こうするべきだ、と主張するものではありません）。 React の Hooks にスタイルを合わせる - https://sbfl.net/blog/2020/08/21/use-react-hooks-easy/ 関数は useCallback で包む - https://blog.uhy.ooo/entry/2021-02-23/usecallback-custom-hooks/ テストをできるだけ書く React の Hooks にスタイルを合わせる React のカスタム Hooks をカジュアルに使ってコードの見通しを良くしよう 上記の記事に非常に影響を受けました。とてもすばらしい記事なので先に読んでおくことを
レビューしやすいプルリクエスト | DevelopersIO
普段レビューをしていて、レビューしやすいプルリクエストに対して個人的に感じている特徴をまとめてみました。 普段レビューをしていて、レビューしやすいプルリクエストに対して個人的に感じている特徴をまとめてみました。 割と大きめなソースコードに対するレビューの話が主となります。 ざっくりまとめ 本記事では以下のようなトピックについて記載しています。 差分の目的が1つ レビューをしながら「私はいま何のレビューをしているのか」のコンテキストスイッチが発生しないので嬉しい 何を達成したいのかがわかる レビューの多くは「やりたいこと」と「実現方法」のすり合わせなので、前者の精度を上げたい 分割されすぎていない 他のコードとの関連性や構造についてのレビューがしやすい レビューの強弱をつけるための情報がついている 機械的な変換の差分だったりした場合、それが事前にわかると嬉しい 検証結果が書いてある コードだ
【書評】『プログラマーのためのVisual Studio Codeの教科書』はVS Code使いに是非読んでいただきたい１冊！ #VSCodejp #VSCode | DevelopersIO
こんにちは、Mr.Moです。 圧倒的な人気を誇る高機能エディター Visual Studio Code（以下、「VS Code」）の使い方をまるっと習得できてしまう１冊。『プログラマーのためのVisual Studio Codeの教科書』を拝読し素晴らしい内容でしたので紹介していきたいと思います！ 書籍・著者情報 下記からも購入が可能です。電子版もありますよ！ プログラマーのためのVisual Studio Codeの教科書 | 川崎 庸市、平岡 一成、阿佐 志保 |本 | 通販 | Amazon 下記は著者の方々の情報になります。(上記のマイナビBOOKS ページより抜粋。筆者陣が錚々たる顔ぶれですね） 川崎 庸市（かわさき よういち） 株式会社ZOZOテクノロジーズ開発部所属のエンジニア。過去には、国内モバイルベンチャーや大手インターネットサービス企業にて大規模サービスの基盤プラットフ
チームで働くための知識体系としての「心理的安全性」 | DevelopersIO
事業開発部の塩谷 (@kwappa) です。 ジョインしたときの記事や執筆者プロフィールに書いてある通り、ぼくは「チームリライアビリティエンジニア」というジョブタイトルをつけています。今回はその活動の一環として、チームの定例ミーティングで「心理的安全性」について話しました。 「心理的安全性」という言葉は最近よく話題になりますし、「なにか大事なものらしい」という認識も広がっているようです。ですが、そもそもどのようなものでなんのために必要なのか、という共通の認識がないと、少しずつ意味がブレてしまい、本来の意図や目的から乖離したものになってしまいがちです（バズワードがよくたどる末路ですね）。 今回は「心理的安全性」という言葉の本来の出自と、なぜそれが必要なのかについてを改めて考えてもらうために話してみました。チームや会社に依存する内容ではないのでスライドは公開したのですが、より深く知っていただく
Slack絵文字による川柳を効率化するためのスラッシュコマンドを開発しました | DevelopersIO
通常のリアクションと川柳によるリアクションを比較すると、川柳によるリアクションの完了には通常のリアクションの約3倍~10倍程度の時間が必要になります。 +:絵文字コード: を活用してもかなりのタイプ数になるので、こういった反応が出てくるのはもっともです。 Tip : 一番最後に受け取ったメッセージにリアクションするには、メッセージボックスで +:絵文字コード: と入力して送信します Slack の使い方 Slack職人たちが暇か？と言われないように、またSlack職人たちの業務負荷軽減のために、効率よく川柳を詠むためのスラッシュコマンドを作ることを心に誓いました。 構成 今回作成する環境です。 各AWSリソースはざっくり以下のように利用します スラッシュコマンドインストール時 ユーザーのブラウザがAPI Gatewayのエンドポイントにアクセス API GatewayからLambdaを起動
オンラインvimトレーニングで休日にvimmerへの一歩を進めてみよう | DevelopersIO
初めて触ると恐怖でしかないvimですが、操作すること自体が楽しくなってくるチュートリアルで実務でも有効利用できるようにしてみましょう。 はじめに ローカルでのTerminalを使った開発 EC2インスタンス等へログインした後に発生するテキスト編集作業 など、vim等のテキストエディタを使うシーンというのはそれなりに発生します。いざその場面に遭遇した際に、テキストエディタ操作で手間取ってしまうことは避けたいものです。 vimのローカルトレーニング用テキストとしてvimtutorというコマンドがあります。 % vimtutor =============================================================================== = V I M 教 本 (チュートリアル) へ よ う こ そ - Version 1.7 = =======
無駄なコストを省こう！AWSで止め忘れ、消し忘れを自動でチェックする方法 まとめ | DevelopersIO
はじめに 以前、AWS利用料のメールが見て、思っていたよりも高くてビックリしたことがあります。調べてみたところ勉強用に立ち上げたRDSを消し忘れていました。今は会社のアカウントを使わせてもらっているので自分の財布に直接響くことはなくなりましたが、同じことを起こさないために消し忘れたリソースがないか自動でチェックするようにしています。私が使っているツールを紹介します。 お使いの開発環境などで無駄なリソースが残っていないかチェックしてみてください。 チェックしたい主なリソース EC2 まずはEC2インスタンスですね。説明は不要だと思います。 Amazon EC2 料金表 EC2を停止していてもEBSの料金が発生します。ストレージはあまり気にされてない方多いと思いますが、数が多いと結構金額膨らむので注意しましょう。例えば20GBのEBSが10台あると１か月間で24ドルほどかかります。 Amazo
今度こそ理解する！俺式Lambda入門 | DevelopersIO
はじめに こんにちは、平野です。 AWS Lambdaがやっと使えるようになってきました。 私は新しい物事を理解しようと思った時、 「できるだけ最小限な構成から少しずつ要素を増やしていって、 そこから挙動を類推して確かめる」 というような調べ方でないとどうにも腑に落ちない性格のようなので、 そんな感じでLambdaも試行錯誤してみました。 Lambdaについては前から面白そうだと思いつつもなかなか手を出せずにいました。 事前の知識としては「あるイベントが起きたら、何らかのイベントを起こすもの」 ぐらいのふわっとした理解しかありませんでしたが、 私と同じ辺りの出発点からスタートする人の参考になればと思います。 最小限でLambdaを構成する ということで、できるだけ最小限の構成でLambdaを動かしてみます。 作るもの 以下のような動作で検証を行います。 究極的に最小限というわけでは無いです
AWSサービス毎の請求額を毎日Slackに通知してみた | DevelopersIO
事前準備 下記の設定を行います。 AWS請求の設定 Slackの設定 AWS請求の設定 ルートアカウントでログインし、設定画面から「コストエクスプローラ」を有効にします。 Slackの設定 チャンネルの作成 通知先のチャンネルを作成します。ここでは、チャンネル名を#aws-billingとしています。 Incoming Webhookの追加 Incoming Webhookの設定を行います。 通知先チャンネルから「アプリを追加する」を選択します。 アプリとしてIncoming Webhookを検索します。 「設定を追加」を選択します。初回であれば画面は違うかもしれません。 投稿先のチャンネルを選択し、「incomming Webhookインテグレーションの追加」を選択します。 作成されたWebhook URLをメモしておきます。このURLに対して、特定フォーマットでPOSTすれば、Slac
書評「入門 監視」雰囲気で監視をやっているすべての人にオススメ | DevelopersIO
監視という一種マニアックな領域を真正面から解説した貴重な本です。監視で悩む人のみならずシステム開発に携わるすべての人にオススメ。 「全然わからない。俺たちは雰囲気で監視をやっている」 自分はAWS事業本部コンサルティング部所属ということもあって、いろんなお客様にAWSインフラのコンサルティングしてます。最初のインフラ構成設計時に監視の話をすることも非常に多いんですが、 「どうしましょう。CloudWatchでいけますかね？」 「MackerelとかDatadogとかもありますが、どうしましょ。マネージドとの違いは〜」 「とりあえず、ディスク使用率80%でしきい値設定しておきましょうか。みんなそうしてますよ」 とか言っていた昔の自分に見せつけたい本、それが今回紹介する「入門 監視」。 監視設計の原則がよくわかんない メトリクスのしきい値決めるところから監視を考えてしまいがち よく考えずに、い
AWSの費用見積でおさえておくべきポイント | DevelopersIO
はじめに AWSの費用見積をする際におさえておいたほうがよいポイントについて説明します。 従量課金制である AWSのほとんどのリソースは1時間毎、もしくは利用量毎の課金です。 従量課金制の一番よいところは、ずっと使い続けなくてよいというところです(あたりまえですが)。 急なイベントの時にだけリソース増強 (弊社のこの事例はまさにそれです) 検証環境は必要な時に本番環境から作成 という使い方をすることで費用削減が可能です。 実際の必要リソースがわからない部分については、リソース大目の環境を作って検証して、結果的に不必要であればその時点でインスタンスを小さく/大きくする等で対応できます。 最初の見積がずれていても、ずっとそのコストを払わなくてもよい点、頭の片隅のおいておいてください。 また、AWSならではの従量課金の項目もあります。 EBS(ネットワークストレージ)のI/O ネットワークの通信
2ヶ月でマイナス10kg！！Scrumでダイエットに成功した話 | DevelopersIO
こんにちは！おおはしりきたけです。今回はScrumでダイエットに成功した話を書かせていただきます！ はじめに 私は今35歳です。30超えてからブクブク太りだし、ダイエットしても途中で挫折することが多く半ば諦めていました。。。しかし、うちのお年頃の8歳の娘が一言「そんなに太っているお父さんとプール行くのいや！」と言ってきたので、毎年のプールを楽しみにしていた私は、このままではいけない思いダイエットに再度挑戦することにしました。ただ、今までと同じことをやっても続かないというのは分かっていたので、色々な方法を模索しているうちに、Scrumがダイエットに活かせるのではないか？と思いさっそく初めてみました。これは、私が2か月間で約10kgのダイエットに成功した話になります。 追記 身長が無いと評価しにくいと思いますので、追記します。私の身長は182cmです。80kgでも太っているようには見えないんで
スマートフォンサイトのパフォーマンスチューニング | DevelopersIO
スマートフォンサイトのパフォーマンス測定とチューニングに関して調べたことをまとめます。 パフォーマンス測定のツールはKeynote社のMITEを使用します。MITEのバージョンは2.3で試しています。 MITEは性能テストの他に自動テストなどを行えるテストツールです。 MITEのインストール まずはMITEのインストールからです。 MITEは以下のサイトからインストーラーをダウンロードできます。 http://mite.keynote.com/ 無料でダウンロードできますがアカウントを作成する必要があります。インストール後、起動すると以下のようなダイアログが表示されます。 ここには作成したアカウントのユーザー名とパスワードを入力します。 起動した後ですがスマートフォンの端末情報(Profile)を最新に更新するかどうかを聞かれると思います。 最新に更新する場合は"はい"をクリックします。更
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
