はじめに みなさん、デジタル庁のサイトはご覧になったことはありますか？今話題のデジタル庁です。 こちらが2023年6月現在のデジタル庁のサイトです。やばくないですかこれ？最初見たときこれ「やっばw」と思いました。これからこのサイトのやばさを語っていきたいと思います。 洗練されたシンプルさ、そしてデザイン 僕は最初見たときびっくりしました。「なんてシンプルで見やすいんだ！」官公庁のサイトですよ？官公庁のサイトといえば、細かい字がずらっと並んで見づらいイメージでしたが、デジタル庁のサイトはとことんシンプルさを追求して見やすくしてます。フォントもNoto Sans JPを使われててとても読みやすい。黒も #000 でなく見やすい色になっている。 やばいですねこれ。 そしてこのレイアウトを見たとき、余白のおかげでとても見やすいなと思いました。そこでChrome Dev Toolでレイアウトを見てみ
まとめ 住所フォームの作り方 住所フォームを作るときには以下の4つを押さえましょう。 オートコンプリート機能に最適化する 郵便番号フィールドは1フィールドにしてハイフン有無どちらも対応する モバイルUX優先なら郵便番号が入力されたら即座に補完。精度優先なら郵便番号補完ボタンを設置 住所フィールドは「都道府県」「市区町村」「町名以下」の3フィールドが基本。「建物」フィールドはオプション 本文 地域SNSのユーザー登録、ECサイトの配送先入力、資料請求、自治体サイトでの電子申請など、ウェブサービスを活用する上で住所入力は欠かすことができません。 住所入力をシンプルかつ正確に行えるような入力インタフェース（住所フォーム）は、離脱率を減らし、コンバージョン率を向上させる上で重要です。 郵便番号を入力すると対応する住所を自動入力する機能（郵便番号による住所補完）は、住所フォームの改善方法として最も効
sangmin.eth | Dify Ambassador @gijigae スタンフォード大学が日本の高校生に提供する、Stanford e-Japan🏫。 全ての授業は、 ①無料 ②完全英語🇺🇸 ③日本時間に合わせたオンライン 修了時に修了証＋高成績者は現地招待も。2022年秋学期の出願は8月12日が締切です🚀。周りの高校生や親御さんに是非伝えてください。note.com/sangmin/n/n7ed… 2022-08-08 22:58:10 リンク note（ノート） スタンフォード大学が日本の高校生に提供しているオンライン講座、「Stanford e-Japan」とは？｜Sangmin Ahn｜note こんにちは、Choimirai School のサンミンです。 【主要なアップデート】 （2020.10.20）「英語で学ぶ、ジュニア」を宣伝欄に追加 （2020.10.1
昔DeNAの新人が入社後半年だかの振り返りのプレゼンの中で「うまくモチベーションが上がらなくて」ということを言った時に、南場社長が「社会人がモチベーションで仕事をするな」とすごく怒ったという話*1があって、とても印象に残っている。 また、これは実体験だが、その当時所属していた会社のけっこう中心的な人物が退職する送別会で、その人が受け持っていた客の話になった時、「あれもこれも大変なお客さんですね。私たちに引き継ぎできるものですかね」と残された側が不安をこぼすと、その人は「仕事やろ」とピシャリと言った、という場面をよく覚えている。 どちらも胸に氷を刺されたような、うすら寒い気持ちになったからだった。 私は、社会人だが、どうにも好き嫌いで仕事をしている節があった。やるべきことを淡々とこなすのではなく、やらなくてはならないことの中に何とか自分の興味が持てるようなテーマを見いだして、努力の為のエネル
フロントエンドのデザインパターン
本書は、Lydia Hallie 氏 と Addy Osmani 氏らによる Learning Patterns (https://www.patterns.dev/) の日本語訳です。原著は大きく 3 つのセクションに分かれていますが、本書は、その最初のセクションである Design Patterns を訳したものとなります。
Reactアプリケーションのアーキテクチャの一例として公開されているGitHubリポジトリ「bulletproof-react」が大変勉強になるので、私自身の見解を交えつつシェアします。 ※2022年11月追記 記事リリースから1年ほど経過して、新しく出てきた情報や考え方を盛り込んだ続編記事を書いていただいているので、こちらも併せて読んでいただければと想います（@t_keshiさんありがとうございます！）。 ディレクトリ構造が勉強になる まずはプロジェクトごとにバラつきがちなディレクトリ構造について。 ソースコードはsrc以下に入れる bulletproof-reactでは、Reactに関するソースコードはsrcディレクトリ以下に格納されています。逆に言えば、ルートディレクトリにcomponentsやutilsといったディレクトリはありません。 たとえばCreate Next Appで作成
Chrome拡張 つくりかた 令和最新版
数年ぶりにChrome拡張のつくりかたを調べた。 本当に何も分からなかったので、Twitterで「2022年にChrome拡張つくりたかったら何見て学べばいい？」とつぶやいてみたところ、何人かの人が教えてくれた。教えてもらった中から幾つかのリンク先を紹介するような形で記述していく。 Create a Vite-React Chrome Extension in 90 seconds - DEV Community 2022年時点だと比較的新しめのフロントエンド向けツールであるviteと、viteのChrome拡張向けプラグインである@crxjs/vite-pluginを使ってChrome拡張をつくってみよう、という記事。今回自分は主にこれを参考にしながら開発を進めた。Reactと言っているが、自分のChrome拡張ではUIは存在しなかったので、Reactに関する部分は読み飛ばして、vite
1年と2ヶ月かけて開発していたアプリがリリースできたので記事にしました。 詳しい開発のログは以下のスクラップにまとめています 👌 リリースしたアプリ ダウンロードはこちら。 ■ iOS ■ Android LPサイト アプリを開発したきっかけ 以前から週1で家族の振り返りの時間を設けていて、今週あった出来事を互いに共有して議事録に残すことを習慣にしていました。 ただ、上記の運用をしている間に以下のような問題があることに気づきました。 振り返りの際に、今週の出来事を思い出せない まとまった期間の振り返りたいときに、テキスト情報のみだとピックアップしづらい 良かった出来事のみピックアップしたい 振り返りを開催する時間が毎回ズレる 日付を忘れてスキップしてしまう そこで、上記を改善するためアプリを家族で開発しようという話になりました。 どんなアプリ？ memoirは1週間を振り替えるアプリとし
Next.jsの考え方
Next.js App Routerにおける設計やベストプラクティスを、筆者なりにまとめました。
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog TL;DR:2022にフロントエンド開発で最も考慮すべきユーザー環境は、パフォーマンスでは低スペックのAndroid端末、標準仕様では2年前のSafari、そしてネットワークでは４Gです。それに対してはJSへの過剰依存などが原因で主にパフォーマンスの面でのウェブ全体の対応がよくありません。 こんにちは！LINEフロントエンド開発室のダバロス アランです。この記事のタイトルを見て「釣りタイトルですね〜」と考えている方がいると思いますが今回に限ってはそれを大目に見てください。それはなぜかと言いますと、2021年から2022年にかけて私たちフロントエンドエンジニアが全体的に考え方を改める必要が出るほど大きな変化がありました。 その変
技術選定の失敗 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL はじめに 新たに書きました。 MySQLを使っても会社は潰れない 久々に記事を書いたのでどうぞお手柔らかに... 私が過去2年間で行った技術選定の成功と失敗を振り返り、その学びを共有したいと思います。 文才無いので淡々と箇条書きでいきます Twitterエンジニア垢作りました。エンジニアのお友達がいません。 @uncode_jp 注意 意見を押し付けるものではありません。ただ建設的な議論は大事だと思う。 自分の意見は明確に、歯切れのよい表現を意識している。人それぞれだよねみたいな感じに逃げたくない。技術選定に結論はある（過激）。 ただし技術選定にはコンテキストがあり、例えばプロダクトのフェーズや組織の事情によって当然結論は変わる可能性がある。 OSSの開発者さん達は偉大ですごい。あ
はじめに AIで開発は本当に速くなったのか？ 「AIを使えば開発が速くなる」 このフレーズ自体は、もう聞き飽きるほど目にしてきました。 実際、コード補完は賢いし、ちょっとした関数やエラー修正なら一瞬で解決することもあります。 でも本当に“開発全体”は速くなりましたか？ コードを貼り付けて修正してもらう。 生成されたコードをコピペする。 動かない。 足りなかった前提を説明し直す。 気づけば、コンテキストの説明に時間を使い、差分の確認に神経を使い、結局自分で修正する。 そんな経験ないでしょうか？ AIは優秀ですが、「ワークフローに組み込まれていないAI」は、強力な検索エンジンとあまり変わりません。 私はClaude Codeを個人開発に導入する際、プロンプトを工夫するのをやめて、AIが迷わない構造そのものを設計することにしました。 その結果、Issue作成、実装、PR作成までを一貫して任せられ
質問のコツ 質問内容は抽象的な言葉よりも具体的な言葉を選ぶようにすると、回答の精度がより上がります。 回答内容に対して、更に質問を繰り返して深掘りしていくと理解度が高まり効果的です。 「あなたはプロのエンジニアとして振る舞って下さい」などと最初につけるとよりそれっぽくなります。 文章が長くて途中で終わってしまう場合は、「続き」と入力すると続きからの回答をしてくれます。 わかりやすく解説してもらいたい時は「小学生でもわかるように解説して下さい」などとつけるとわかりやすい回答が返ってきます。 「私はプログラミング初心者です」など自分のレベル感を付けると、レベルに応じた回答になります。 「コードブロックだけで返事をしてください」とつけるとコードだけで回答してくれます。 ロードマップ(カリキュラム)編 まずは、目標に向けてどういった勉強をすべきかというロードマップ(カリキュラム)を提案してもらいま
500点出す！ - ゆーすけべー日記
「Web Speed Hackathon 2022」という「非常に重たいWebアプリをチューニングして、いかに高速にするかを競う競技」があります。 リモート参加で11月1日から27日まで開催されています。 ここで言う「高速」とはCore Web Vitalsのスコアが高いことを言い、Lighthouseのスコアをベースにした500点満点の争いです。 ISUCONのフロントエンド版ですね。 以前にも同じ課題で「学生向け」と「社内（サイバーエージェント）向け」が行われたらしく、まだ500点を出した人はいません。 そこで僕は「満点を出したい」と思い、初日から、いやむしろフライングしていたからその前から頑張ってきました。 そして、先日（17日）、ついに500点満点を出しました！ たぶん、レギュレーションはクリアしている、はずです（もし違反してたらすいません…）。 自動で行われる「Visual Re
React ステート管理 比較考察 - uhyo/blog
こんにちは。Reactの話題の中でもかなりの部分を占めるのがステート管理、さらに言えば各種のステート管理ライブラリです。今さらながら、Reactにおけるステート管理の手法やいくつかのステート管理ライブラリを比較考察して記事にまとめました。 useState + バケツリレーReactにおける基本的なステート管理はuseStateです。ひとつのコンポーネント内で完結するようなステートならばuseStateは非常に適しており、他の選択肢はほぼ無いと言っても構わないでしょう。 ステートをアプリケーションの広範囲で使いたい場合が問題です。次の画像に例示されるように、分岐したコンポーネントツリーの末端のコンポーネント（使用者）で同じステートを参照したい場合を考えます。 useStateと組み合わせる場合、もっとも原始的な方法はpropsのバケツリレーによるものです。propsは親コンポーネントから子
【個人開発】正規表現を学ぶ狩りに出ませんか？モンスターを倒しながら正規表現が学べるゲーム「Regex Hunting」を作りました - Qiita
はじめに はじめまして！ 個人開発者のハガユウキと申します。 突然ですが、皆さん正規表現はお好きですか？ 私は好きです。「複数の文字列を一つのパターンで表現できる」部分にすごく面白味を感じています。 もっといろんな方に正規表現を知っていただきたい、好きになってほしいと思っています。 しかし、現状では2つの課題があると感じています。 正規表現の勉強自体がそもそも面白くない。 正規表現を勉強しても、しばらく使わないと忘れる。 この2つの課題を突破できるサービスは、現状存在しません。 そのため、楽しみながら正規表現を学べるサービスがあれば良いなと思いました。 作りました。 ▼スライド型正規表現学習ゲーム【Regex Hunting】 https://www.regex-hunting.com/ (※) 端末はPC、ブラウザはChromeが推奨です。 サービス概要 Regex Huntingは、モ
個人開発を7年以上続けて分かった技術選択のコツ
個人開発を7年以上続けて分かった技術選択のコツInkdropというMarkdownノートアプリを作り続けて7年になる。 お陰さまでその売上でずっと生活できている。 これまで個人開発でどう継続していくかについて「ユーザの退会理由をあれこれ考えない」とか「アプリの売上目標を立てるのをやめました」とか、ビジネス面あるいはメンタル面からいろいろ書いてきた。 今回は、技術面にフォーカスして、どう継続して開発していくかについてシェアしたい。 TL;DR最初はとにかく最速でリリースする事を最優先する迷ったら「ときめく方」を選べ程よいところで切り上げて開発を進める使っているモジュールがdeprecatedされるなんてザラだと覚悟する古いから悪いとは限らないシンプルにしていく老舗から継続の秘訣を学ぶ運ゲー要素は排除しきれない最初はとにかく最速でリリースする事を目標に技術選定する開発計画とビジネス計画は切って
個人開発を学べる記事 23選
本記事で紹介されている記事はあくまで個人の独断・偏見に基づいたものであることは予め述べておきます。今回の記事で紹介する記事は、いいねの数がQiitaであれば4桁、Zennであれば3桁であるものを中心に紹介していきます。 開設後３週間で収益１０万円を得た個人開発サイトでやったことの全部を公開する 個人開発の面白さ、アイデアの作り方、個人開発でやってはいけないことや個人開発で収益を得るための具体的なテクニックまで解説されている。これから個人開発をやりたい人は絶対にこの記事を読むべき。 【夫婦で開発】1年かけて1週間を振り返えるアプリを本気で開発してみた 夫婦でReact NativeとFirebaseで開発したタスク管理アプリをリリースした体験談。モックの作り方、役割分担などの方法を実例を踏まえて丁寧に解説されている。ただ単に自分が開発したアプリの特徴や使用した技術を書いているだけではなく、開
ここ2年くらいの話なのですが、仕事で「フロントエンド会」というチーム内委員会のようなものを立ち上げて運営しています。元々1人の Web フロントエンド職人がプロダクトの Web フロントエンドの面倒を見ていたのですが、その方が異動されることになったので、残った人で面倒を見ていける体制を作りましょう、というモチベーションで発足した会でした。この話については以前イベントで発表したので、詳しくはこのスライドをご覧下さい。 speakerdeck.com Web フロントエンド職人の異動とともに入社した id:mizdra が Web フロントエンドが得意だったので、ペアプロやペアオペ、定例会などを通じてどんどんスキルや知見を配っていく、という戦略で運営していました。実際に 2 年経過してみてメンバーも徐々にキャッチアップしていって、ちょっとしたパフォーマンス改善をやってみたり、最近 Gulp や
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 私はUdmeyに年間50万??ぐらい教材に投資して常に、Udemyに貼り付いて良い講座ができるのを監視しています。その中で、最後まで講座を受講してその講座の感想を書きたいと思います。私は、優良だと思わない講座は即返金処理を行うので、ここに紹介される講座は、とてもわかりやすいものしか基本的に載せてありません。この記事は更新されていきますので、ご興味ある方はいいねとストックをお願いします。(よかったやつ証明書とかコピペしてここに貼るの正直まじでめんどくさいので、更新するモチベーションに繋がります)。下記に書いてあるものは全部、優良のものだが
株式会社リクルート エンジニアコース新人研修の内容を公開します！（2022年度版） | Recruit Tech Blog
こんにちは！2022年度エンジニア新人の太田です。毎年反響を頂いているエンジニアコースの研修内容を、今年は受講者の立場から紹介させていただきます。 研修概要 リクルートの新卒エンジニアコースでは、入社した新人を対象に技術研修を行っています。その内容は、実際の開発業務に活かせる技術を扱う「本当に必要な生きた知識・技術」を取り入れたものとなっています。 特筆すべき点として、研修の資料はほとんどが内製であることが挙げられます。そのため、講義中の質疑を通してより深い知識や、開発の現場で培われた経験に触れることができます。 フロントエンド、モバイルアプリ、バックエンド、インフラ、データ分析、セキュリティなど幅広いテーマが扱われるため、知識のインデックスを張ることにもつながります。またハンズオンや競技形式の演習も取り入れられており、実際に手を動かすことで印象に残りやすく、エラーへの対処も学ぶことができ
100日間アプリを作り続けるチャレンジをしてる。（現在進行中） github.com 【Day54】とにかく派手なオセロを作った。仕様はGeminiで、エフェクトはClaudeという棲み分けがよかった。#LLMでバックエンド100日チャレンジ#100DaysOfCode pic.twitter.com/vWQSFqcAVm— riddle@MIXI (@riddle_tec) 2025年6月7日 【Day37】CHIP-8 という昔の仮想マシンのエミュレーターを作ってゲームを動かしてみた。その界隈ではシンプルさで有名らしいのだが、gemini2.5だけではうまくいかず o3 も強力しなんとか動かすところまでいったのは感慨深い。#LLMでバックエンド100日チャレンジ#100DaysOfCode pic.twitter.com/I8G0aP4pMk— riddle@MIXI (@riddle
2024年11月現在の最新の構成に関する記事をこちらに書きました。 よろしければそちらもご参照下さい。 （Qiita の本記事は、2022年4月時点の構成に関しての記事で、多少古い内容が含まれています。） 個人開発で 賃貸物件の検索サービス Comfy を作りました1。グラフや地図でサクサク絞り込める UI が特徴のサービスです。とにかく気持ち良い使い勝手を実現するために色々工夫しています。 既にリリースからは 4 ヶ月以上経っているのですが、改めてサービスの概要や、システム構成及び使用した技術・サービスをご紹介しようと思います。2。 サービスの概要 Comfy は日本全国の賃貸物件を検索できる Web サービス です。画面 UI は上の GIF 画像のような感じです。 こだわったポイントを色々書くよりも実際にさわって頂いた方が新感覚の UI や気持ちよさを体感頂けるかと思いますので、 実
SPAセキュリティ超入門 | ドクセル
スライド概要 SPA(Single Page Application)の普及が一層進んでおり、従来型のMPAを知らないウェブ開発者も生まれつつあるようです。SPA対応のフレームワークでは基本的な脆弱性については対策機能が用意されていますが、それにも関わらず、脆弱性診断等で基本的な脆弱性が指摘されるケースはむしろ増えつつあります。 本セッションでは、LaravelとReactで開発したアプリケーションをモデルとして、SQLインジェクション、クロスサイトスクリプティング、認可制御不備等の脆弱性の実例を紹介しながら、現実的な対策について紹介します。LaravelやReact以外のフレームワーク利用者にも役立つ説明を心がけます。 PHPカンファレンス2022での講演資料です。 PHPカンファレンスでの動画URL https://www.youtube.com/watch?v=jZ6sWyGxcCs
株式会社リクルート エンジニアコース新人研修の内容を公開します！（2023年度版） | リクルート テックブログ
こんにちは！ 2023年度エンジニア新卒の、吉田です。 株式会社リクルート 新卒エンジニアコースでは、部署への配属前に、BootCampと呼ばれる新人研修を行っています。 本日は2023年度の研修の内容を、実際に受講した新卒の立場から紹介させていただきます。 研修の内容については毎年反響をいただいていますが、今年度も一段と進化し、より充実した研修でした。 ページ下部に研修資料を公開していますので、ぜひ研修の雰囲気を感じ取っていただけると嬉しいです。 研修の概要 エンジニアコースの新人研修は、配属後にスピード感を持って成長できるようになることを見据え、 「さまざまな技術領域の講座を受け、興味関心を広げて、知らなかった好奇心に出会う」 「現場で求められる『仕事への取り組みスタンス』をつかむ」 「気軽に相談できる仲間（同期）をつくる」 の３点が目的とされています。 今年度は、入社前に行われたスキ
テストの学習へようこそ！ コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 このコースでは、ウェブ用のテストの概要と探索について説明します。 このコースで学習する内容は次のとおりです。 テストの基礎 自動テストと手動テスト テストを実施する場所と方法 ベスト プラクティス 何をテストすべきか、誰に責任があるのか、目的そのものとしてではなく、目的を達成するために手段をテストすることを検討する方法など、テストの理念。 このコースには、学習に役立つ簡潔で実用的なサンプルコードも含まれています。 コースのスコープには、Node.js などの環境で実行される、フロントエンドの JavaScript とドキュメント モデル、バックエンドでのライブラリ テストが含まれます。テストの経験はありませんが、JavaScript の基礎知識と Node.js などに関する経験が必
60分で学ぶ最新Webフロントエンド
2026/04/16 に「技育CAMPアカデミア」で話したスライドです。2025 年のはてなインターンの講義資料 (https://speakerdeck.com/hatena/internship-2025-frontend) に手を加えたものになってます。 https://talent.sup…
もうUIはいらない。 この一言に尽きる。 ChatGPTの新機能「Apps in ChatGPT」が登場した瞬間、フロントエンドという職種の地盤は音を立てて崩れた。 これまでは、Webアプリやサービスは「フロントエンドでUIを作り、バックエンドでデータを返す」 という分業構造の上に成り立っていた。 だがApps in ChatGPTは、その構造をぶち壊す。 ユーザーはもうWebサイトを開かない。 ChatGPTのチャット画面内でSpotifyを操作し、Zillowで物件を探しEtsyで買い物をする。 つまりUIはChatGPT内に統合される。 あなたが書いてきたReactコンポーネントもボタンもフォームもすべてAIに吸収される。 「UI」はAIが自動生成する時代に入った もはやユーザーはブラウザを必要としない。URLをコピペすることも無くなるだろう。 「このホテル予約して」と言うだけでAI
しずかなインターネットの技術構成
こんなWebサービスをリリースしたので、技術的な話をまとめておこうと思います。 元々このサービスは、趣味の延長線のような感じで開発を始めました。競合にあたるnoteやはてなブログなどのサービスが確固たる地位を築いているということもあり、「お金にはならないだろうけど、自分の趣味を詰め込んだものにしよう」というゆるい気持ちで開発を続けています（楽しい）。 選定の方針 趣味と言っても文章投稿サービスなので、ユーザーが少数であったとしても長期間運営しなければなりません。そのため、ユーザー数が少なければランニングコストが数千円/月以下、ユーザー数が増えたときは段階的にコストが上がるように選定を行いました。 アプリケーション フルスタックNext.jsアプリケーションをCloud Runにデプロイしています。各APIエンドポイントはNext.jsのAPI Routesで生やしています。 Next.js
Ajaxから始まった一つの時代の終わり
最近の流れを見ていての感想文なので、ideaとして投稿します。筆者のバックグラウンドとしては、Remixの商業記事を書いたり、App Routerの商業記事を書いたりしている人です。 さて、筆者は2022年の秋から、社内システムではありますがRemixをプロダクション運用しています。また、Next.jsのApp Routerについても、パラダイムとしてはRemixにインスパイアされた部分が多い[1]おかげで、順調にキャッチアップできています。 RemixとApp Routerは、ルーティングとデータフェッチを高度に統合しており、Progressively Enhanced SPA（PESPA）と呼ばれることもあるそうです。PESPAについては、次の記事が話題になりましたね。 このPESPAであるRemixを実運用する中で、フレームワークの手触りが近年触ってきたものと大きく違っている点があっ
最小限のコードで動く最も汚いコードから始める
コードを書く際の重要な要点は、読みやすく他人に理解される「良いコード」を書くことです。しかし、完璧を目指して最初から書こうとすると行き詰まります。代わりに、荒削りながらも動くコードを作成し、徐々にリファクタリングして完成度を高めます。型エラーやリントエラーを無視しても構わないので、まずは動くものを作成しましょう。それからリファクタリングして「良いコード」を作成できます。 コードを書くときに最も大切なことってなんだろう？聡明な読者諸君ならご存知だろうが、コードは書く時間よりも読む時間のほうが長い。だから他人に読まれることを意識して、読みやすい「良いコード」を書かなくっちゃならない。コンポーネントは適切な粒度で分割されていて、適切な名前がつけられている。型システムに安全性だって守られてるし、最新のなんとかアーキテクチャにも準拠している。素晴らしいコードだ。 でも、そんなコードをはじめから書くの
ブラックフライデー＆サイバーセール開催！ Udemyでは何を買う？ 編集部の2021年イチ押しトピック10選 - はてなニュース
新型コロナウイルスの影響で、リモートワーク（テレワーク）やオンラインでの学習といった働き方・学び方の大きな変化は2021年も続いています。そんな2021年もあとわずか。やり残したことや学び残したことはありませんか？ オンライン学習プラットフォーム「Udemy」では、2021年11月19日（金）～2021年12月1日（水） の間、年間最大のセール「ブラックフライデー＆サイバーセール」 を開催します！ 対象の講座がなんと1,200円から購入可能になります。 ブラックフライデーセールは11月19日（金）～11月26日（金）、サイバーセールは11月29日（月）〜12月1日（水）の開催です。11月27日（土）〜11月28日（日）はセール対象外なので、ご注意ください。 講座は買い切りなので、おトクなこの期間に気になる講座を購入しておいて、時間ができたときに自分のペースで学んでみるのもいいかもしれません
こちらのスライドは以下のサイトにて閲覧いただけます。 https://www.docswell.com/s/ockeghem/ZM6VNK-phpconf2021-spa-security シングルページアプリケーション(SPA)において、セッションIDやトークンの格納場所はCookieあるいはlocalStorageのいずれが良いのかなど、セキュリティ上の課題がネット上で議論されていますが、残念ながら間違った前提に基づくものが多いようです。このトークでは、SPAのセキュリティを構成する基礎技術を説明した後、著名なフレームワークな状況とエンジニアの技術理解の現状を踏まえ、SPAセキュリティの現実的な方法について説明します。 動画はこちら https://www.youtube.com/watch?v=pc57hw6haXk
Magic UI
150+ free and open-source animated components and effects built with React, Typescript, Tailwind CSS, and Motion. Perfect companion for shadcn/ui.
こんにちは。強いUIはボタンを捨てるをスローガンにScrapboxを開発しています。shokaiですshokai.icon
フロントエンドコーディング試験
RESAS(地域経済分析システム) APIの「都道府県一覧」APIから取得するAPIレスポンスから都道府県一覧のチェックボックスを動的に生成する都道府県にチェックを入れると、RESAS APIから選択された都道府県の「人口構成」を取得する人口構成APIレスポンスから、X軸:年、Y軸:人口数の折れ線グラフを動的に生成して表示する「総人口」の他に「年少人口」「生産年齢人口」「老年人口」も切り替えるUIを何らかの形で用意し表示できるようにすること（同時に表示する必要はない） React/Vue.jsのいずれかを用いてSPAを構築すること（バージョンはできるだけ最新版をご使用ください）ReactVueNuxt.jsやNext.jsなどの、これらを内包したフレームワークの利用も許可する都道府県一覧および総人口情報はRESAS APIのデータを用いることグラフは Highcharts や Rechar
最強のCSVエディタ「SmoothCSV」を支える技術
自作の CSV エディタ SmoothCSV (v3) が Generally Available になったので、技術的な工夫とかを書きます。 また7/1 16時からの24時間、Product Hunt でローンチするので応援よろしくお願いします。 About Me 株式会社ヘンリーでエンジニア的なことをしつつ、個人開発してます。 @kohii00 on X kohii on GitHub About SmoothCSV SmoothCSV は、macOS と Windows 向けの CSV エディタです。(Linux も近々) 初代 SmoothCSV は15年前に作っていて、昨年 v3 の開発を始めました。 Excel ライクな操作感で、直感的に使える CSVを扱うのに必要な、基本的〜応用的なツールが搭載されている 様々なフォーマットや文字コードに対応。列数が異なるCSVでも扱える 高
フロント開発を炎上させてしまった話
はじめに お久しぶりです、皆様のサンドバックが帰ってまいりました。 投稿ができていない期間、Nuxtにボコボコにされて裸足で逃げ出し、逃げた先のReactにも強烈な左カウンターをお見舞いされました。 本来であれば、このような場所に投稿することすらはばかられる内容ですが、敢えて書きましょう。 私はフロント開発を炎上させた愚か者です。 なぜ今懺悔するのか Twitterでこんな投稿を見ました。 確かに、実務で得られる経験は、とても大きく得難いものです。 当然、ご迷惑をおかけしてしまうことは、だれであろうとあるでしょう。 ただし、その「ご迷惑」の大きさについて、我々は知っておかなくてはなりません。 見えている地雷を踏んでしまうようなモノ好きもいないでしょう。 特に、この手の地雷は強力ですからね。 塵となって吹き飛んだ私の命が、新たな浅瀬の民の糧となることを祈っています。 具体的に何が起こったのか
ウェブ制作で React(Next) や Vue(Nuxt)、jQuery が最近どれぐらい使われているのか調べてみたdate2022.9.4(Sun.)tagsweb developmentFrontendJavaScript ウェブアプリケーション開発で React や Vue を使うのはよくある話かなと思うのですが、マーケティングや広報活動など広告クリエイティブ系のウェブサイト制作ではどれぐらい使われているのかなと思い、暇つぶしにリサーチしてみました。 調査方法母集団ウェブギャラリーサイトをいくつか見て比較的国内系のセレクトが多そうな https://io3000.com/ さんから 2022 年に紹介されている 175 件と、ウェブサイトのアワードサイトとして有名な https://www.awwwards.com/websites/ さんで 2022.8 以降に Winner と
AIエンジニアが本気で作ったLLM勉強会資料を大公開 〜そのまま使えるハンズオン用コード付き〜 | BLOG - DeNA Engineering
2025.12.05 イベントレポート AIエンジニアが本気で作ったLLM勉強会資料を大公開 〜そのまま使えるハンズオン用コード付き〜 by Tomoki Yoshida #ai #llm #rag はじめに こんにちは、2020年に新卒入社してからDeNAでAIエンジニアをしている吉田（ @birdwatcherYT ）です。 いつもは Qiita に技術記事を発信しているのですが、今回は社内の取り組みとしてエンジニアリングブログを書くことにしました（入社6年目でなにげに初執筆です）。 それでは、2025年12月1日に渋谷オフィスでのオフライン開催とオンラインのハイブリッド形式で開催した社内勉強会の開催レポートをお届けします。 3時間の講義&ハンズオン形式のLLM勉強会を実施 新規AIプロダクトを開発しているPdM&エンジニア向けに、AIをコアとしたプロダクト作りのために必要な知識を詰め
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デジタル庁のサイトやばすぎるwww - Qiita
これだけは押さえよう！住所フォームの作り方 - ケンオールブログ
スタンフォード大学が無料で提供している英語プログラムがすごすぎる...様々な高校生向け教育プログラムをまとめました
好きなことで生きていく - megamouthの葬列
Reactベストプラクティスの宝庫！「bulletproof-react」が勉強になりすぎる件
【夫婦で開発】1年かけて1週間を振り返えるアプリを本気で開発してみた
2022年におけるフロントエンド開発のベースライン
技術選定の失敗 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL
Claude Codeを"優秀な新卒部下"として使い倒す：個人開発爆速化の全ワークフロー
ChatGPTを最強の学習ツールにする方法 - Qiita
個人的 Web フロントエンドスキルの獲得方法 - mizdra's blog
Udemyの番人がおすす - Qiita
Cursor で100日間アプリを作り続けた中で、全然うまくいかなかったこと - フラミナル
【個人開発】爆速な賃貸物件の検索サービスを作った - Qiita
テストの学習へようこそ！ | web.dev
フロントエンドエンジニアが完全にオワコンになった件
SPAセキュリティ入門～PHP Conference Japan 2021
「SPAのタブ永遠に開きっぱなし問題」を更新ボタンを設置せず解決した - 橋本商会
ウェブ制作で React(Next) や Vue(Nuxt)、jQuery が最近どれぐらい使われているのか調べてみた - feb19
zenn.dev/k_yoshiya
news.yahoo.co.jp
av.watch.impress.co.jp
news.yahoo.co.jp
news.yahoo.co.jp
kuruma-news.jp