type-challengesで型パズルを解きまくってTypeScript筋を鍛える
どうも、株式会社プラハCEOの松原です この記事は「そもそもTSの型をどうやって勉強したら良いの？公式読んでも一向に覚えられないんだけど...難しいし...よく分からないから書きたくない...」とお考えの、型が嫌いな方々に向けた記事です。 type-challengesを使えば遊び感覚で練習できるよ！という楽しさを伝えつつ、最終的には「うるせぇ！！！かこう！！！（ドンッ!!!）」って方向に持ってくのが目的です（ワンピース読んでない人には意味のわからない話で申し訳ない） type-challengesとは 初級・中級・上級・鬼（意訳）に分類された様々な型パズルが用意されているので、1日1問解いていけばあら不思議、1ヶ月も経てば好きな型をささっと組み立てられるTSマッチョに。そんなTS筋を鍛えるトレーニングに最適です。 習うより慣れろ 確かにTSの公式は情報としては充実しているのですが、お世辞
ReactとZodで作る堅牢なフォームバリデーション - ICS MEDIA
前回の記事『2024年版 HTMLで作るフォームバリデーション』ではHTMLの機能を駆使したフォームバリデーションの実装について解説しました。HTMLのみでも高機能なフォームを作成できるのは解説したとおりですが、HTMLに加えてJavaScriptを組み合わせることでより高機能なフォームを作成できます。それに加えて、開発者体験の向上も期待できます。 本記事では3つのライブラリを使用して実践的なフォームを作成する方法を解説します。 UIライブラリ「React」 フォーム向けライブラリ「React Hook Form」 型システムと相性の良いスキーマバリデーションライブラリ「Zod」 また、静的型付け言語であるTypeScriptもこれらのライブラリと同時に使用し、堅牢なフォームの実装を目指します。 本記事を読むことで以下の知識が身につきます。 フォーム画面のユーザー体験（UX）と、フォーム実
TypeScriptを導入する意味と限界、型レベルプログラミングの紹介 - Qiita
はじめに JavaScript/TypeScript初学者を抜けたあたりの方に向けてTypeScriptの利点や限界、型レベルプログラミングについて紹介します。 TypeScriptはJavaScriptをラップしたライブラリであり、静的な型情報をつけることができます。また、それらの型情報をもとに型を推論し、型違反な代入やプロパティへのアクセスなどをプログラム実行 以前 に検知することができるようになっています。 例えば、動的型付けの言語であるJavaScriptでは、以下の関数のa,bには数値だけでなく、文字列を渡すことができます。数値同士を渡せば加算してくれますし、文字列同士を渡せば文字列連結をしてくれます。 「数値計算用の関数なのに、文字列連結に利用できてしまう」という緩さを開発時にはなるべく排除しようというのがTypeScriptを導入する意義です。 以下、TypeScriptの基
ハードウェアを動かすTypeScriptの世界
TypeScriptはIoTの領域でも使われており、様々なハードウェアと連動させて動かすことができます。 Webブラウザ経由でBluetoothを制御したり、スマートフォンの加速度センサで動きをセンシングしたりなど、ディスプレイの外側の現実世界と連動させることもやりやすい時代になりました。 選択肢が増え…
とりあえずWebサービス作る時の私の技術選定ポイント@2022/02
はじめに inspired mogaさんのブラウザで動くサービスを作るときの技術選定が素晴らしい記事だったので、自分も書いてみる事にしました。 幸いにも技術選定からのお仕事をする機会が多くて、自分の中でパターンが大体決まってきているので言語化してみます。前提が同じサービスは無いので絶対的な正解は無いですが、なんかしらの参考になれば幸いです。 ※2022/02時点 私/よくあるお仕事について Web系のサービスなんかいい感じにするマンとして、フリーランスとして働いています。 準委任という形でスタートアップ企業をお手伝いする事が多いです。 MVPを作りたい、もしくはMVPは行けたのでちゃんと作り直したい、という要望があって参画して、まるっと作ってそのまま運用をします。作って終わりではなくて、運用や拡張性を考えてやってます（サービスに必要なのはもちろん、運用する自分が楽だから）。 前提 エンジニ
フロントエンド初心者がGatsbyでブログを作り直した話 - As a Futurist...
フロントエンド初心者が無事に Hugo のブログを Gatsby で一から作り直すことができた。その振り返り。 歴史 インターネットを小中学生(もはや 25 年以上前)に触り初めた頃に、HTML で文章の構造を作り CSS でデザインする、ということができるのを知って感動したけど、結局自分には何かが合わなくてそれを突き詰めることができなかった。というか、それを知ったが故にテーブルレイアウトとかがどうしても気に入らず、かといって CSS は float が難しすぎて、結局ウェブサイトを作る、という根本的な営みをずっと避けてきてしまった。 時は過ぎ、Wordpress の様なブログエンジンや Hugo の様な仕組みがあったおかげでブログを初めて続けることはできた。13 年前にレンタルサーバに Wordpress を置いて始めたこのブログも 9 年前には VPS での Wordpress 運用に
【2024年最新】モダンフロント学習教材まとめ - Qiita
はじめに 今回はフロントエンド(主にReact, Next, TypeScript)でおすすめの学習教材をまとめました。 対象者 エンジニア初心者 モダンフロント技術を学びたい人 ロードマップ Developer Roadmaps エンジニア向けの学習ロードマップが整理されています。 現在の自分の立ち位置を把握し、次にやるべきことの方向性を知ることができます。 エンジニアが使うであろう、ほぼ全技術が網羅的にまとめられているので、まずはこのロードマップを使って現在の立ち位置を掴んでみてください。 TypeScript typescriptlang 公式が提供している学習サービス。 基本文法から実践的な内容まで学ぶことができる。英語が苦手でなければここで一通り学ぶべき。 サバイバルTypeScript 実務で使えるTypeScriptの実装方法を学ぶことができる。応用的な内容も多いが、解説が丁
ナメやがってこの型ァ!!超イラつくぜぇ～～～～～ッ!!
const colors = ["赤","青"] as const; type Colors = typeof colors[number]; //"赤" | "青" typeof colors[number]･･･ってよォ～～～～～ typeofはわかる。スゲーよくわかる TypeScritの世界では、typeofで変数から型を作れるんだよなァ だがnumberってのはどういう事だああ～～～～っ!? 配列にnumberを渡せるかっつーのよ───────ッ!! ナメやがってこの型ァ!! 超イラつくぜぇ～～～～ッ!! 解説 これはよォ 「Lookup Type」ってやつらしいぜぇ たとえばよォ 👇みたいに書くとPerson型からプロパティの型を取り出せるよなァ～?? type Person = { name: string, age: number } type name = Person
ぼくのかんがえたさいきょうのGAS開発手法2023
前提clasp の制約、Script API の考え方、Google Drive の考え方に素直に従うその条件下である程度モダンな開発環境での開発を目指す 可能ならコードは VCS で管理する（pull-req など）ドキュメントベースで共同作業に向いた手法で開発を進める特にカジュアルに始めやすい Google Apps Script は悪い意味での属人化まっしぐらになりやすい。これが長期間の業務に影響しないような、ワンショットのものなら別にそれでもよいが、これが誰かに引き継がなければいけないような状況が生まれると一気に地獄みが増してしまうので、そうなってしまう前により良い開発手法を考えておきたい。 考慮したことGAS は素朴に作ると Script 本体の構造がそれを利用する container （例えば Spreadsheet）のデータ構造などと密結合になってしまう。この状態のままコード
Cloud FunctionsでLintは後から設定する
// Cloud Functions for Firebase SDKでCloud Functionsを作成し、トリガーを設定します。 import * as functions from "firebase-functions"; // FirestoreにアクセスするためのFirebase Admin SDKです。 import * as admin from "firebase-admin"; admin.initializeApp(); // Firestoreのインスタンスを取得。 const db = admin.firestore(); // 注文をするとショッピングカートに購入履歴が作成されるトリガー関数. exports.createOrder = functions.firestore.document("orders/{orderID}").onCreate(asyn
eslintとprettierの組み合わせ
最初に eslintはJavaScriptにおけるスタンダードなリンターであり、コードを静的解析をし、問題のありそうな部分やスタイルガイドに準拠していない部分を検知するのに役立ちます。一方、prettierはJavaScriptのスタンダードなフォマッターであり、一定のスタイルを一貫して適用し、コードスタイルをめぐる不毛な議論を無くすることを目的にしています。 いい感じのコードにするという点では、どちらも共通していたり、eslint --fixに構文をフォーマットする機能があったりで、ややこしいです。筆者の備忘のために、以下にまとめました。 前提 node: v16.14.0 TypeScriptを用いて、nodeの環境で動かすコード(AWS Lambdaにデプロイするイメージ)を前提としています。ReactなどUIフレームワークの対応とは別物なので悪しからずご承知おきください。 コード例
TypeScript で"moduleResolution": "Node"は使わないほうがいい
はじめにタイトルは若干煽りですが、TS 5.0 でBundlerという設定値が追加されたため、Nodeを使う場面はほぼ無くなったと思います。 今回は Node.js と TypeScript のモジュール解決の仕組みについて、moduleResolutionというオプションの観点から解説します。 この記事を書くにあたって実際に動作確認は行っていますが、もしも間違っているところがあればご指摘いただけると幸いです。 なお、 Node.js LTS v18、TypeScript v5.0 時点での情報です。 今後のバージョンアップにて変更がある可能性があります。 TL;DR"moduleResolution": "Node"は使わないほうがいい おそらく求めているものはBundler tsc をビルドツールとして使用している場合はNode16 / NodeNextがベスト Nodeを使う場合でも
kintoneでTailwindCSSを利用するための勘所 - Qiita
この記事は kintone アドベントカレンダー 2022 の 11 日目の記事です。 はじめに TailwindCSS、いいですよね。 学習コストは大した事ないくせにけっこう劇的な効果があって、これまで CSS の命名ルールとか運用ルールとかで汲々としていた現場にそこそこドラスティックな変化をもたらしてくれていると感じています。 TailwindCSS 自体をあまり詳しく知らないと言う方は、ちょっと調べれば参考になるサイトはたくさん見つかるでしょう。 特に以下の記事はメリット・デメリット双方に言及しておりかなり有用です。 tailwindcss を導入して感じたメリット・デメリットについて この激オススメの CSS フレームワーク・TailwindCSS を kintone で利用するための勘所をお話ししようと言うのが今回の趣旨です。 早速作りましょう 仕上がりイメージはこんな感じ。 例
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Magic UI
Configuring TypeScript `tsconfig.json` for ES modules?