早速ですが皆さんはウェブ開発で下のようなカラーパレットを定義しておくとき皆さんはどのように定義していますか？ 例えば下のようなコードを一つ一つカラーコードで定義している方も多いかと思います。 :root { --color-green-50: #E8F5F3; --color-green-100: #D1EBE7; --color-green-200: #A3D7D0; --color-green-300: #75C3B9; --color-green-400: #47AF9F; --color-green-500: #6AC1B7; --color-green-600: #4D8A7F; --color-green-700: #3A6A63; --color-green-800: #264A47; --color-green-900: #132B2B; } Figmaなどのデザインツール

Cohereが開発したLLMであるCommand R+が現在話題になっています。 Command R+はCohere社が提供するLLMの1つで、日本語も含め10カ国語の言語に対応しています。 さらに、Command R+はChatGPTと比較しても精度で引けを取らない高い性能を誇っています。 また金額面ではChatGPTと比べて圧倒的に安価です！ ここからはCursorでCommand R+を利用する方法をご紹介します。 AIエディタCursorの導入方法や特徴についてはこちらの記事で紹介しています！ Command R+をCursorで使う方法 1. OpenRouterにサインアップ(サインイン) Command R+を利用するために、OpenRouterというサービスに登録します。 OpenRouterは一つのサービス上でさまざまな言語モデルを利用できるサービスです。 このサービスを

2024 年 4 月 4 日に発表された「Command R+」が GPT-4 とほぼ同じ回答精度で、レスポンスがめちゃくちゃ速く、かつ API の利用が商用利用じゃなければ無料だったので、絶対に LibreChat に組み込みたいと思った。 LibreChat はいわゆる ChatGPT クローンと呼ばれる OSS で、UI は ChatGPT とほぼ同じで、回答に利用する API を GPT4 や Gemini、Claude3 など、自分の好きなものを指定できる。ローカル上で動くのはもちろん、デプロイするのも簡単で、数ある GPT クローンの中では一番使い勝手が良いと思う。UI を忠実に ChatGPT に寄せているのが良い。 LibreChat の UI。ChatGPT とほぼ同じ 今回はこの LibreChat で、Cohere が発表した「Command R+」を動かせるようにす

とてもニッチな用途で使えるコンポーネントですがその場のiframeのデバックができるReactコンポーネントを作ってみました！ まずはこちらのポストをご覧ください！ このポストではChromeのデベロッパーツールを開いているわけではなく、ブラウザー内に直接デベロッパーツールが埋め込まれています！ 今回はこのようなReactコンポーネントを作ってみたので、どのように作ったかをご紹介したいと思います。 デモページ こちらのページで実際にデモを試すことができます。 https://react-embed-devtools.vercel.app/ なぜ作ったか Reactをオンラインで学習できるサービスmosya Reactを先日リリースしました。 このサイトではオンライン上でコードを書いてその場で書いたコードがプレビューできるようになっています。 詳しい開発記事はこちらをご覧ください！ ただ、プ

この記事では私がmosya Reactというオンライン上でReactを学習できるサービスをリリースした背景を語らせていただこうと思います。 まずはmosya Reactがどんなものなのかイメージが湧きやすいように動画を用意したのでぜひ見てください👇 動画をみていただくとわかるように環境構築不要でその場でReactのコードを書いてプレビュー結果を確認できます！ 問題を解いた後は「提出」ボタンを押すことで実際に書いたコードがあってるかの確認プログラムが動いて採点してくれます！ なぜ mosya Reactを作ったか mosya Reactを作った背景には 完全未経験の方に仕事を手伝ってもらうためにReactを教える機会があったこと が関係しています。 その方は保育園の業務でパソコンを使う程度でプログラミング言語には触れたことはありませんでした。 そこでmosyaという別サービスでまずはHTM

2024年3月15日の一粒万倍日に、mosya ReactというReactを学習できるサービスをリリースしました。 こちら1年間の開発期間を経て、ようやくリリースできました！ mosyaの開発期間と合わせると約2年間の開発期間を経てのリリースとなります。 いやー、長かった！ 良かったら下のリンクから試してみてください！ どんなサービスか mosya ReactはReactをオンライン上で学習できるサービスです。 エディターに書いたコードがリアルタイムにプレビューできるようになっていて環境構築なしでReactを学習できます！ 採点機能が搭載されているのでReactを自学習したい方におすすめです！ このサービスの開発で特に頑張ったのが以下の特徴です！ 最新の技術にキャッチアップしている ライブラリの型がエディター上で確認できる Biomeを動かしていてリントエラーがエディター上で確認できる 最

早速ですがマークダウンの中でJSXを使えるようにするmarkdown-itのプラグインを作りました。 下の画像のようにマークダウンの中でJSXを使えるようになります。 そうすると、下の画像のように記事の中に下のようにインタラクティブに動くコンポーネントを埋め込むことができます。 この実行結果は mosya.dev という私が開発したプログラミング学習サービスのブログで確認することができます👇 JSXを書けるこの仕組みは個人の技術ブログ用途にはぴったりなのではないかと思います！ なぜ作ったか 海外のこの記事を見て、技術記事は文字と画像だけでなくインタラクティブ性が必要だと実感しました。 触っててとても楽しいし、記事の続きが読みたくなったのです。 私はこんな読んで楽しい、触って楽しい記事を書かないといけない！！ そこでマークダウンの中でReactを埋め込めないかと考えました。 最初は表示され

自分の事業部では、毎朝チームで朝会を実施してます。 自分が所属していたチームでは毎日1問、 脳の準備体操を兼ねてTypeScriptの型問題に取り組むことになりました。 mosya<TC>というType Challenge用のWEBアプリがあったので、チームで解いてみることに。 mosya<TC>初級編 Googleアカウントがあれば登録できるようなので、早速ログイン。 初級編だし、朝の頭の体操にちょうどいいよね〜。 と思っていましたが大間違いでした。 初級編とは名ばかりで初見殺しです 結構な裏切りを何回も喰らいました。 （しかも前回の問題でやった内容とかなので余計悔しいです） 難易度としては以下のような感じです。 // JavaScriptのArray.include関数を型システムに実装します。 // この型は、2 つの引数を受け取り、trueやfalseを出力しなければなりません。

コード画像生成コードを画像に変換できます。コピーボタンを押してTwitterの投稿に貼り付けてみてください。

アクセシビリティとは Webサイトにおけるアクセシビリティとは、障害を持つ人や高齢者などに関わらず、すべての人が、より簡単に、より快適に、より安全にサイト内で情報を得ることができるようにすることです。 例えば、視覚に障害のある人にとっては、画像の代わりにテキストをデバイスに読み上げてもらうことが必要です。 また、聴覚に障害のある人にとっては、音声の代わりに文字で情報を得ることが必要です。例えば動画の再生などでは、適切に字幕を表示するなどの配慮をしましょう。 また、視覚に頼ったマウス操作も視覚に障害のある人にとっては難しいので、キーボード操作だけでサイトを快適に閲覧できる様にすると良いでしょう。 考慮したい3つのこと アクセシビリティを考慮したサイトを作成する際には特に以下の3つのことを重点的に考えると良いでしょう。 スクリーンリーダーでの読み上げ キーボードでの操作性 配色 スクリーンリー

コレクレー探しも必見！スペイン村の特別イベント「ポケモン課外授業」に行ってきました！2024年8月3日

皆さんはサービスの管理者が使うための認証をどのように実装していますか？ FirebaseやAuth0などのサービスを使ってログイン機能を実装している方も多いと思いますが、 今回はGCPのIAPとIdentity Platformを使って管理画面のログイン機能を実装することのメリットと具体的な実装方法について紹介します。 IAP（Identity-Aware Proxy）とは IAPとはIdentity-Aware Proxyの略で、GCPのサービスの一つです。 IAPを使うことで、サービスに対するリクエストの前段に認証を挟むことができます。 例えば、GAEやCloud Runなどのサービスに対してIAPを設定すると、Cloud Runにリクエストが到達する時にはすでに認証が完了している状態となりリクエストヘッダーにはIAPが発行したJWTが含まれています。 アプリケーション側でこのJWTか

WebContainersとは みなさん、WebContainersをご存知でしょうか？ WebContainersはStackBlitzが開発している、ブラウザー上で開発環境を構築するためのツールです。 なんとブラウザーだけでNode.jsやNext.jsなどのアプリケーションが動かせてしまいます。 すでにこのツールを使ってSvelteのPlaygroundが用意されていたりします。 現在WebContainersを使って作っているもの 現在、以下の動画のようなブラウザーだけでNext.jsやReactを使った開発ができるツールを作っています。 ここに開発中のエディターのリンクを貼っておきます。 すでにこのエディターで以下のようなことが可能です。 ファイルの作成、削除、リネーム ターミナルの操作（jsh） ファイルの編集（VSCodeのようなエディター） ブラウザーでの実行結果のプレビュ

この機能は2023年8月現在、ChromeやEdgeなどのChromiumベースのブラウザーではサポートされていますが、他のブラウザーではサポートされていません。 使用する場合はブラウザーのサポート状況を確認してから使用することをお勧めします。 皆さんはスクロール連動型アニメーションをご存知でしょうか？ スクロール連動型アニメーションとは、スクロール量に応じてアニメーションを発生させることができるCSSの機能です。 この機能を活用することでJavaScript不要でユーザーのマウススクロールに応じたアニメーションを実装することができます。 従来のanimationのCSSに加えて、animation-timelineというプロパティを指定することでアニメーションの進行度をスクロール量に応じて変化させることができます。 スクロール連動型アニメーションの使用例 使用例1.（パララックス） パラ

😀😃😄😁😆😅🤣😂🙂🙃🫠😉😊😇🥰😍🤩😘😗☺️😚😙🥲😋😛😜🤪😝🤑🤗🤭🫢🫣🤫🤔🫡🤐🤨😐😑😶🫥😶‍🌫️😏😒🙄😬😮‍💨🤥😌😔😪🤤😴😷🤒🤕🤢🤮🤧🥵🥶🥴😵😵‍💫🤯🤠🥳🥸😎🤓🧐😕🫤😟🙁☹️😮😯😲😳🥺🥹😦😧😨😰😥😢😭😱😖😣😞😓😩😫🥱😤😡😠🤬😈👿💀☠️💩🤡👹👺👻👽👾🤖😺😸😹😻😼😽🙀😿😾🙈🙉🙊💋💌💘💝💖💗💓💞💕💟❣️💔❤️‍🔥❤️‍🩹❤️🧡💛💚💙💜🤎🖤🤍💯💢💥💫💦💨🕳️💣💬👁️‍🗨️🗨️🗯️💭💤👋🤚🖐️✋🖖🫱🫲🫳🫴👌🤌🤏✌️🤞🫰🤟🤘🤙👈👉👆🖕👇☝️🫵

displayの2値構文とは displayの2値構文とは、displayプロパティに指定する値が2つあることを指します。 今まで通りの1値構文も使えますが、今後、2値構文の書き方がされるサイトも増えてくると思うのでここでしっかりと理解しておきましょう。 例えば、display: inline flexのように、displayプロパティにinlineとflexの2つの値を指定している場合、2値構文と呼ばれます。 これは、diaplay: inline-flexと同じ意味になります。 早速サンプルのコードを見てみましょう。

今回、mosya<TC>というType Challengesをブラウザーのエディターから挑戦して採点できるサービスをリリースしました。 Type ChallengesはTypeScriptの型に関する問題を解くためのGitHub上のプロジェクトで、MITでライセンスされているので、誰でも自由に利用することができます。 これを解くことで、かなりの型力が身につくので、以前から昼休みによく友人と解いていました。 今回、このことを思い出しType Challengesに挑戦しやすくするためにブラウザー上でエディターを提供し、問題を解いた後にすぐ採点できるサービスを作りました。 使い方を動画にしてみたのでぜひご覧ください このように気軽にType Challengesに挑戦できるのがサービスの特徴です。 また、受講履歴を残したり、書いたコードをTwitterでシェアすることができます。 反響もよく4

Type Challengesに挑戦しよう！TypeScript好きの方、型パズルに挑戦して型力をつけませんか？ mosya<TC>はGitHubで公開されているTypeScriptの問題集Type Challengesに挑戦して解答を判定できるサービスです。 ログインして挑戦（無料）

以前こちらの記事でエンジニアのためのFigmaの使い方を紹介しました。 こちらの記事の後にFigmaのプラグインがリリースされ、VSCodeとの連携が可能になりとてもエンジニアにとって使いやすくなったので今回はその使い方を紹介します。 Figma for VS Codeで何ができるのか Figma for VS CodeはFigmaのプラグインで、VSCode上でFigmaのデザインをみたり、CSSのコードを取得したりすることができます。 FigmaのデザインをVSCode上で確認 以下はFigmaのデザインをVSCode上で見た例です。 ご覧いただいてわかる通り、要素間のの距離やサイズなどコーディングに必要な情報を一通り把握することができます。 コードの補完 Figmaのデザインをコーディングする際に、Figmaのデザインを元にCSSのサジェストをしてくれます。タブを打つだけでサジェスト

mosyaはオンラインでHTML,CSS,JavaScriptを基本から学習できるサービスです。現役エンジニアが作成した豊富なカリキュラムに沿って学習を進めましょう。