TypeScript + React で作る checkbox の checked と defaultChecked を型で「排他」にしてエラー検知しやすくした話 - Qiita
import React, { FC } from 'react'; interface Props { checked?: boolean; } const Checkbox: FC<Props> = ({ checked = false }) => ( <input type="checkbox" checked={checked} /> ); export default Checkbox; 超最低限で書くと、こんな感じになります！ checked という Props を用意して、それを <input> に流しています。 流れてくる boolean によって、 checkbox の check 状態を制御できるようになっているわけです。 外部から <Checkbox checked={true} /> とすれば「check された状態」になりますし、 <Checkbox checke
ReactとZodで作る堅牢なフォームバリデーション - ICS MEDIA
前回の記事『2024年版 HTMLで作るフォームバリデーション』ではHTMLの機能を駆使したフォームバリデーションの実装について解説しました。HTMLのみでも高機能なフォームを作成できるのは解説したとおりですが、HTMLに加えてJavaScriptを組み合わせることでより高機能なフォームを作成できます。それに加えて、開発者体験の向上も期待できます。 本記事では3つのライブラリを使用して実践的なフォームを作成する方法を解説します。 UIライブラリ「React」 フォーム向けライブラリ「React Hook Form」 型システムと相性の良いスキーマバリデーションライブラリ「Zod」 また、静的型付け言語であるTypeScriptもこれらのライブラリと同時に使用し、堅牢なフォームの実装を目指します。 本記事を読むことで以下の知識が身につきます。 フォーム画面のユーザー体験（UX）と、フォーム実
React TypeScript Playground | 便利ツール集 by mosya
React TypeScript Playground | 便利ツール集 by mosya
フロント学習の最高の教材集 - Qiita
はじめに 今回はフロント学習で重宝できる教材をまとめました。 軽く自己紹介として、自分は新卒でフロントエンジニアとして入社し2022年で2年目になります。 実際に実務を通す中で「この教材のおかげで実装がスムーズにできた」「この教材をやってたおかげで理解ができた」といったような場面が2年の間で多々ありました。 今回紹介する教材は自分自身が実際に使ってよかったものかつ、そのほとんどが無料で学べるor低価格の教材になっています。 「フロントエンドを網羅的に学べかつ実務の基礎作り」という目的で教材を紹介します。 この記事の主な対象者 フロントエンドの学習をこれからしていきたい人 何を学べばよいのかがわからない人 HTMLとCSSはある程度かける人 この記事の目標 フロント学習の指針が立てられる 実務現場でも活用できるスキルを学べる教材を知れる JavaScript ドットインストールのJavaSc
2022年の最新標準！Vue 3の新しい開発体験に触れよう - ICS MEDIA
2021年のVue.jsは新しいVue 3のコアが安定し、開発環境からライブラリやコードの書き方まで、新しい発表の多い一年でした。ICSではすでに複数のプロジェクトでVue 3やVite等の新しいフレームワーク・ツールを使用していますが、まだまだ様子見という方も多いでしょう。 変化の大きいVue 3の周辺ですが、2021年11月のVueConf Toronto 2021（セッション動画）でようやく次の定番と言える構成がアナウンスされました。この記事では、Vite・cteate-vue・<script setup>・Piniaといった新しい推薦構成を紹介し、Vue 2時代から何が良くなるのかを比較します。 新しい構成は何が良くなる？ メリットを確認 新しい構成ではプロジェクトを作成する際のコマンドラインツールからVS Codeの機能拡張やコードの書き方まで、さまざまな部分が変わっています。個
TypeScriptで開発作業を効率化！1年間使って感じた3つのメリットを紹介 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、エンジニアのザワです。 私がTypeScriptを使い始めて季節が一巡と少し経ちました。いつの間にかTypeScriptに毎日触れる生活になりました。今回はこれまでの短いTypeScript人生の中で便利だと心の底から思ったことを整理していきたいと思います。 パッと思いつくのは下記の3つです。 関数が何を受け取るのかわかりやすい 何のIDかわかりやすい APIリクエスト・レスポンスがわかりやすい 3つを通して思うのは、探したり考えたりするいわゆる「作業的な時間」が減るので開発中のストレスを感じることも減ったということです。 では、前述した3つを詳しく説明していきたいと思います。 1.関数が何を受け取るのかわかりやすい const Position = { Top: 1, Right: 2, Bottom: 3, Left: 4, }; const getPosition = (
プログラミングの幅を広げよう！一段上のPromise活用テクニック - ICS MEDIA
ES2015で登場したPromiseとES2017で追加されたasync/awaitによってJavaScriptのコーディングスタイルは大きく変わりました。Promiseの基本的な使い方を理解していることは「脱初心者」のひとつの指標にもなっているようで、網羅的で優れた解説も数多く存在します。 では、基本をおさえた後の活用方法はどうでしょうか？ 実際のところ実務ではライブラリやフレームワークから返却されたPromiseをそのままawaitするだけ…という使い方がほとんどかもしれません。しかし、これらのライブラリやフレームワークの中で利用されているような高度なPromiseの活用法をマスターすれば、もっと自由なプログラミングができるようになります。 この記事ではPromiseを活用した実践的な例を3つ紹介します。いずれもライブラリやフレームワークに類似の機能を持つものはありますが、仕組みを理解
Webフロントエンド開発(2021)の見取り図をつくりたい
本業はiOS開発なのですが、6月頃から個人開発でWebフロントを触っています。 Webフロントに入門するときに、開発の前提知識・専門用語が多すぎて、脳が処理しきれない状態になりました。 これでも数年前のより混沌としてた時期よりは安定してきているように思うんですが、それでもやはりカオス感は否めませんでした。 Webフロントエンド開発の見取り図があればいいのにと思ったので、自分でちょっとつくってみようと思いました。 個別の技術要素の情報は豊富にある（ありすぎると言ってもいいかもしれません）んですが、全体像がよくわからないので、 たとえば「TypeScriptで開発した方がいいのか？」とか、「Babelとかwebpackってインストールしなきゃいけないの？」とか、 そういう素朴な疑問が学習進めて行っても、なかなか解消できなかったので、いい感じのざっくり感でまとめられたらと思います。 この記事で全
jQueryからTypeScript・Reactまで - Viteで始めるモダンで高速な開発環境構築 - ICS MEDIA
Vite（ヴィート＝フランス語で「速い」の意味）は2020年に発表された新しいフロントエンドのビルドツールです。 開発者がVue.jsの作者であるEvan You氏であるため、Vue.jsのツールであると誤解されることもありますが、プレーンなJavaScript（バニラJS）からVue.js・React・Svelteといった流行のフレームワークまで、さまざまな環境で利用できる汎用的なツールです。 位置付けとしてはwebpackのようなバンドラーと呼ばれるものに近い存在ですが、それだけではありません。この記事では、Viteを導入してプレーンなJavaScriptから、TypeScript+Vue.js・Reactといったフレームワークまで、快適な開発環境を手に入れる方法を紹介します。 この記事で紹介すること： Viteの特徴と基本の仕組み 基本の使い方 Vite + SCSS Vite +
<file-attachment> element - GitHub製のWebアップロードコンポーネント MOONGIFT
最近のWebアプリケーションではファイルをWebブラウザにドラッグ&ドロップしてアップロードすることが良くあります。開発するのはさほど難しい訳ではありませんが、ちょっと面倒だったります。かといって、ファイルアップロードライブラリを使うと、周りのデザインと合っていないことも良くあります。 今回紹介する elementはシンプルなファイルアップロード用Web Componentsになります。 elementの使い方 利用例です。Web Componentsとして定義されています。 </file-attachment><file-attachment directory input="upload"> <input id="upload" type="file" multiple/> </file-attachment> 表示です。 ファイルをドロップします。 elementはGitHubが開発
)
placeholders - ダミー画像やテキストを生成するWeb Components
Webデザインを行っていて、画像の部分にプレイスホルダーとなるダミー画像を適用することがあります。大抵画像サイズだけが表示されていたり、目的（ロゴなど）の文字を書いていたりします。 プレイスホルダー画像を提供するサービスもありますが、今回はローカルでも使えるプレイスホルダー画像を作るWeb Components、placeholdersを紹介します。 placeholdersの使い方 を使います。 色をカスタマイズした版。 文字を変えた版。 さらに も用意されています。 文字の高さを変更できます。 placeholdersを使うことで、画像やテキスト部分にダミーコンポーネントを適用できます。画像はバイナリではなく、SVGで生成されますので、色やテキスト変更などのカスタマイズが容易になっています。 placeholdersはTypeScript製のオープンソース・ソフトウェア（MIT Lic
VS Code & TypeScriptとp5.jsで始めるモダンなクリエイティブコーディング入門 - ICS MEDIA
ページの背景で動くダイナミックなパーティクルやラインアニメーション、あるいはちょっとした遊びごころの溢れるキャラクターアニメーションなど、webページにクリエイティブな表現を組み込めるようになりたいと考える方はエンジニアにも多いでしょう。 この記事では、基本的なJavaScriptの知識があれば誰でも始められるp5.jsというライブラリを使用して、クリエイティブな作品作りの入門を解説します。 環境面では、フロントエンド開発のデファクト・スタンダードとも言えるVisual Studio Code（以下VS Code）とTypeScriptを使用して、モダンで快適な開発環境を作ります。 環境構築といっても、とくに難しい作業はありません。記事を読みながらぜひ、オリジナルの作品作りにチャレンジしてみてください。 ▼ VS Codeでp5.jsを使って制作している環境の例 クリエイティブ・コーディン
HTML 要素リファレンス - HTML: ハイパーテキストマークアップ言語 | MDN
HTML チュートリアル HTML の基本 HTML 入門 HTML 入門の概要 HTML を始めよう ヘッド部には何が入る? HTML のメタデータ HTML テキストの基礎 ハイパーリンクの作成 高度なテキスト整形 文書とウェブサイトの構造 HTML のデバッグ 評価課題: 手紙のマークアップ 評価課題: コンテンツのページの構造化 マルチメディアとその埋め込み マルチメディアとその埋め込みの概要 HTML の画像 動画と音声のコンテンツ object から iframe まで — その他の埋め込み技術 ウェブへのベクターグラフィックの追加 レスポンシブ画像 評価課題: Mozilla のスプラッシュページ HTML の表 HTML の表の概要 HTML の表の基本 HTML 表の高度な機能とアクセシビリティ 評価課題: 太陽系の惑星データの構造化 リファレンス HTML 要素 <a>
【JavaScript】insertAdjacentHTMLでHTML要素を追加する【挿入位置指定】
text 「text」にはHTMLやXMLとして挿入することができる文字列を指定します。 下記はinsertAdjacentHTMLのpositionに各値を指定して実行した際の挿入場所を表したものです。コメントの位置に「text」に記述したHTML要素が挿入されます。 <!-- beforebegin --> <div> <!-- afterbegin --> intotheprogram <!-- beforeend --> </div> <!-- afterend --> insertAdjacentHTMLでHTML要素を追加する では、実際に各「position」にHTML要素を追加してみます。下記のHTML要素に対して、段落のタグを追加します。 <div id="box"> <h1>Title</h1> </div> 各「position」を指定した際の実行結果も記載しておりま
TypeScript の概要 - Qiita
概要 AltJS としての言語 TypeScript の特徴をかいつまんで説明します。 対象者 JavaScript でコードを書いたことがある。 JavaScript でプログラムを書くのが辛い or もっと楽したい。 TypeScript ってなに？聞いたことはあるけど・・・ ・・・な人。 TypeScriptの参考資料 TypeScript - JavaScript that scales. (公式サイト) TypeScriptってどんなもの？ プロ生ちゃんと始めてみよう！ - Build Insider Insider.NET > TypeScriptで学ぶJavaScript入門 - ＠IT TypeScriptの型入門 - Qiita ワイ「いうても型なんて面倒くさいだけやろ？」 - Qiita TypeScriptの型入門 - Qiita AltJS (Alternative
TypeScriptの型入門 - Qiita
TypeScriptは型がついたJavaScriptです。プログラミングにおいて型があることの恩恵は大きく、近頃AltJSの代表格として人気を集めています。TypeScriptはもともと型のないJavaScriptで書かれるコードに型を付けることを使命としていることもあり、たまに変な型が追加されます。例えばTypeScript2.8で追加されたconditional typesはずいぶん注目を集めました。これによってTypeScriptの型システムの表現力が広がりましたが、一方でTypeScriptを書いている人の中には、よく分からない型が増えてついて行けない、一部の人たちが長くてよく分からない型定義を書いて喜んでいるだけと思っている方もいるのではないでしょうか。実際、健全にJavaScriptを書いていれば、自分でそのような変な型を書くことはあまり多くありません。 そこで、この記事ではT
たった数分で環境構築が完了！TypeScriptでWebアプリケーション開発ができるフレームワーク「frourio」が本当に手軽だった。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
たった数分で環境構築が完了！TypeScriptでWebアプリケーション開発ができるフレームワーク「frourio」が本当に手軽だった。 こんにちは、エンジニアのづやです。 突然ですがエンジニアのみなさん、TypeScriptに触れた経験はありますか？ TypeScriptはGitHubが毎年発表しているランキングで今年4位に急上昇したくらい、もっともアツいプログラム言語の1つです。 出典：https://octoverse.github.com/ しかし、いざ試してみようと思っても、 フレームワークは何を使えば良い？ どうやって導入したら良い？ など、意外とハードルって高くないですか？ そこで「frourio（フルーリオ）」という画期的なフレームワークを見つけました。こういうのってある程度経験を積んだエンジニアでないと使いこなせない……というケースも多いですよね。 でもfrourioはそ
)
Perfect Arrows - 完璧な矢印をWebに描くライブラリ
一つのことにフォーカスして完璧にやり遂げるライブラリは大好きです。色々な機能に手を出すと、どれも中途半端になってしまいます。2割の機能が8割の目的を達成するというのはよくある話で、たくさんの機能はむしろ混乱を招きます。 今回紹介するPerfect Arrowsはその名の通り、完璧な矢印を表示するライブラリです。 Perfect Arrowsの使い方 表示例です。曲がり具合も完璧です。 マウスで自由に開始点、終了点を移動できます。 曲がり具合も変更できます。 開始点からちょっとだけ離したりすることも。 Perfect Arrowsは単体で使うことはないでしょうが、ノードを接続するような表示であったり、Webベースのスライドアプリケーションなどで使えるでしょう。意外と面倒な描画ですが、Perfect Arrowsを使うことで簡単に実装できるでしょう。 Perfect ArrowsはTypeSc
フロントエンドから始めるアニメーション 最強のライブラリGSAP3を手に入れよう - ICS MEDIA
今日では、ほぼすべてのウェブサイトにアニメーションが使われていると言っても過言ではないでしょう。派手な3Dアニメーションから、UIのマイクロインタラクションまで、その物量や時間のスケールはさまざまです。 アニメーション技術もCSSやSVG、Canvasと多岐に渡り、こんな表現まで！？ と驚くようなものも増えました。 しかし、複雑なアニメーションになるほどコードは煩雑になり人間の手には負えなくなります。イメージはあるのに具現化できない！ そんな悔しい思いを抱えたまま諦めるしかないのでしょうか？ いえ、道具です。道具を使うのです。本記事ではイメージをダイレクトに表現する手段としてのアニメーションライブラリGSAP 3について紹介します。 本記事を読むことで、以下の知識が手に入ります ウェブにおけるアニメーションの重要性 アニメーションライブラリとは？ 強力なアニメーションライブラリGSAP 3
midori - 背景画像を格好よくアニメーション
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 画像をただ表示して終わりでは印象に残りづらいです。しかし、JavaScriptやCSSでちょっとアニメーションさせるだけでもインパクトが大きく違います。さらにエフェクトまで行われれば、さらに印象深くなります。 今回紹介するmidoriはまさにそのためのライブラリになります。画像の切り替え時にアニメーションやエフェクトを行ってくれます。 midoriの使い方 サンプルです。画像が切り替わる際にグリッチが行われているのが分かります。 こちらは標準のアニメーション。エフェクトは自分で選択できます。 midoriは主に画像を背景として適用した場合を想定しています。そして画像が切り替わる際にアニメーションしたり、画像に対するエフェクトが指定できます。スタイリッシュな切り替えを指定することで、
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
