並び順

ブックマーク数

期間指定

  • から
  • まで

41 - 80 件 / 5695件

新着順 人気順

JavaScriptの検索結果41 - 80 件 / 5695件

  • 技術選定の失敗 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL

    技術選定の失敗 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL はじめに 新たに書きました。 MySQLを使っても会社は潰れない 久々に記事を書いたのでどうぞお手柔らかに... 私が過去2年間で行った技術選定の成功と失敗を振り返り、その学びを共有したいと思います。 文才無いので淡々と箇条書きでいきます Twitterエンジニア垢作りました。エンジニアのお友達がいません。 @uncode_jp 注意 意見を押し付けるものではありません。ただ建設的な議論は大事だと思う。 自分の意見は明確に、歯切れのよい表現を意識している。人それぞれだよねみたいな感じに逃げたくない。技術選定に結論はある(過激)。 ただし技術選定にはコンテキストがあり、例えばプロダクトのフェーズや組織の事情によって当然結論は変わる可能性がある。 OSSの開発者さん達は偉大ですごい。あ

      技術選定の失敗 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL
    • 君たちはCursorを本当に使えているか

      2025/03/27追記 Cursor側のアップデートが1ヶ月で進んでいるので、以下追記しました。 本記事の内容を踏まえたあとに読むとよいかと思います! はじめに こんにちは。Builtoという会社で代表 & エンジニアをしている冨田です。 タスク管理をAIがサポートする「サポットさん」など、AIプロダクトを作っています! 「サポットさん」の概要はこちらから: https://lp.sapot-san.com/ 開発にもAIをフル活用しており、そこで得られた知見を共有したいと思います。 具体的には、経験3年以上の現役ソフトウェアエンジニア(生成AIのない時代からコードを書いてきた方々)をターゲットに、本番運用レベルの大規模コードベースでもCursorを活用しコーディング時間を 1/3〜1/5 に縮めている手法をお伝えします。 仕様策定やアプリの機能にもLLMをフル活用していますが、今回は実

        君たちはCursorを本当に使えているか
      • XMLHttpRequest とはなんだったのか | blog.jxck.io

        Intro Fetch API の実装が広まり、IE もリタイアを迎えたことで、今後忘れ去られていくことになるだろう XMLHttpRequest について。 どのように始まり、どのように広まり、どのように使われなくなっていくのか。その間に残した多大な功績を残す。 XMLHttpRequest の始まり この名前は非常に長いため、通常 XHR と略される。 この API は、現在の Web API のように W3C/WHATWG による標準化を経て策定された API ではない。Microsoft によるいわゆる独自実装の API として始まり、後追いで標準化される。 したがって、Web API の中でもかなり異質な命名である XHR が、XmlHttpRequest でも XMLHTTPRequest でもなく XMLHttpRequest である理由も、Microsoft の命名規則に「

          XMLHttpRequest とはなんだったのか | blog.jxck.io
        • 2022年のモダンCSS改

          7/27(水)開催の「TechFeed Experts Night#1 〜 Web標準 / CSS / Webアクセシビリティを語ろう」で発表した内容です https://techfeed.io/events/techfeed-experts-night-20220727 スライド内のリンクがク…

            2022年のモダンCSS改
          • アルゴリズムの世界地図 - Qiita

            こんにちは、square1001 です。 現在は東京大学の学部 1 年生をしています。私は中学 1 年の頃からプログラミングをやっていて、特にアルゴリズムが大好きです。AtCoder をはじめとする 競技プログラミング にも取り組んでいて、中高生のときは 情報オリンピック にも参加していました。 本記事では、アルゴリズムや競技プログラミングに興味がある方、あるいはプログラミングをやっているけどアルゴリズムをよく知らない方に アルゴリズムはどんなもので アルゴリズムを使うとどんな問題が解けて アルゴリズムが地球のように広く、多様で、奥深く、そして楽しいこと を知ってもらおうと思っています。 アルゴリズムの世界へようこそ 時代は 2020 年代に突入し、急速に IT 化 や DX が進んでいく中で、問題を効率的に解くアルゴリズム技術の重要性が、ますます高まっています。そして、アルゴリズムは、世

              アルゴリズムの世界地図 - Qiita
            • Claude Code流出事件|npmソースマップから51万行公開、セキュリティ上の教訓と対策

              AIセーフティを標榜するAnthropicが、ビルド設定ミスで自社ツールのソースコードを丸ごと公開してしまった。未公開機能やロードマップが露出し、セキュリティ管理の教訓として記録に値する。 この記事ではClaude Codeに特化して解説します。Claude Code全般は Claude Code完全ガイド2026:インストールから本番運用まで をご覧ください。 Claude Codeソースコード流出の経緯 ── npmソースマップ混入事件 Anthropicが提供するAIコーディングツール「Claude Code」の中身が丸見えになった。 ハッキングされたわけではない。Anthropicが自分でnpm(JavaScriptのパッケージ管理システム)にコードを公開するとき、「ソースマップ」という本来含めてはいけないファイルを一緒に入れてしまった。いわば設計図を製品と一緒に箱に入れて出荷して

                Claude Code流出事件|npmソースマップから51万行公開、セキュリティ上の教訓と対策
              • ChatGPTを最強の学習ツールにする方法 - Qiita

                質問のコツ 質問内容は抽象的な言葉よりも具体的な言葉を選ぶようにすると、回答の精度がより上がります。 回答内容に対して、更に質問を繰り返して深掘りしていくと理解度が高まり効果的です。 「あなたはプロのエンジニアとして振る舞って下さい」などと最初につけるとよりそれっぽくなります。 文章が長くて途中で終わってしまう場合は、「続き」と入力すると続きからの回答をしてくれます。 わかりやすく解説してもらいたい時は「小学生でもわかるように解説して下さい」などとつけるとわかりやすい回答が返ってきます。 「私はプログラミング初心者です」など自分のレベル感を付けると、レベルに応じた回答になります。 「コードブロックだけで返事をしてください」とつけるとコードだけで回答してくれます。 ロードマップ(カリキュラム)編 まずは、目標に向けてどういった勉強をすべきかというロードマップ(カリキュラム)を提案してもらいま

                  ChatGPTを最強の学習ツールにする方法 - Qiita
                • console.log(); しか使えなかった自分へ。。。 - Qiita

                  Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

                    console.log(); しか使えなかった自分へ。。。 - Qiita
                  • エンジニア向けチートシート集 - Qiita

                    Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 今回はエンジニア向けのチートシート集のまとめを紹介していきます。 チートシートを利用することで 作業効率が上がる 概要が掴みやすい 学習にもなる といった恩恵が得られます。 ただし前提として毎回コードを書くたびに「チートシート集でカンニングすればええや」と思うのではなく「最初はチートシートでカンニングしつつ徐々に体で覚えていく」ことを意識して使うことが大切です。 最終的にはチートシートは見ずに「自分の使える技術」として定着させるための道具だと思って使ってください。 この記事の対象者 エンジニア初心者~中級者 作業効率を上げたい

                      エンジニア向けチートシート集 - Qiita
                    • 【絶対に観るべき】英語のYoutubeチャンネル集【プログラミング】 - Qiita

                      Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? こんにちは。masakichiです。 わたしはプログラミングの学習をしたり、情報収集をする時に好んで動画を閲覧することが多いです。 そんな中、最近英語圏のYoutubeチャンネルのクオリティが有料級並みに高いことに気づきドハマりしています。 ぜひ、プログラミングを学ぶ同志にも視聴してほしいと思い、おすすめのYoutubeチャンネルをまとめました。 なお、わたしはフロントエンドを主としていますので、紹介するチャンネルにも偏りがあります。予め、ご了承のほどよろしくお願いいたします。 The Coding Train 所感 スネークゲームやパ

                        【絶対に観るべき】英語のYoutubeチャンネル集【プログラミング】 - Qiita
                      • 急なTypeScript案件🔥最初の30日間に使い倒したい「コードリーディング支援ツール」 - Qiita

                        この投稿では、「TypeScriptの文法や用語がよく分からない」という問題を解消してくれそうなツールを紹介します。 勉強しながらの見切り発車 最近はTypeScript未経験でも、TypeScript案件にアサインされることが増えてきているように思います。 運がいいと着手前にTypeScriptをじっくり学習する時間を与えられることがあります。しかし、多くのケースでは、見切り発車で開発に参加するのではないでしょうか。 コードリーディングから始まる TypeScript案件は、理解すべき既存のTypeScript/JavaScriptコードがあるケースが多いです。 そのため、 読んで理解すべき既存のTypeScriptコードがある しかし、TypeScriptの知識が乏しい状態でスタート といった事態がよく起きます。 新規プロジェクトでは既存コードがありませんが、ググって出てきたサンプルコ

                          急なTypeScript案件🔥最初の30日間に使い倒したい「コードリーディング支援ツール」 - Qiita
                        • Cloudflare D1 がヤバい

                          まだ検証足りないけど、マジで想像通りのブツなら魂震えるかもしれん…。 Announcing D1: our first SQL database Cloudflare D1 = Edge SQLite Cloudflare D1 は Cloudflare Worker で、つまり CDN Network 上で sqlite が動きます。これだけなら普通の sqlite ホスティングなんですが、もちろん Cloudflare が出すからにはそれだけではなく、CDN Edge 上に Read Replica がバラ撒かれた sqlite になります。ヤバくないですか? 僕はヤバいと思いました。 このヤバさを知るために、Cloudflare が開発した基盤についていくつか抑えておく必要があります。 Durable Objects は CDN 上の Actor モデルを構築できます。この Acto

                            Cloudflare D1 がヤバい
                          • 正規表現の先読み・後読み

                            正規表現の「先読み(lookahead)」「後読み(lookbehind)」について紹介します。 正規表現の「位置へのマッチ」 正規表現は、文字列のパターンマッチに使われます。たとえば [0-9]{4} は数字 4 つが並ぶ文字列にマッチする表現です。 多くの正規表現は「文字列」にマッチしますが、「文字列」ではなく「位置」にマッチする表現があります。これは、アンカーと呼ばれます。また、長さ 0 の文字列にマッチすると考えて、ゼロ幅アサーションとも呼ばれます。 アンカーの例として、^(先頭)$(末尾)\b(単語の境界)などがあります。 この例では、cat にはマッチします。一方、category や concat は cat を含みますが前後が単語の境界になっていないためマッチしません。 先読み 先読み(lookahead)は、位置にマッチする記法の一種です。位置の指定に正規表現を使います。

                              正規表現の先読み・後読み
                            • JavaScriptを遊び尽くす究極のWebサービス・ツールを厳選して大公開! -

                              どうも、まさとらん(@0310lan)です! 今回は、JavaScriptを使ってとにかく遊んだり楽しんだりできるインタラクティブなWebサービスやツールを厳選してご紹介します。 ゲーム体験をしたり、アート作品を作ったり、JavaScriptで開発されたユニークなサービスを利用してじっくりと遊んでみましょう。 Webの楽しい世界にご興味ある方は、ぜひ参考にしてください! ■リアルタイムにコードを書いて戦うオンライン対戦ゲーム 【yare.io】 世界中のプレイヤーと1対1で戦うゲームなのですが、その戦い方はJavaScriptのコードをリアルタイムに書き換えながら自機を操作するというのが大きな特徴です。 見た目は簡素なシューティングゲームですが、実はかなり奥深いストラテジーゲームみたいな要素が詰まっています。 ゲームの大まかな流れとしては、以下のとおりです。 JavaScriptで自機を制

                                JavaScriptを遊び尽くす究極のWebサービス・ツールを厳選して大公開! -
                              • 500点出す! - ゆーすけべー日記

                                「Web Speed Hackathon 2022」という「非常に重たいWebアプリをチューニングして、いかに高速にするかを競う競技」があります。 リモート参加で11月1日から27日まで開催されています。 ここで言う「高速」とはCore Web Vitalsのスコアが高いことを言い、Lighthouseのスコアをベースにした500点満点の争いです。 ISUCONのフロントエンド版ですね。 以前にも同じ課題で「学生向け」と「社内(サイバーエージェント)向け」が行われたらしく、まだ500点を出した人はいません。 そこで僕は「満点を出したい」と思い、初日から、いやむしろフライングしていたからその前から頑張ってきました。 そして、先日(17日)、ついに500点満点を出しました! たぶん、レギュレーションはクリアしている、はずです(もし違反してたらすいません…)。 自動で行われる「Visual Re

                                  500点出す! - ゆーすけべー日記
                                • 【個人開発】正規表現を学ぶ狩りに出ませんか?モンスターを倒しながら正規表現が学べるゲーム「Regex Hunting」を作りました - Qiita

                                  はじめに はじめまして! 個人開発者のハガユウキと申します。 突然ですが、皆さん正規表現はお好きですか? 私は好きです。「複数の文字列を一つのパターンで表現できる」部分にすごく面白味を感じています。 もっといろんな方に正規表現を知っていただきたい、好きになってほしいと思っています。 しかし、現状では2つの課題があると感じています。 正規表現の勉強自体がそもそも面白くない。 正規表現を勉強しても、しばらく使わないと忘れる。 この2つの課題を突破できるサービスは、現状存在しません。 そのため、楽しみながら正規表現を学べるサービスがあれば良いなと思いました。 作りました。 ▼スライド型正規表現学習ゲーム【Regex Hunting】 https://www.regex-hunting.com/ (※) 端末はPC、ブラウザはChromeが推奨です。 サービス概要 Regex Huntingは、モ

                                    【個人開発】正規表現を学ぶ狩りに出ませんか?モンスターを倒しながら正規表現が学べるゲーム「Regex Hunting」を作りました - Qiita
                                  • AI機能搭載のRSSリーダーを作った

                                    なぜRSSリーダーか 情報収集は基本活字で、昔からRSSリーダーをよく使ってきた。Google Readerの時代からFeedly、Miniflux、FreshRSSと渡り歩いたしPocketのようなRead it later系も使ってきたが落ち着いて使い続けられるサービスがなかった (もっとここがこうだったらな〜とか。サービス自体がなくなることもあった) そもそも自分がRSSリーダーを使うのは、情報源を自分でコントロールしたいというのが大きい。SNSのアルゴリズムはエンゲージメントに最適化されているため、気づかないうちにフィルターバブルに閉じ込められる。流れてくる情報は「自分が見たいもの」であって「自分が知るべきもの」とは限らない[1]。RSSリーダーはその対極にある。購読するフィードを自分で選び、アルゴリズムの介在なしに情報が届く。プロアクティブに情報源を設計することで、視野を意図的に

                                      AI機能搭載のRSSリーダーを作った
                                    • 知っておくと仕事が捗る便利ツール17選 - Qiita

                                      はじめに 知っておくと仕事が捗るブラウザ上で動く超便利なツールを17個集めました。 Squoosh Googleが開発した画像変換・圧縮用のWebサービス。 プレビュー画面で変換前後の画質をリアルタイムで確認しながら圧縮設定を調整することができる。 Documatic Documaticは、プロジェクトドキュメントの開発プロセスを削減するためのツール。API リファレンスからユーザー ガイドまで、コード ベースを簡単に文書化できる柔軟なテンプレートとユーザーフレンドリーな編集ツールを提供する。 transform jsonからyamlの形式に変換したい等、あらゆるデータ形式から別の形式に変換するサービス。 jsonからyml、htmxからjsxへの変形、jsonやGraphQLのIDLからTypeScriptのinterfaceまでも、ブラウザ上で生成することができる。 Roadmap.s

                                        知っておくと仕事が捗る便利ツール17選 - Qiita
                                      • 個人的 Web フロントエンドスキルの獲得方法 - mizdra's blog

                                        ここ2年くらいの話なのですが、仕事で「フロントエンド会」というチーム内委員会のようなものを立ち上げて運営しています。元々1人の Web フロントエンド職人がプロダクトの Web フロントエンドの面倒を見ていたのですが、その方が異動されることになったので、残った人で面倒を見ていける体制を作りましょう、というモチベーションで発足した会でした。この話については以前イベントで発表したので、詳しくはこのスライドをご覧下さい。 speakerdeck.com Web フロントエンド職人の異動とともに入社した id:mizdra が Web フロントエンドが得意だったので、ペアプロやペアオペ、定例会などを通じてどんどんスキルや知見を配っていく、という戦略で運営していました。実際に 2 年経過してみてメンバーも徐々にキャッチアップしていって、ちょっとしたパフォーマンス改善をやってみたり、最近 Gulp や

                                          個人的 Web フロントエンドスキルの獲得方法 - mizdra's blog
                                        • 欽ちゃんの仮装大賞 パネル再現ツール

                                          欽ちゃんの仮装大賞で使われていたパネルをwebアプリのツールとして再現してみました。操作方法は A S D キーでカウントアップ、R キーでリセットできます。ヘルプボタンからスマホ向けのボタンを表示する機能がありますので、スマホユーザーの方はそちらのボタンを利用して楽しんでください。

                                          • ブラウザで動くサービスを作るときの技術選定

                                            はじめに 私の仕事は、新規サービスをまるっといい感じに開発するのを委託されることがほとんどです。最近はネイティブアプリを作ることよりもブラウザで動くWebサービスを開発することが多いのですが、案件の規模感や要求によって技術選定を少し変えるようにしています。「こういうときはこう」みたいに一概には言えないのですが、普段使う構成を紹介します。誰かの参考になれば幸いです。 2022/02/10 現在での内容です。 前提 開発を委託される場合の運用費をどうするの問題があります。クライアントにクレカ登録をしてもらうか、こちらで支払って毎月請求するかになります。僕は毎月やるのがめんどくさいのでできるだけ前者に倒している関係上、あまりいろいろなSaaSを組み合わせて作ることをなるべく避けています。 規模感によらず使っているもの 私の場合、以下が使えるとめちゃくちゃ効率よく開発できます。 GCP 好きだから

                                              ブラウザで動くサービスを作るときの技術選定
                                            • 悪名高きスワイプ広告を解析する - Qiita

                                              この記事の概要 ユーザーから嫌われている広告の1つに「スワイプ広告」というものがある。 誤タップをしやすいことが理由だが、あまりにもこの広告だけ誤タップするため調べたところ 実は誤タップしたように見せかけて意図的に広告先に遷移させる広告であるということがわかった。 スワイプ広告とは、左右にスワイプすると画像がついてくるタイプの広告である。 スワイプ広告とは スワイプ広告とは、主にアフィリエイトサイトで見られる広告形式の一つである。 ユーザーは指で画面上の広告を左右にスワイプすることで、広告画像を切り替えることができる。 スワイプによるインタラクティブ性を活かし、複数のメッセージやメディアを使い、魅力的な広告体験を提供することが特徴である。 なぜ悪名高いのか しかし、スワイプ広告はユーザーから嫌われている。その理由は、誤タップを誘発しやすいからである。 誤って広告をタップして画面が遷移してし

                                                悪名高きスワイプ広告を解析する - Qiita
                                              • フロントエンドを集中的に学習できる究極の無料リソースを厳選してみた! -

                                                どうも、まさとらん(@0310lan)です! 今回は、フロントエンド開発者およびこれから学習をしようと考えている人に最適な無料リソースを厳選してご紹介します。 学習コンテンツばかりでなく、開発に便利なサービスやツールなども紹介しつつ、初心者から中級者くらいまで役に立つドキュメントもまとめています。すべて無料なのでWeb開発にご興味ある方はぜひ参考にしてみてください! ■何を学習したらいいのかをロードマップで確認する 【 Developer Roadmaps 】 フロントエンドの学習といっても意外に広範囲なので、まずは何から勉強をすればいいのか迷う人も少なくありません。この「Developer Roadmaps」はWeb開発者が勉強するための学習内容をロードマップとして無償公開しています。 さまざまな種類が用意されていますが、例えばフロントエンドの場合は以下のような感じです。 有名なロードマ

                                                  フロントエンドを集中的に学習できる究極の無料リソースを厳選してみた! -
                                                • ゲーム感覚でプログラミング学べるサービス集 - Qiita

                                                  Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 今回はゲーム感覚でプログラミングを学べるサービスを紹介します。 ゲームを通して学んだ知識をアウトプットできるサービス集を厳選したので、ぜひ学んだ知識を「使える技術」として自分のものにしていただければと思います。 この記事の主な対象者 プログラミング初心者~中級者 基礎文法は学んだけどアウトプットができていない人 フロントエンジニアを目指してる人 楽しみながらプログラミングを学びたい人 ぷよぷよプログラミング まずはじめに紹介するのは、SNSでも話題になった、ぷよぷよを開発しながらプログラミングを学ぶことができる「ぷよぷよプログ

                                                    ゲーム感覚でプログラミング学べるサービス集 - Qiita
                                                  • Python だけで作る Web アプリケーション(フロントエンド編)

                                                    Python だけで作る Web アプリケーション第一弾です。HTML/CSS/JSを使わずに、PythonだけでUIを含むWebアプリケーションを作ります。

                                                      Python だけで作る Web アプリケーション(フロントエンド編)
                                                    • ファイルダウンロード完全マスター | フューチャー技術ブログ

                                                      Real World HTTPでも紹介したネタですが、お仕事で受けている技術コンサル中に質問をいただいた時に、微妙に本で紹介した内容では少し足りなかったので、改めて整理のためにブログ記事にしてみました。次回、本が改訂されることがあればこのブログエントリーの内容も入れて加筆したいと思います。 Real World HTTPだとGoを使っていましたが、フロントとサーバーを同時にいじるので、本エントリーではNext.jsをサンプルに使います。Next.jsでプロジェクトを作って(npx create-next-app@latest –ts)、適当なプロジェクト名を入れてアプリケーションの雛形を作っておいてください。 Next.jsでは、1つのスクリプトファイルを作成すると、それがサーバーAPI(/pages/api以下)と、フロントの画面(/pages/以下のapi以外)になります。Next.j

                                                        ファイルダウンロード完全マスター | フューチャー技術ブログ
                                                      • 株式会社リクルート エンジニアコース新人研修の内容を公開します!(2022年度版) | Recruit Tech Blog

                                                        こんにちは!2022年度エンジニア新人の太田です。毎年反響を頂いているエンジニアコースの研修内容を、今年は受講者の立場から紹介させていただきます。 研修概要 リクルートの新卒エンジニアコースでは、入社した新人を対象に技術研修を行っています。その内容は、実際の開発業務に活かせる技術を扱う「本当に必要な生きた知識・技術」を取り入れたものとなっています。 特筆すべき点として、研修の資料はほとんどが内製であることが挙げられます。そのため、講義中の質疑を通してより深い知識や、開発の現場で培われた経験に触れることができます。 フロントエンド、モバイルアプリ、バックエンド、インフラ、データ分析、セキュリティなど幅広いテーマが扱われるため、知識のインデックスを張ることにもつながります。またハンズオンや競技形式の演習も取り入れられており、実際に手を動かすことで印象に残りやすく、エラーへの対処も学ぶことができ

                                                          株式会社リクルート エンジニアコース新人研修の内容を公開します!(2022年度版) | Recruit Tech Blog
                                                        • “キュピーン猫画像メーカー”初日50万アクセスもサーバ代「0円」 その秘密は

                                                          「InspirationCat」は、動物の画像をアップロードすると、AIで背景を除去して動物を切り抜き、拡大縮小・回転で調整した上で、集中線と重ねて“キュピーン”画像に編集・ダウンロードできるサービス。飼い猫のキュピーン画像を公開していた「むちゃまる(5)」(@neko_muchamaru)さんの投稿からヒントを得て開発したという。 ブラウザ完結の超軽量設計+「Cloudflare Pages」活用 背景除去の処理には本来、サーバ上のGPUで動かすAIモデルが必要だ。「InspirationCat」では、背景除去ライブラリ「@imgly/background-removal」を通じて「ONNX Runtime Web」を利用することで、サーバではなくユーザーの端末上で直接実行した。 ONNX Runtime Webは、AI用の計算をブラウザ内のWebAssemblyやWebGPUで処理する

                                                            “キュピーン猫画像メーカー”初日50万アクセスもサーバ代「0円」 その秘密は
                                                          • エンジニアの心構え

                                                            2023年度リクルート エンジニアコース新人研修の講義資料です

                                                              エンジニアの心構え
                                                            • SPAセキュリティ超入門 | ドクセル

                                                              スライド概要 SPA(Single Page Application)の普及が一層進んでおり、従来型のMPAを知らないウェブ開発者も生まれつつあるようです。SPA対応のフレームワークでは基本的な脆弱性については対策機能が用意されていますが、それにも関わらず、脆弱性診断等で基本的な脆弱性が指摘されるケースはむしろ増えつつあります。 本セッションでは、LaravelとReactで開発したアプリケーションをモデルとして、SQLインジェクション、クロスサイトスクリプティング、認可制御不備等の脆弱性の実例を紹介しながら、現実的な対策について紹介します。LaravelやReact以外のフレームワーク利用者にも役立つ説明を心がけます。 PHPカンファレンス2022での講演資料です。 PHPカンファレンスでの動画URL https://www.youtube.com/watch?v=jZ6sWyGxcCs

                                                                SPAセキュリティ超入門 | ドクセル
                                                              • テストの学習へようこそ!  |  web.dev

                                                                テストの学習へようこそ! コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 このコースでは、ウェブ用のテストの概要と探索について説明します。 このコースで学習する内容は次のとおりです。 テストの基礎 自動テストと手動テスト テストを実施する場所と方法 ベスト プラクティス 何をテストすべきか、誰に責任があるのか、目的そのものとしてではなく、目的を達成するために手段をテストすることを検討する方法など、テストの理念。 このコースには、学習に役立つ簡潔で実用的なサンプルコードも含まれています。 コースのスコープには、Node.js などの環境で実行される、フロントエンドの JavaScript とドキュメント モデル、バックエンドでのライブラリ テストが含まれます。テストの経験はありませんが、JavaScript の基礎知識と Node.js などに関する経験が必

                                                                  テストの学習へようこそ!  |  web.dev
                                                                • 初心者プログラマーのための変数/関数/メソッドの英語命名規則 - Qiita

                                                                  はじめに 「なんか、レビューのたびに変数名を指摘されてる気がする...」 「日本人なんだから、英語で命名とか無理...」 こんなお悩みありませんか? この記事では、「プログラマーが英語の命名で悩んだ時にどうすれば良いか」をフローチャート形式で解説します! これであなたも駆け出しエンジニアを卒業できるかも!? ※本記事はLaravel,Vue.jsのプロジェクトで運用されているルールを元に解説しています。 プロジェクト内だけの内輪ルールも含まれていますので、ご了承ください。 対象者 この記事は下記のような人を対象にしています。 駆け出しエンジニア プログラミング初学者 PHP(Laravel),JavaScript(Vue.js)で英語のネーミングに苦戦中 前提知識 下記のような中学・高校で学ぶ内容については理解していること前提で解説します。悪しからず。 三単現のsって何? 5文型(SV/S

                                                                    初心者プログラマーのための変数/関数/メソッドの英語命名規則 - Qiita
                                                                  • AI時代の仕事術(10方式)

                                                                    本記事は「AI技術を駆使した仕事術」の解説ではありません。逆であり、AI技術の進展に左右されない「仕事の本質」を意識した仕事方式の解説となります。弊社の公式内容ではなく、執筆者が心掛けている内容です。 はじめに 第一に、「AI技術が将来的にどこまで仕事に良いインパクトを与えるのか」、「どのような仕事(タスク)レベルまでAIによって自動化されるのか」は想像が難しいです(とくに実現タイミングの予測も含め、少なくとも私には)。 第二に、AI技術の進展の早さを考えると、現時点(2025年3月末)の「AI技術を駆使した仕事術」を解説しても、おそらく1年後の「2026年3月末」には、その記事内容は陳腐化している可能性が高いでしょう。 (※とはいえ短期的には、「(現時点での)AI技術を駆使した最強の仕事術」の紹介記事にはとても価値があると思います。) 本記事では、AI技術に取り組む弊社にて、私(および私

                                                                      AI時代の仕事術(10方式)
                                                                    • Webフロントエンドパフォーマンスチューニング85選 - Qiita

                                                                      こんにちは、ぬこすけです。 近年、Webフロントエンドではサイトのパフォーマンスの重要性が高まっています。 例えば、GoogleはCore Web Vitalというパフォーマンスに指標を検索結果のランキング要因に組み込みました。 また、近年の某企業が「パフォーマンスの改善に取り組んだ結果、セッション数〇%アップ、CVR〇%アップ...」などの事例は枚挙にいとまがないでしょう。 パフォーマンスチューニングするためには、定量的に計測してボトルネックを探すようなトップダウンなアプローチもあります。 しかしながら、時には千本ノック的にハウツーを片っ端から試していくボトムアップなアプローチも有効になることもあったり、日々のコーディングでパフォーマンスを意識したコードを書くことは大切でしょう。 この記事ではパフォーマンス最適化のハウツーを紹介します。 パフォーマンス改善の施策が思い浮かばない時やフロン

                                                                        Webフロントエンドパフォーマンスチューニング85選 - Qiita
                                                                      • 「引っ越しするけど会社から歩いて10分圏内ってどこまで?」を調べるサービスをつくりました

                                                                        こうです。 新しい住居を探そうとしたとき、「会社から歩いてちょうど 30 分のところに住めたら QOL 高くない?」と思いました。(運動できる、公共交通機関と無縁、買い物もできるetc...) でも ある一点を中心とした移動可能エリアを知りたいとき、円でざっくりと表示をする以外のアプローチがほぼない ことに気がつきました。海外サイトも含めかなり調べてみましたが、類似のサービスは見当たりません。 という経緯でつくったのが How far can I go? というサイト。 ぽちぽちやっていただければわかりますが、結果の精度はかなりのものと思われます。特に道の有無や川沿いなどを検証してもらえるとその効果がすぐにわかるかと。 転職先が決まっているなら、そこにピンを差して交通手段と所要時間を設定してください。HOME'S などの住宅検索サービスには条件絞り込みをしたあとにそれらを地図上にまとめてマ

                                                                          「引っ越しするけど会社から歩いて10分圏内ってどこまで?」を調べるサービスをつくりました
                                                                        • 電子情報学特論:Chromiumのアーキテクチャを解き明かす

                                                                          このブラウザ バージョンのサポートは終了しました。サポートされているブラウザにアップグレードしてください。

                                                                            電子情報学特論:Chromiumのアーキテクチャを解き明かす
                                                                          • 60分で学ぶ最新Webフロントエンド

                                                                            2026/04/16 に「技育CAMPアカデミア」で話したスライドです。2025 年のはてなインターンの講義資料 (https://speakerdeck.com/hatena/internship-2025-frontend) に手を加えたものになってます。 https://talent.sup…

                                                                              60分で学ぶ最新Webフロントエンド
                                                                            • フロントエンドエンジニアが知るべきキャッシュを理解する

                                                                              キャッシュは、CPUのバスやネットワークなど様々な情報伝達経路において、ある領域から他の領域へ情報を転送する際、その転送遅延を極力隠蔽し転送効率を向上するために考案された記憶階層の実現手段である。(引用: フリー百科事典『ウィキペディア(Wikipedia)』) こんにちは、@kaa_a_zu です。私たちエンジニアは、「キャッシュ」というワードをよく口にしています。それはインフラの設計をしている時かもしれないし、表示されるコンテンツが変わらない時かもしれないし、パフォーマンスの改善をしている時かもしれません。普段何気なく使っている「キャッシュ」とは一体何なのでしょうか。この記事は、そんな「(Webフロントエンドを触るエンジニアが知るべき)キャッシュ」について、どんなものがあるのかがちょっと分かったという状態になることを目的に書いています。

                                                                                フロントエンドエンジニアが知るべきキャッシュを理解する
                                                                              • 【CSS】「これどうやる?」アップルやテスラのWebレイアウト再現テクニック集 | PhotoshopVIP

                                                                                AppleやNike、Teslaといった誰もが知る大企業のWebレイアウトを、CSSで再現するテクニック集がTwitterで投稿され、話題となっています。 CSSのみで表現できる目からウロコのテクニックが中心で、あの驚くようなエフェクトも実はシンプルな数行のコードで表現されていたりします。 コピペできるCSSコードと一緒に、デモサンプルも確認してみましょう。CSSで解決できるテクニック、増えています。 「これどうやる?」アップルやナイキなど大企業Webサイトで利用中のレイアウト再現CSSテクニック集 ノーコードでレスポンシブなデザインを構築できる Builder.io のCEO @Steve8708は、有名サイトで使われている魅力的なレイアウトが、どのように作成されているのか、コピー用のサンプルコードと一緒にみじかい動画で詳しく紹介しています。 ユーザーの視線を奪うアニメーションやレイアウ

                                                                                  【CSS】「これどうやる?」アップルやテスラのWebレイアウト再現テクニック集 | PhotoshopVIP
                                                                                • プログラミングスクールの講師を2年間続けて限界が来て辞めた話 - Qiita

                                                                                  Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 某プログラミングスクールで二年間講師をしてました。 受講生の方からの評価点は平均より高く、最終的には全インストラクターの中から代表に選ばれる立場にまでなりました。 始めた経緯 もともと、プログラミングスクールをいつか開きたいと思っていたこともあり、業務委託契約で経験が積めそうなところに応募。 即採用していただき、正社員で働く傍、副業としてプログラミング講師に。 エンジニア歴は当時は5年 得意な言語はPHPのみでした。 コロナ禍で全てが変わった 特定を避ける為に細かな時期は記述しませんが、この復業を始めてから今も尚世界を苦しめて

                                                                                    プログラミングスクールの講師を2年間続けて限界が来て辞めた話 - Qiita

                                                                                  新着記事