動機 前回の記事を投稿したことを某SNSで通知したところ、そのSNSでこんなコメントをいただいた。転記する許可を取ったわけでは無いので私なりに要約させていただくと、 なぜそんなトリッキーな書き方をしてまでforを使うのを避けるのか そんな書き方をして可読性を下げるくらいなら素直にforを使う方が良い ということだと理解している。 なるほど、一理ありそうだ。しかし一方で、前回貼ったStackOverflowのQ&Aはなかなかの人気記事（質問に1243ポイント、回答に最大で1559ポイント）なので「多少トリッキーなことをしてでもforを書きたくない！！」という意見をもつプログラマも一定以上いるのだろう。当然私もその1人だ。 ということで、この記事で「なぜそこまで意固地になってまでforを書きたくないのか」を説明することにする。 尚、今回は前回の記事つながりで言語はJavaScriptを使うが、
CORSの仕組みをGIFアニメで分かりやすく解説
クロスオリジンのリクエストを安全にするための同一生成元ポリシーとオリジン間のリソース共有（CORS）の仕組みをGIFアニメで解説した記事を紹介します。 ✋🏼🔥 CS Visualized: CORS by Lydia Hallie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ✋🏼同一生成元ポリシー（Same-Origin Policy）とは 🔥クライアントサイドのCORS 💻サーバーサイドのCORS 🚀プリフライト リクエスト（Preflighted Requests） 🍪認証 はじめに 「Access to fetched to fetched has been blocked by CORS policy error」と赤い文字がコンソールに表示されると、デベロッパーなら誰でもフラストレーションが
ホームページ- EY-Office
小ネタです、JavaScriptで本日の日付をYYYY-MM-DD形式で得るコードは案外面倒です。 本日2023年4月17日なら 2023-04-17 という文字列を得るコードはRubyならTime.now.strftime("%Y-%m-%d")、Pythonならdatetime.today().strftime("%Y-%m-%d")（importは省略しました）と簡単に書けますが、JavaScriptでは案外面倒なのです。 追記： いくつかの間違いのご指摘がありましたので修正しました（2023-04-19）。 DeepAIが生成した画像です いっけん正しいようで間違ったコード new Date().toISOString().slice(0,10) new Date()で本日の日時を取得します toISOString()メソッドは日時データをISO形式の文字列に変換します、例えば 2
おはようございます、なのくろです。年の瀬ですね。 この記事は ABEJA Advent Calendar 2020 の最終日です。 追記：おかげさまで Qiita LGTM賞 を受賞いたしました、ありがとうございます！ 私は2020年01月にABEJAへ入社しました。チームではフロントエンド開発全般を任されています。 参入してちょうど１年が経過しましたので、今年取り組んだことをまとめました。 「フロントエンドを100倍速く」というタイトルは誇張気味なのですが、難しいことはせず、基本的なパフォーマンス改善を素直に実践したという話を書きます。 本稿では事例とやったことを紹介するのみですが、何かしらの知見や改善のきっかけに役立てば幸いです。 サービスについて 話をする前に、どんなサービスを開発しているかについて少しだけ触れます。 ABEJA社では「Insight for Retail」という、小
概要 フロント開発をするとき、レイアウトやアニメーション、その他CSS等の生成をしてくれるWebツールのまとめです。 使いやすそうなツールがあれば追記していく予定です。 ドキュメント類 何はともあれドキュメントは読む癖をつけて、正しい使い方ができるようになるのが良いでしょうということで mdn (Mozilla Developer Network の略) ウェブ標準ドキュメント 個人ブログやQiita内で「こう使うといい！」って書いてあってもその内容自体が間違っている可能性もあるので、より正確な情報を得るにはmdnを参照する Can I use ブラウザごとにCSSやjsの標準関数等が使用可能かどうか一覧表示してくれる ジェネレーター系 Interactive CSS Grid Generator Gridを使ったレイアウトをGUIで作り、コード生成できる そのレイアウトをもとにCodeP
setTimeout は、指定された時間以降に指定されたコードを実行する JavaScript の API です。ブラウザでも Node.js でも広く使われているのですが、実装はまちまちで、色々と特殊な条件も多く、挙動を完璧に理解している人は少ないと思います。この記事では、そんな setTimeout を可能な限り深堀りしてみようと思います。 先に書いておきますが、ものすごくニッチで細かい話ばかり並びます。突然私が、ただ純粋に setTimeout について調べたくなったので、その結果をまとめただけのものです。普通に開発している人には必要のない情報が多くなるでしょう。この記事は基礎から setTimeout を学ぼう、という方には全然向かないと思います。 また、JavaScript のイベントループについてある程度理解していることを前提とします。その詳しい理解には、@PADAone さん
スレッドとプロセスの違いを完全に理解する
はじめに こんにちは、FarStep です。 プログラミングを学ぶ中で、「プロセス」と「スレッド」という言葉を耳にしたことがある方は多いと思います。 しかし、これらの違いを明確に説明できる自信がない方も多いのではないでしょうか。 本記事では、プロセスとスレッドの違いについて、エッセンスを抽出して 解説します。 説明を簡潔にしましたので、本記事は 5 分程度で読み終えることができます。 本記事の内容を自分の言葉で説明できるようになれば、プロセスとスレッドの違いの理解は十分でしょう。 それでは、始めます 🚀 プログラムとは プロセスとスレッドの違いを理解する前に、まずは「プログラム」について理解しましょう。 プログラムとは、プログラミング言語で書かれた一連の命令 のことです。 プログラミング言語の例としては、以下のようなものがあります。 C 言語 Java Python Ruby JavaS
TypeScriptを効率的に独習しよう！ 無料で学べる「TypeScript Deep Dive」日本語版の翻訳者が学習法を解説
TypeScriptは近年JavaScriptに代わってWebフロントエンド開発で利用されているプログラミング言語です。TypeScriptは開発生産性および開発者体験に優れていることから、開発現場で広く採用されています。TypeScriptを学ぶことは、今後のWebフロントエンド開発では、ほぼ必須といって良いでしょう。この記事ではTypeScriptを使うメリット、ならびに「TypeScript Deep Dive 日本語版」を活用してTypeScriptを短期間で学習する方法を紹介します。 はじめに 筆者はSIer出身のITエンジニアです。ゲーム開発会社などを経由して現在は一般企業でエンジニアとして勤務しています。はじめてTypeScriptの重要さを知ったのは、2018年ごろに「TypeScript Deep Dive」を読んだときでした。そして、今後必ず多くの人に役立つと考え、オリ
Published: May 4, 2020 Optimizing for quality of user experience is key to the long-term success of any site on the web. Whether you're a business owner, marketer, or developer, Web Vitals can help you quantify the experience of your site and identify opportunities to improve. Overview Web Vitals is an initiative by Google to provide unified guidance for quality signals that are essential to deliv
たった数分で環境構築が完了！TypeScriptでWebアプリケーション開発ができるフレームワーク「frourio」が本当に手軽だった。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
たった数分で環境構築が完了！TypeScriptでWebアプリケーション開発ができるフレームワーク「frourio」が本当に手軽だった。 こんにちは、エンジニアのづやです。 突然ですがエンジニアのみなさん、TypeScriptに触れた経験はありますか？ TypeScriptはGitHubが毎年発表しているランキングで今年4位に急上昇したくらい、もっともアツいプログラム言語の1つです。 出典：https://octoverse.github.com/ しかし、いざ試してみようと思っても、 フレームワークは何を使えば良い？ どうやって導入したら良い？ など、意外とハードルって高くないですか？ そこで「frourio（フルーリオ）」という画期的なフレームワークを見つけました。こういうのってある程度経験を積んだエンジニアでないと使いこなせない……というケースも多いですよね。 でもfrourioはそ
これは5年かけて JavaScript の技術スタックの間をうろつき、無駄な時間を過ごし、迷い、そしてなんとかローンチにこぎつけた体験の記録です。 自己紹介 初めまして。私は小さなモバイルアプリ開発会社を運営しているエンジニアです。 プログラミングを始めたのと同じくらいのときから、趣味で作曲活動をしています。 今日の作曲は DAW と呼ばれる大型のソフトウェアを利用することがスタンダードになっています。しかしたくさんのプラグインをマシンにインストールしなければならないことや、すぐに立ち上がる作曲ソフトが無いことにフラストレーションを覚え、軽量な MIDI シーケンサーアプリを好んで使っていました。 しかしそれらの多くは Windows2000 の時代から存在し、アップデートされず、その上 Windows 10 以降 MIDI の再生はまともにサポートされなくなりました。 その問題を解決する
2021年度リクルート エンジニアコース新人研修の講義資料です
はいさい！ちゅらデータぬオースティンやいびーん！ 今回の記事は筆者に珍しく、技術紹介ではなく、僕の個人的な意見を書きます。あくまでも、自説です。 React自体は画期的で、プログラミング界に貢献したプロジェクトだと思っていますし、完全に否定したいわけではありません。 Reactに対する違和感＝芽生えては大きく育った種 筆者はReactがとても好きでした。JavaScriptが好きになったきっかけもReactでした。何から何までもReactで書き直して、Custom Hooksを作って、refを子部品に渡したり、バリバリ満喫していました。 Vueも仕事の関係で習得せざるを得なくなったのですが、Vueは最高に大嫌いでした。これならReactで書き直してやるぅ！と思ったりも。 Reactについて社内でも導入を推進したり、React入門の勉強会を開いたりもしています。 しかし、そんな筆者は、最近に
AI Programmer
日本語で指示を出すだけでコードを 自動で生成してくれます。 AI Programmer エンジニアを強力にサポートします。現在プロトタイプを無料で公開しています。AI プログラマーに指示を出してソースコードを生成してみてください。できるだけ具体的に指示を出すと期待通りのコードが書けます。
(社内用ドキュメントの公開版) テストのポリシー 前提として、ユニットテストを導入するコストを、限界まで低くすることを目指す。テストが根付いていない言語環境や文化では、放っておくとテストが書かれないまま実装が進行し、結果としてテスト不可能な巨大な雪だるまが完成する。こうなるとメンテコストが高いE2Eを大量に書かないといけなくなり、テストの実行時間が膨れ上がっていく。 そうなる前に、ユニットテストを書きやすい環境を維持し、ユニットテストとして問題を切り分けられるような環境を維持する。とにかく書きやすさを重視し、一つのユニットテストを書くオーバーヘッドを限界まで下げる。 最初の一つを早い段階で書く 自分の経験的には、ユニットとテストの最初の一つを書いたらあとは自然とその周辺で増えていく。サンプルがあったら人はコピペする。逆にいうと最初の一つを書かない限り一切書かれない。まず一つ用意するのが大事
JavaScriptを大きく変えうる Dataflow Proposals の概要と論点(Call-this, Pipe Operator)
Dataflow Proposals とは 以下の5つのプロポーザルをまとめて Dataflow Proposals と呼んでいる。 Stage 2: Pipe operator Stage 1: Call-this operator Stage 1: Partial application(PFA) Stage 1: Extensions Stage 0: Function.pipe and flow 例えば Pipe operator, Call-this operator, Partial application を組み合わせると、以下のように書けるようになる。（提案段階なので変わる可能性アリ） import { getAuth, getIdToken } from "firebase/auth"; function isPublic(article) { return articl
2022年4月、Deno に以下のバグが報告されました。 fetch API を使って 300KB ぐらいあるファイルをアップロードすると、一定確率でアップロードされたファイルが壊れるというバグの報告です。 報告者によれば、1.20.6 まではバグは発生しておらず、1.21.0 から発生するようになったという事です。1.20.6 の次のリリースが 1.21.0 なので、パッチバージョン1個分まで、バグの発生時期が特定されている状態です。 fetch 周りは自分はほぼ実装していないので「担当範囲ではない」感覚だったので、普通にスルーしていました。 自分に限らず、Deno Land コアチームの誰もこの issue にピンと来る人が居なかったようで、stale ボット (数ヶ月進捗の無い issue を自動的にクローズしようとするボット) に2回もクローズされかけていました。Deno の st
Webフロントエンドの開発効率を高く保つための考え方
これまでいろんな現場でWebフロントエンド開発をしてきて、メンテナンスしやすく効率の高いWebフロントエンド開発をする上で重要になる考えが自分なりにまとまってきたので記事にしてみます。 Worse is Betterという考え方 自分が見てきた中でWebフロントエンドの開発効率が落ちてしまう一番の要因は、きれいで理論的には優れているアーキテクチャを構築しようとしてそれ自体がもたらす複雑性を支えきれないというパターンです。 少し前にフロントエンドにClean Architecture（以下CA、あの同心円の図を指すのは誤用に近いですがここではそれに乗ります）を導入する記事が流行ったと思いますがあんな感じです。ああいったクラスベースでDIが重要となる設計手法はサーバーサイドのJavaでSpringを使うのとは違ってReactがサポートしているものではないため、CAの実現自体に高い設計スキルが必
「かっこいいウェブサイト」とはどのようなものでしょう？ ICS MEDIAを見てくださるみなさんであれば、ダイナミックなアニメーションや3次元的な動きがあるウェブサイトに「おっ」と惹きつけられた経験は一度や二度ではないかと思います。たとえば、スクロールに連動したインタラクティブな動きは冒険するようなワクワクした気持ち、没入感を与えてくれます。 『ポーラ2029年ビジョン』 本記事の前半では、話題になったウェブサイトからかっこいいスクロール演出の事例を取り上げ、それらを分析します。 さらに記事の後半では、「自分でも作ってみたいなぁ、でもどうやって実装しているんだろう？」と悩むみなさんに向け、オリジナルのデモを用いて実装を紹介します。 本記事を読んだ後には、「どうやって実装しているんだろう？」と未知の技術に感じていたスクロールアニメーションも、「こうやっていたのか！」と身近に感じられるようにな
はじめに Webフロントエンド開発の学習において、多くの人がまず最初にconsole.logの使い方を学びます。 console.logはデバッグの際に非常に便利なツールですが、JavaScriptにはこれ以外にも多彩なデバッグ機能が存在します。 通常のconsole.logだけでなく、さまざまなconsoleのメソッドを活用することで、デバッグ作業をより効率的に、かつ迅速に進めることができます。 console.log ブラウザの開発者ツールやNode.jsのコンソール上に、渡された引数を表示します
Tiobe indexを眺めながら、C#とVBが入っていてMicrosoftは強いなーと思ったのだけど、よくみると他の言語もMicrosoftの影響力すごいのではとなったので調べてみた。 https://www.tiobe.com/tiobe-index/ Python 例えば1位のPythonにMicrosoftはかなり力をいれている。象徴的なのが、Pythonのオリジナル開発者の入社 C/C++ Windows上でのC/C++コンパイラではMS C/C++が圧倒的シェアであるし、C++の標準化団体にMicrosoftはGold Memberとして参加している。 https://isocpp.org/about Java 4位のJavaに関してもかなりリソースは割いているわけですが、全体の影響度としてそこまで大きくはないですね。 昨日のブログにも書いたようにOpenJDKビルドを出してい
Webにおける表現はどんどん進化しています。Webサイトには当然のように動画が埋め込まれるようになり、CSSやSVG、canvasでのさまざまな表現が頻繁に見られるようになりました。さらにAR、VRといった表現も台頭し筆者も毎日ワクワクしながらインターネットの海を泳いでいます。 その中であまりメジャーではないと感じるのは「音」による表現です。もちろん音を用いた素晴らしいWebサイトはたくさんありますが、環境の制約が視覚表現以上に大きいため多くは見られないのでしょう。 とはいえ、音と視覚表現を組み合わせることによって表現できる世界観、インタラクション、その他諸々は計り知れないと筆者は思っています。今後オーディオなどの技術の進歩によって上記で述べた制約も乗り越えられるようになるかもしれません。時代を先どりしたい読者に向けて、今回の記事ではWebで音を扱う技術Web Audio APIについてお
[beta] Next.jsクイズ2 • <p>にはなにが表示されるでしょうか？ /app/page.tsx "use client"; import { useCallback, useEffect, useState } from "react"; export default function Home() { const [date, setDate] = useState(); const fetchDate = useCallback(async () => { const response = await fetch("/api"); const data = await response.json(); setDate(data.date); }, []); useEffect(() => { fetchDate(); }, [fetchDate]); return ( <
Webサイトの作り方から、最新のAIの構築まで数多くの講座を学ぶことができる、オンライン学習プラットフォーム「Udemy」が、今年最大のセールを開催します！ 対象となる講座は、プログラミングの基礎からクラウドサービスの実践技法、メタバースの構築にAIに必要な数学理論まで多岐にわたります。それらが1,200円から購入可能となるので、お目当ての講座の購入を迷っていた方にはチャンス到来です。 セール期間は、ブラックフライデーセールが2022年11月18日（金）～11月25日（金）、サイバーセールが11月27日（日）～11月28日（月）。学びたいコトはいろいろあるけれど、期間内に選ぶのがちょっと大変……という方に向け、定番トピックのベストセラー講座から専門的で少しニッチな新着講座まで8つのトピック別におすすめの講座を紹介しますので、ぜひ購入の際の参考にしてください。 ※この記事は、株式会社ベネッセ
TypeScriptの世界を知る 前書き Node.jsエコシステムを体験しよう TypeScriptの書き方 変数 プリミティブ型 複合型 基本的な構文 基本的な型付け 関数 その他の組み込み型・関数 クラス 非同期処理 例外処理 モジュール console.logによるログ出力 中級のテクニック ジェネリクス 関数型指向のプログラミング クラス上級編 リアクティブ 高度なテクニック 環境ごとのTips（共通環境・ブラウザ以外） ソフトウェア開発の環境を考える 基本の環境構築 ライブラリ開発のための環境設定 CLIツール・ウェブサーバー作成のための環境設定 CI（継続的インテグレーション）環境の構築 成果物のデプロイ 使用ライブラリのバージョン管理 環境ごとのTips（ブラウザ環境） ブラウザ環境 ブラウザ関連の組み込み型 Reactの環境構築 create-react-appによる環境
こんにちは。ミーティングテクノロジーという会社で会議ツールを開発している伊勢川です。 仕事で位置情報サービスを軽く調べる機会があって、せっかくなので調べた内容を記事にしたいと思います。 位置情報（地図）サービスといえば、Google Mapを思い浮かべる人も多いのではないでしょうか。私もGoogle Mapのヘビーユーザー＆ファンで、カーナビの代わりとして使ったり、街で見つけた史跡の写真等を2000件以上投稿したりしています。 B2Cのサービスの中ではGoogle Mapが圧倒的な存在感を放っていますが、B2B向けのサービスとなると様相が異なるようです。今回は、ある調査でB2B向けサービスの中ではGoogle Mapより高い評価がついていた「HERE」というサービスについて書きます。 Google Mapよりすごいと言われる所以はなにか Omdiaのレポートによると、B2B市場の位置情報サ
ウェブサイトがJavaScriptとCookieなしで個人を追跡する方法が一発で理解できる「No-JavaScript fingerprinting」
「フィンガープリント」とは、JavaScriptやCookieなしでウェブサイトのユーザーを識別するための固有識別子で、ユーザーの属性・行動・興味・関心といった詳細な情報をもとにマッチする広告を表示するターゲティング広告に用いられます。そんなフィンガープリントが、JavaScriptやCookieを使わずにどうやってユーザーを特定しているのかがよくわかるサイト「No-JavaScript fingerprinting」が公開されています。 No-JavaScript fingerprinting https://noscriptfingerprint.com/ 今回はGoogle ChromeからNo-JavaScript fingerprintingにアクセスしてみます。アクセスする前に、JavaScriptを使用しないようにあらかじめブラウザから設定しておきます。Chromeの右上にあ
2021年になりましたね。 矢倉眞隆（myakura）です。ウェブ標準やブラウザに興味のあるウェブ開発者です。gihyo.jpでは2009年に「Web標準とその周辺技術の学び方」という連載をしていました。 今回は昨年の泉水さんに代わり、2021年のウェブ標準やブラウザの動向を占おうと思います。2020年は世界もブラウザもそれなりに大きな出来事がありましたので、2020年の動きをまずおさえ、そのうえで2021年はどうなるのかを考えてみました。 W3Cのプロセス改訂でLiving Standardライクな仕様の改訂が増えていく W3Cは2020年9月に、新しいプロセス文書と特許ポリシーを公開しました。 新しい文書プロセスはW3Cの組織の定義や標準化の流れ、意思決定などについて定めた文書です。ここ数年は毎年更新されていますが、2020年はこれまでと比べて最大級とプレスリリースでもうたわれています
nodejsを例に解説します。nodejsでは環境変数はprocess.env.環境変数名でとりだせます。また、開発環境・テスト環境・本番環境をそれぞれNODE_ENVという環境変数にdevelopment test productionと入れる文化があります。 アプリケーションコードに自分が今いる環境(開発|ステージング|本番)を意識させない これはつまり、コード内で環境識別変数(今回で言うところのNODE_ENV)によってif分岐を作らないという意味です。各環境にどのような設定が入るかはアプリケーションコード外にその種類分作成しましょう！ bad if(開発環境){ const logger = new Logger({ level: 'debug' }); } else if (ステージング環境){ const logger = new Logger({ level: 'info }
先日、ウェブフロントエンドについて理解するためのただ一つの方法を記事にしました。それは「古い知識に頼るな。公式を読め」でした。たった一つの方法です。これをできない人は必ず行き詰まります。公式をひたすら読み込むことができる人は、たぶん大丈夫でしょう。 今回の記事は、その先にあるものです。 モダンフロントエンドの重要性ここでは少し前回の記事のおさらいをしておきます。 2020年のソフトウェアエンジニアリングの世界ではウェブ技術の重要度は増すばかりです。もちろんウェブ技術というのは広い分野です。ウェブ（HTTP/HTML/JS/CSSその他）によるサーバー・クライアント型のソフトウェアは、莫大な市場を背景にどんどか技術が投入されています。 ウェブ技術の中でも、ここ数年はフロントエンド技術の比重がとても大きくなりました。前回の記事にも書いた通り、少なくとも50%以上の影響力を持っています。 ソフト
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 2021 / 2020 / 2019 JavaScriptライブラリのトレンドを紹介しているbestofjs.orgが、2020年に最もホットであったJavaScriptライブラリのランキングを発表しました。 選考基準は現在のスター数ではなく、『2020年の一年間で増えたスターの数』です。 過去流行っていたけど落ち目となった技術は出てこないので、最近注目されている技術がわかります。 ちなみに2016年の総合ランキング1位はVue.js、2017年の総合ランキング1位はVue.js、2018年の総合ランキング1位はVue.js、2019年
【改訂版発売中！】【完全案件特化】JavaScriptをどこまで学ぶべきかの学習ロードマップ＋頻出パーツの作り方8選 - セカヤサBooks
【改訂版発売中！】【完全案件特化】JavaScriptをどこまで学ぶべきかの学習ロードマップ＋頻出パーツの作り方8選 - セカヤサBooks 【お知らせ】 内容を2024年に向けて更新、追加した改訂版を公開しました！ →https://zenn.dev/hideki_climax/books/0e124eb17a67b3 ・HTML/CSSの次は何を勉強すれば良いの？ ・案件が取れない ・未経験だけど転職を考えている ・フリーランスで実績を積みたい そんなあなたの悩み、全て解決します。 JavaScriptをどこまで深めれば案件が獲得できて、収入に繋がるのか。 フリーランスで7年間エンジニアをしてきた僕が思う 「Web制作領域においてJavaScriptで何ができれば良いか」 をまとめました。 そして圧倒的に頻出のUIパーツ8つの作り方を徹底解説しました。初心者でもすぐに実践できます。実際
自分も教える事が多いので、読み手にどういう風に学んでほしいか、自分がどういう風に伝えるべきか、という視点で読んだ。 1章・イントロダクション そもそもTypeScript とはなにかみたいな話。 コンパイルエラーが出ている状態ではプログラムが完成したとは言えません。 力強い コンパイルエラーをただ避けるのではなく、利用する気持ち で TypeScript プログラミングに臨みましょう。 初心者に型違反の向き合い方を諭す話。IDEの補助になるとか。 TS年表で取り上げてるのが特徴的。exactOptionalProperty を取り上げてたり。 TSの型はランタイムに影響しない、という話を何度も解説している。これは初心者の誤解がとても多いので、必要だと思う。何度いっても、伝わって欲しい人に伝わらないのだが… enum や namespace については意図的に解説しない。過去のTS独自路線だ
GPT-4を使って ぷよぷよ 作ってみたときの感想
以下のツイートに反響があったので、どういう感じで作っていったかと感想をメモ 要約 この記事ではAIのChatGPT（GPT-4）を使用して、JavaScriptでぷよぷよを作成する手法について紹介しています。最初の依頼は「JavaScriptで動くぷよぷよのコードを書いて」とされており、最初に生成されたコードは不完全であったとのことです。 その後、AI側からは、1.ぷよの衝突検出、2.プレイヤーの入力によるぷよの操作、3.ぷよの回転の順に実装するように指示があり、徐々に改善を施していきました。 短時間で開発を終えることができるため、エンジニアとしてのスキルや要求、不具合の言語化能力があれば有効だとされています。現時点では優秀なプログラミングのアシスタントとして機能しています。 エンジニアが直面するストレスや不安を軽減できる可能性があります。一例として、短期間で開発を終えることができるため、
とある休日 娘「ねぇ、パパ！」 娘「switchやろ〜！」 ワイ「おお、ええで！娘ちゃん！」 ワイ「Switchやろう！」 ワイ「ほな、テレビをつけて・・・」 娘「テレビ？」 娘「何を言っているの、パパ？」 娘「TypeScriptのswitch文のことだよ？」 ワイ「ファッ！？」 switch文で何をしたいのか 娘「今ね、ショッピングサイトを構築してるところなの」 ワイ「ほうほう」 娘「それでね、手広く儲けようと思って」 ワイ「おお、ええやんか」 娘「個人ユーザーだけじゃなく、法人ユーザーも登録できるようにしようと思うの」 ワイ「なるほどな」 娘「言語はTypeScriptを使っているんだけど」 娘「ちょっと聞きたいことがあるの」 ワイ「おう、なんでも聞いてや」 あいさつ関数を作っている 娘「ショッピングサイトにログインしたときに・・・」 個人の場合 → 「無職 やめ太郎さん、こんにちは
メルカリのクローンサイトを作りながら、React・Tailwind CSSが学べる本です。
Webの将来はサーバサイドレンダリング（SSR）に回帰していく。Denoが主張するIsomorphic JavaScript（もしくはUniversal JavaScript）とは何か？
Webの将来はサーバサイドレンダリング（SSR）に回帰していく。Denoが主張するIsomorphic JavaScript（もしくはUniversal JavaScript）とは何か？ 静的なHTMLファイルをWebサーバが配信する仕組みから始まったWebは、サーバ側で動的にHTMLを生成するCGIの仕組みや、Webブラウザ上でJavaScriptを実行してインタラクティブな操作を実現するなどの仕組みを得たことでWebアプリケーション基盤へと発展しています。 現在、Webアプリケーションの仕組みとして代表的なものがSPA（Single Page Application）でしょう。 SPAはWebブラウザ上で多くの処理が行われるためユーザーの操作に対する反応が速く、インタラクティブ性の高い快適なWebアプリケーションを実現できる利点があります。 しかし、これからのWebはサーバサイドレンダ
CSSで期待通りに表示されない根本的な原因の見つけ方
CSSで、期待通りに表示されない、なんかずれてる、ブラウザによって表示が異なる、ということがありませんか？ CSSで期待通りに表示されない時に、根本的な原因を見つける方法を紹介します。 その原因がブラウザによるものなのか、CSSの仕様によるものなのか、どのように機能するか知ることで、問題の根本的な原因を見つけることができます。 Finding The Root Cause of a CSS Bug by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 注意: ここでの「バグ」はエラーだけではなく、想定外の挙動・振る舞いです。 はじめに CSSの基本的なバグ ドロップダウンメニューの配置 HTMLの置換要素 オーバーフロー要素とインラインブロック要素 インラインブロック兄弟間のスペース まとめ はじめに
JavaScriptの進化で変わる身近なコーディング習慣 uhyo ( https://twitter.com/uhyo_ ) JavaScriptは歴史が結構長い言語であり、さまざまなベストプラクティスがあります。一方で、JavaScriptは進化を続けており、それに伴ってこれまでに蓄積したベ…
AWS Amplify と Vue.js を使って、基本的な認証と CRUD 操作ができる Web アプリケーションを作る- builders.flash☆ - 変化を求めるデベロッパーを応援するウェブマガジン | AWS
こんにちは、JAWS-UG 浜松支部の松井です。 普段からモノリシックな環境やそれに準じる環境での Web アプリケーションの開発、保守に取り組んでいますが、継続的にサービスを運用していく上では様々な悩みが尽きません。 OS のバージョンアップ、セキュリティパッチはどうするか ? 言語やミドルウェアのバージョンはどうするか ? ステージング、本番等の環境のデプロイはどうするか ? コスト最適化はどうするか ? etc・・・ そこで、サーバーレスアーキテクチャを採用することにより、こう言ったホストマシンやネットワークの管理に起因する悩みを軽減することができます。 とはいえ、いきなりサーバーレスに着手するとしても、 本当にちゃんと動くのか ? 設計、構築が難しいのではないか ? コストはどのくらいかかるのか ? まずどこから手をつければ良いのか ? と言った疑問があると思います。 今回はそう言
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
なぜ我々は頑なにforを避けるのか - Qiita
フロントエンドを100倍速くした（ ＾ω＾） - Qiita
フロント開発をするときにブックマークしておくと役立ちそうなオンラインツールまとめ - Qiita
setTimeout を完璧に理解する
Web Vitals | Articles | web.dev
5年かけて作ったウェブアプリを Hacker News に投稿し、最初の1ドルを得た話
ブラウザ / Browser - Speaker Deck
React、過剰に複雑な代物。 - Qiita
(自分の) JavaScript のユニットテストの書き方
Deno のめっちゃ難しいバグを修正した - Qiita
トレンドウェブサイトから学べ！ JavaScriptで作る本格スクロール演出 - ICS MEDIA
JavaScriptでconsole.logを使用してませんか？
プログラミング言語へのMicrosoftの影響力がヤバい - きしだのHatena
音を操るWeb技術 - Web Audio API入門 - ICS MEDIA
You Don't Need Next.js | ドクセル
Udemyで今年最大のブラックフライデー＆サイバーセール開催！ 今おすすめのトピック8選 - はてなニュース
Reactの環境構築 — 仕事ですぐに使えるTypeScript ドキュメント
Google Mapよりすごい！と噂の位置情報サービスを使ってみた - Qiita
2021年のウェブ標準とブラウザ | gihyo.jp
webアプリ開発における環境変数まわりのベストプラクティス
2020年のウェブフロントエンドエンジニアが学び実践すべきこと｜erukiti
JavaScript ベスト・オブ・ザ・イヤー 2020 - Qiita
プロを目指す人のためのTypeScript 本の感想 #ブルーベリー本
6歳娘「パパ、型による条件分岐はできないの？」 - Qiita
【2024年】React, Tailwind CSSでメルカリクローンサイトを作ろう【入門】
JavaScriptの進化で変わる身近なコーディング習慣
momoha0.vp.bex.jp
fabcross.jp
genussmittel.biz
yumenooheya.hatenablog.com
courrier.jp
www.rockpaint.co.jp