TypeScript

先日、別の記事で自分の勉強のためにバトルラリーの攻略用のツールを作りたいという話をした。 kubotat.hatenablog.com 流石に全世界に向けて宣言した以上、(最終的に完成までこぎつけられるかどうかは別として)ある程度頑張らなければいけないと思っているので、ちょっとずつ進めてブログで報告していきたい。 あんまりにもいっぱい書かなきゃダメとすると続かないと思うので本当に最低限で。 要件定義・設計 繰り返しになるが自分はマジで開発の経験が皆無(そんなやつがいきなり作るのは無茶だと言うのもわかっている)なのだけれど、流石にいきなり作り始めるんじゃなくて丁寧に準備した方が良いと言うのはわか…

他言語のフレームワークとRailsを比べてみる Zennに投稿しました Zennに「Ruby on Railsにはない一般攻撃魔法」を投稿しました。 zenn.dev 所感 フリーレン2期制作決定したみたいですね。ゴールデンウィークにひたち海浜公園にネモフィラを見に行ったんですが、一面蒼月草といった感じでよかったです。 ランキング参加中プログラミング

TypeScript React で ref を使ったタイマーを使った処理を書いていて予期しない ESLint のエラーが出たのでメモ ESLint no-unused-expressions error が発生 const timerRef = useRef<number | null>(null); // … timerRef.current && clearTimeout(timerRef.current); // => ESLint error A && B をしている箇所で Expected an assignment or function call and instead saw…

バトルラリー、楽しいけど難しい。 自分は基本的にゼンミエを使って最終戦までの編成を事前にみっちり組んでから攻略したいタイプなんですけど、さすがに10戦分ともなると頭の中だけでは無理が出てくるので、スマホのメモ帳に書いているが、なかなか見にくいし記入も難しい。もっとわかりやすく一覧にして見られるものがいい。 可能であれば各階の指定ロールも予め入力しておくことで自動でスコアを計算してくれたりすると嬉しい。そして更に可能ならいま所有しているバディーズのうちで編成しているバディーズはどれくらいなのか、まだ指定ロールを満たせる余地がどれくらいあるのかもひと目で見られると嬉しい。 でもそんな都合のいいツー…

調査対象 Vueでよく使う以下のデータ型のリアクティブ性について調査してみた。 Primitive Object PrimitiveRef ObjectRef PrimitiveShallowRef ObjectShallowRef Reactive ShallowReactive PrimitiveComputedRef ObjectComputedRef PrimitiveWritableComputedRef ObjectWritableComputedRef ObjectReadonly ObjectShallowReadonly 調査結果 データ型 isRef isReactive …

自宅のスマートホームには主にGoogle HomeとSwitchbotの機器で使っている。 最近、Switchbot APIが存在することを知ったので自宅の温湿度をMackerelのサービスメトリックに送信してみた。 作ったもの github.com 主な特徴 SwitchbotAPIから取得したメトリクスをMackerelのサービスメトリックに送信 温湿度計では取得できる温度、湿度、バッテリー残量に加えて不快指数の4種類 実行環境はEventBridgeでスケジュール実行されたLambda関数 AWS SAMを利用してLambda関数をデプロイ デプロイ時に指定する環境変数でAPIキーやLa…

以前TypeScriptのActionテンプレートを紹介したら結構反響がありました。実際使ってみているのですがコンパイル、テスト、検証ワークフロー、マーケットプレイスへの公開の仕組みなど色々詰まっていて良い感じです。 当リポジトリのリンターなどの要素技術は別途紹介するとして、今回は利用方法を丁寧に紹介しようと思います。 うお〜、TypeScriptのActionテンプレート、めっちゃええやん。コンパイルのサポート、テスト、検証ワークフロー、公開、バージョン管理のガイダンスも含まれている。最高すぎる。https://t.co/UIjgbgXS3S— じょーし (@paper2parasol) 2…

Customers Mail CloudのWebhookは2種類あります。 メール受信時 メール送信時 メール送信時は、送信したメールに対してステータスが変わったタイミングで通知が送られるものです。 その際、 application/json を指定しない設定ができます。この時のデータがどうなっているのか紹介します。 <!—more—> Cloudflare Workersの準備 今回はローカルで開発する流れを紹介します。まず cloudflare@latest を使ってプロジェクトを作成します。最後の引数はプロジェクト名です。 npm create cloudflare@latest -- …

Customers Mail CloudのWebhookは2種類あります。 メール受信時 メール送信時 メール送信時は、送信したメールに対してステータスが変わったタイミングで通知が送られるものです。 本記事では実際にどういった内容が送られてくるのかを紹介します。

TypeScript Graph という .ts ファイル間の依存関係を可視化するツールを開発している。 github.com 機能変更など開発中にツールを試す際、以下のように実行していたが、少し手間だった。 ts-node -O '{"module": "commonjs"}' ./src/index.ts その場合、ビルドを行い、package.json の bin で指定しているファイルのあるディレクトリへ移動し以下を行うことで、開発中のツールを publish することなく実行することができる。 npm link

ことの発端 日常的に論文を読んだりしてみたいっていう憧れが数年前からあったことに先日気が付いた。最近頭がすっきりしてきたので再度そんなことを思い出せたんだけど、これは僕の純粋な知的好奇心だったんだなと改めて感じられたのでここに記録しておくことにした。何か将来の参考になるかもしれないし、ならないかもしれない。もしこれを読んでくれた方も何かしら感想を抱いたら教えてほしい。 GoによるGAEアプリケーションの開発 情報学広場：情報処理学会電子図書館 最近Go言語をちょっとだけ触ってみて、ブラウザに文章を表示させるところまではなんとか出来たので、みんなはどんなことをしてるんだろう、他にはどんなことがで…

Typescriptと本気で向き合った9月の学習の振り返りをしたいと思います。 9月の学習時間 結果：110時間 7ヶ月合計：812.5時間 9月は仕事の関係で、少し時間があったこともあり、平日も比較的勉強時間を確保できたため理想的な勉強時間を確保することができました。欲を言えばあと20時間くらいは勉強できたかなと思うくらいです。 7月からフロントエンドの学習を丁寧に進めています。 7月：JavaScriptともう一度向き合う 8月：React(Javascript)課題を丁寧に進めて基礎的なHooksの理解を進める 9月：Typescriptの文法の再復習とmapped type/condi…

こんにちは、iimonの検索チームでフロントエンドエンジニアを担当している保田です。今回は、ReactにStorybookを導入して、インタラクションテストを試してみたことを記事にしました。 Storybookとは？ Storybookは、UIコンポーネントのカタログ作成・テストなどができるツールです。 デザイン確認やユーザーインタラクションのテストが簡単に行えます。 主にReact、Vue、Angularなどのフレームワークで使用されることが多いです。 導入することのメリット・デメリット メリット すでに作成済みであるコンポーネントなどが分かりやすくなる コンポーネントの状態確認がしやすい …

こんにちは、TSKaigi Kansai プログラムチームです！ まずは、今回のプロポーザル募集にご応募いただいた皆さまに、心から感謝いたします。 予想を大きく上回る多くのご応募をいただき、総数 89件 のプロポーザルが集まりました。 皆さんのTypeScriptへの情熱を強く感じました。 厳正なる審査の結果、以下の方々が採択されました。おめでとうございます！ セッション枠とLT枠に分けて発表いたします。 採択者一覧 セッション枠（30分） 発表者 タイトル canalun(かなるん) TypeScriptの型システムは万能機械の夢を見るか？ ユーン 型付き API リクエストを実現するいくつ…

はじめに Rustでデスクトップアプリを作るためのフレームワークであるTauri 2.0が正式リリースされました(https://v2.tauri.app/blog/tauri-20/)。 目新しい機能として次のようなものがあります。 モバイル対応 プラグイン機能と権限回りの強化 今回、この2つの機能に触ってみたいと思います。 具体的には「現在の位置情報を取得して表示するAndroidアプリ」です。 では早速作り始めましょう。 必要なもののインストール 必要なものは次の通りです。 Rust(https://www.rust-lang.org/learn/get-started) お好きなJav…

TypeScriptが仕事で使えるレベルになるためには、単に基本的な文法や構文を理解するだけでなく、実際のプロジェクトやチーム開発でどのように活用するか、スケーラビリティや保守性を考慮しながらコードを書く能力が求められます。この記事では、TypeScriptを実務で使うために必要な基本から、少し踏み込んだ中級レベルの知識を、コード例を交えながら丁寧に解説します。 TypeScriptとは TypeScriptは、JavaScriptのスーパーセットで、JavaScriptに静的な型を追加した言語です。静的型付けとは、変数や関数にあらかじめ「このデータはこの型でなければならない」というルールを設…

こんにちは、UXライティング部のibulogです。社内では「サポートコンテンツマネージャー」というポジションでお仕事をしています。 普通は記事の最後で「We Are Hiring!」するのが相場と心得ておりますが、逸る気持ちを抑えきれませんので、もう求人情報を貼っちゃいます。 サポートコンテンツ戦略・基盤担当 / 株式会社SmartHR さて、SmartHRではヘルプセンターを自社開発しており、かつ現在はエンジニアの支援を得ながらライター上がりのサポートコンテンツマネージャーが主体となって開発・運用をしています。 ヘルプセンター｜SmartHR ヘルプセンターのトップページ 開発に関わるいずれ…

TypeScriptとPythonの連携について徹底解説 TypeScriptとPythonは、それぞれ異なる特徴と強みを持つプログラミング言語です。TypeScriptは、JavaScriptに型付け機能を追加した言語であり、フロントエンドやサーバーサイド開発でよく使われます。一方で、Pythonはその柔軟性と豊富なライブラリにより、データ分析や機械学習、スクリプト言語として幅広い分野で利用されています。 これら2つの言語を組み合わせることで、フロントエンドでTypeScriptを使い、バックエンドやデータ処理にPythonを使うといった高度なシステムやアプリケーションの構築が可能です。本記…

はじめに 少し遅くなりましたが、9月の学習記録を残します。 フロントエンド、情報セキュリティの学習を進めていました。 JavaScript/TypeScriptの理解を深めつつ、Angularを習得するためにちまちま進めています。 Angular 暫定的にブログサイトとしていますが、変わるかもしれないです。 zenn.dev Angular Tutorial For Beginners | 3 Hours Course Angularの基本的なことを抑えたかったので、視聴しました。 依存性注入やAPIの扱いあたりが難しかったですが、ためになりました https://www.youtube.co…