マイクロソフト、初心者向け生成AI学習教材「生成AIアプリケーションの開発を始めるために必要な全知識を学べる12講座」を無償公開
マイクロソフト、初心者向け生成AI学習教材「生成AIアプリケーションの開発を始めるために必要な全知識を学べる12講座」を無償公開 コースの内容には、大規模言語モデル（LLM）がどのように動くかを理解する。「生成 AI と大規模言語モデルの紹介」、ユースケースに適したAIモデルを選択できるようにする「様々なLLMの調査と比較」、プロンプトの構造と使用法の理解のための「プロンプト・エンジニアリングの基礎」、埋め込み技術を利用したデータ検索アプリケーションを構築する「Vector Databasesを利用した検索アプリケーションの構築」、外部APIからデータを取得するためFunction Callingを設定する「Function Callingとの統合」など、入門的な内容から高度なアプリケーションの開発まで多岐にわたるレッスンが用意されています。 レッスン内容は日本語による説明と図で構成 各レ
「JavaScriptで要素をドラッグして移動する簡単な方法」という記事が初耳だらけだった件 - Qiita
はじめに まず↓の記事を見てない方はぜひ見てください！ 自分にとってはこの記事には「えっ、ナニコレ！」なテクニックが多く、特に解説もなかったのでいろいろ調べてたら休日が消えてました... なのでその時間の供養もかねて、自分が知らなかった部分を中心に、僭越ながら元記事の解説を書いてみたいと思います。 ちなみに、以下が元記事のコードそのままを実装したものです。たしかに掲載コードだけで要素がグリグリ動きますね。 See the Pen js-drag-move-original by www-tacos (@www-tacos) on CodePen. 初耳1: $img まずコードのここ <img id="$img" src="https://js.cx/clipart/ball.svg" width="40" height="40"> <script> $img.onpointermove
なぜ仮想 DOM という概念が俺達の魂を震えさせるのか - Qiita から 5 年経ち、 仮想 DOM を備えた React やそれを採用した Vue や他のライブラリも市民権を得たように思います。 有用な技術が市民権を得る、というのはエコシステムが花開くことでもあります。新しいプロダクトを作る際の技術選定において、 TypeScript + React が常に正解というわけではないですが、このスタックはかなり強力だという手応えがあります。 このスタックは得意のウェブフロントエンドは勿論、それ以外もとりあえず 80 点ぐらいの品質でプロトタイピングできる、というようなエコシステムになってきたような肌感があります。 モダンフロントエンドだと TypeScript と Webpack は採用しているのを前提として、本記事では React を軸にその技術を活かすために、次の 6 個の技術を紹介
Kindleの蔵書が1万冊を超えてきて、そろそろ蔵書管理したくなり、 蔵書一覧を取得する方法を調べたので、まとめておく。 概要 蔵書一覧の取得方法としては大きく2つあり、 コンテンツと端末の管理ページからスクレイピングする方法と、 Kindle Cloud Readerが使っているWeb SQL Databaseのクライアント側のDBからそのまま取得する方法がある。 後者のほうが簡単なため、ここでは後者の方法について記載する。 （前者の方法が知りたい方は、https://qiita.com/yshr1982/items/072e8b44d456f6d9358bなどを参考にしてください。) // 追記 上記の２つの方法以外のやり方を情報共有してもらったので追記。 @error_401さんから頂いた情報によると Kindle for PCを利用している場合、本の情報が入ったXMLが生成されるた
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
日本車のほとんどは「役に立つけど意味がない」 山口周氏：問題を分析的に、ロジカルに解いていくっていうことの価値が、どんどん減っていくだろうなということを考えるためのフレームがあります。 世の中で売れているモノっていうには必ず、「役に立つ」っていうベネフィットか、「意味がある」っていうベネフィット、どちらかがあります。「役にも立たないし意味もない」っていう商品は、世の中に存在できません。 これマーケティングの専門用語でちょっと難しく言うと機能的便益、functional benefitと言います。一方で「意味がある」っていうのは、マーケティングの用語で言うと情緒的な便益とか自己実現的便益、personal benefitとか言います。僕は「役に立つから買ってる」「僕にとって意味があるから買ってる」と、そういう言い方のほうが平たくていいんじゃないかなと思いますが。 自動車産業を当てはめてみると
なぜ家事は紛争を呼ぶのか 私の周りも結婚・出産をする友人が増えました。 そこで必ずと言っていいほど上がる議題がこれ。 「夫（妻）がぜんっぜん家事をやらない」 日本で婚姻制度が発足してから早100年。 これだけ長い年月「夫婦」という形が取られているのに、なぜこんなにも初歩的な不満が世に蔓延するのでしょう。 私も妻と結婚して5年経ちます。 知人からの愚痴なども収集した結果、いくつかの原因が考えられました。 その１． 人は「自分が一番やってる」と思う生き物である これは私がサラリーマンとして働いてて出した結論です。 殆どの人が「自分は結構仕事してる」と思いがちです。（これはマジ） 少なくとも同等の仕事量だとまず間違いなく「自分のほうが仕事してる」と勘違いします。 そのため、仮に夫婦が全く同じ量の家事を分担してたとしても、 それが正確に見える化されない限り、必ず「俺(私)のほうが家事をやってる」と
サーバーレスアーキテクチャ再考 - ゆううきブログ
2014年にAWS Lambdaが登場し、Functionを単位としてアプリケーションを実行する基盤をFunction as a Service(以下、FaaS)と呼ぶようになった。 そして、同時にサーバーレスアーキテクチャ、またはサーバーレスコンピューティングと呼ばれる新しいコンセプトが普及するに至った。 当初、そのコンセプトが一体何を示すかが定まっていなかったために議論が巻き起こり、今現在では一定の理解に着地し、議論が落ち着いているようにみえる。 しかし、サーバーレスという名付けが悪いということで議論が着地したようにみえていることにわずかに疑問を覚えたために、2019年の今、これらの流れを振り返ってみて、サーバーレスアーキテクチャとは何かを改めて考えてみる。 サーバーレスとの個人的関わり サーバーレスアーキテクチャという名を僕がはじめて耳にしたのはAWS Lambdaが登場した2015
このリストは何？ MDN web docs を、あたかも書籍の目次かのごとく整理しなおしたものです。それぞれ MDN web docs の記事へリンクしています。 なぜこれが必要になったかというと、人材市場でフロントエンドエンジニアが少なすぎる現状をどうにかするべく教育体制を整えるところから考え始めたのですが、それならまずは日頃お世話になっている MDN web docs を教材として扱いたいなと思ったからです。慣れてきてもよく参照するし「アレどこだっけなぁ？」を軽減もしやすいかなって。 MDN web docs は内容そのものはかなり充実しているものの、リンクがあらゆる方向に張り巡らせられており ある一定の流れに沿って読む ということが少々難しい側面もあります。特に初学者にとっては、迷子になりやすいかもしれません。 ですので、初学者でも学習しやすいように MDN web docs 全体の
この文章の背景 この文章はプライベートメソッドのテストを書くべきか否かに関する knsmr さんのご質問に対して 2013/03/13 に QA＠IT で回答したものです。残念ながらQA＠IT のサービス終了（2020/02/28）と共にアクセスできなくなってしまったため、運営を行っていたアイティメディア株式会社様、開発を行っていた永和システムマネジメント様、そして質問をされた knsmr さんに許可とご協力をいただき、当時の回答をサルベージしてブログに転載する運びとなりました。 プライベートメソッドのテストはよく議論になるテーマですので、当時の回答を再編集し、knsmr さんのご質問も含め、ご利用いただきやすいライセンス CC BY（クリエイティブ・コモンズ — 表示 4.0 国際 — CC BY 4.0） で公開いたします。 目次 この文章の背景 目次 knsmr さんのご質問 私の回
を読んで思い出したのでご紹介です。 元の記事と同様に以下の関数 sum について、 function sum(nums, acc = 0) { console.log({ nums, acc }); if (nums.length === 0) return 0; if (nums.length === 1) return nums[0]; return sum(nums.slice(1), acc + nums[0]); } この関数sumの引数 (nums と acc) の呼び出しごとの変化を見たい場合は、所謂プリントデバッグや debugger を使うのは一般的なテクニックとしてよく知られていますが、このような関数呼び出し時の引数を知りたい場合はmonitor(function)という関数を使うことで同様の効果を得ることが出来ます。 この場合は monitor(sum)とした後に、関
JavaScript: 通常の関数とアロー関数の違いは「書き方だけ」ではない。異なる性質が10個ほどある。 - Qiita
本稿では、アロー関数とfunctionキーワードを使って定義される関数を区別するため、functionキーワードを使うほうの関数を「通常関数」と呼ぶことにします。英文で見かけるregular functionの翻訳になりますが、これは公式の用語ではなく、解説の便宜上のものとご理解頂ければと思います。単に「関数」というときは、通常関数とアロー関数どちらも指すこととします。 関数の歴史 歴史的に見ると、通常関数は古くからある言語機能であるのに対し、アロー関数は新しいものです。アロー関数はES2015(ES6)で導入されました。導入にあたっては、関数を短く書きたい、thisを束縛したくないという2つの理由があります。 通常関数とアロー関数の性質の違い 通常関数とアロー関数では、構文が違うというのは見て分かると思います。構文についての違いはここでは解説しません。 ここでは、文法以外の相違点をひとつ
注意 serveoがサービス停止中です。 みんな大好きcloud functionには欠点があります。 それは、実際にコードをデプロイしないと、httpsで公開できないこと。 そのため、slackのコマンドを作ったり、ラズベリーパイとかを開発するのに不便だったりします。 以前私はngrokというcliアプリを使っていました。 とても使いやすく、ユーザー登録＋ngrokのインストール＋セットアップだけで使い始めることができます。 お金を払えば固定URLもゲットできます。 しかし、今回もっと良いものを見つけたので紹介します。 serveoです。 なんとこのserveoインストールもセットアップも不要です。 ターミナルで、以下のように ssh -R 80:localhost:3000 serveo.net と打つだけで自分のPCのlocalhost:3000を、固定URLでhttpsとして公開し
Node.jsのMySQLパッケージにおけるエスケープ処理だけでは防げない「隠れた」SQLインジェクション - Flatt Security Blog
※本記事は筆者styprが英語で執筆した記事を株式会社Flatt Security社内で日本語に翻訳したものになります。 TL;DR Node.jsのエコシステムで最も人気のあるMySQLパッケージの一つである mysqljs/mysql (https://github.com/mysqljs/mysql)において、クエリのエスケープ関数の予期せぬ動作がSQLインジェクションを引き起こす可能性があることが判明しました。 通常、クエリのエスケープ関数やプレースホルダはSQLインジェクションを防ぐことが知られています。しかし、mysqljs/mysql は、値の種類によってエスケープ方法が異なることが知られており、攻撃者が異なる値の種類でパラメータを渡すと、最終的に予期せぬ動作を引き起こす可能性があります。予期せぬ動作とは、バグのような動作やSQLインジェクションなどです。 ほぼすべてのオンラ
1. 第3次AIブームの到来 米Google DeepMindが開発した人工知能（AI）の囲碁プログラム「AlphaGo」が世界トップレベルの実力を持つ韓国のプロ棋士、李世ドル（イ・セドル）九段に4勝1敗と大きく勝ち越したことが着火剤となり、2015年より第3次AIブームへと突入した。(ちなみにAIが誕生したのは1950～1960年代で第1次AIブームの到来) 1.1 余談になるがAlphaGo(4億円の知能)はなぜすごいのか？ AlphaGoがそれ以前のチェスや将棋のAIと異なるのは、 畳み込みニューラルネットワーク（CNN） を応用している点だ。このCNNはさらに強化学習を行い、自分自身と対局を数千万回も繰り返した。 間違っていたらすみません、、、、 1.2 ChatGPTによる生成AIのブーム ChatGPTに代表されるLLMは以前から開発競争が繰り広げられていた。 GPT1は201
今回は、以下のアニメーションのように、Google スプレッドシートに情報を入力すると、ChatGPTの回答を自動的に取得してくれる関数の作り方をご紹介します。 サンプルのスプレッドシートも公開しますので、以下のリンクからよかったら見てみてください。 ChatGPT関数サンプル Google スプレッドシートに情報を入力すると、ChatGPTの回答を自動的に取得してくれる関数の活用事例です。
tl;tr ChatGPTの新機能「Function calling」はすごい。 今後注目される機能になっていくと思われる。 ChatGPTの新機能「Function calling」について 6/13のアップデートで、ChatGPTに新たな機能「Function calling」が実装 されました。 「Function calling」は、ChatGPTに「呼び出すことができる関数」を教えておく機能で、ChatGPTがこの関数を呼び出せるようになります。 この機能を活用すると、ChatGPTを経由することで、曖昧な指示でも関数が実行できるようになります。 「Function calling」の概要と可能性 概要 ChatGPTに呼び出せる「functions」をパラメーターとして渡します。 この状態で通常通りChatGPTに送信をすると、関数の呼び出しを要求するレスポンスが帰るようになり
[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 ( <
すえなみチャンス暑気払い 2019夏で話した、設計要素を分解して理解してみようという話です。 Simplicity makes easy to understand.
Published on July 28, 2020 Stefan on Mastodon Reading time: 10 minutes More on TypeScript, React, Preact This list is a collection of component patterns for React when working with TypeScript. See them as an extension to the TypeScript + React Guide that deals with overall concepts and types. This list has been heavily inspired by chantastic’s original React patterns list. Contrary to chantastic’s
Takuma HANATANI2020-05-20Engineering Manager at LINE Corp. @potato4d フロントエンド開発センター(通称: UIT)の花谷(@potato4d)です。 この記事では、 ESModule の仕様であり、現在の JavaScript を用いた開発で必須である import / export 構文について、 default export ではなく named export を利用すべきである理由について紹介します。 前提知識について なお、本記事は以下を前提知識として、詳細の説明を省きます。 ESModule と import / export についての基本 CommonJS module との違い esModuleInterop 周り(CJS → ESM の import については扱わないため) プロジェクトで使われている技
Whisper、ChatGPTを活用した、テキスト入力不要な新感覚メモ日記アプリの紹介と、開発における学び｜にょす
日常生活の中で生まれた「できごと」や「思ったこと」を、楽しく記録できるメモ日記アプリを開発しました！ しゃべったら、あとは丸投げして良い感じにメモを残してくれる「シャべマル」です！（笑） シャべマルの紹介具体的には、、 絵文字で見返せるメモアプリあんまりないですが、良いですよ…！音声入力でメモ内容を作成。かなり高精度な音声認識モデル（Whisper）を用いているので、想像以上にちゃんと文字起こししてくれます！ 「今日あったこと」など、日記として利用するのもオススメです。1日を振り返る機会になって、それが後から振り返りできるので、あの時こんなこと考えていたなー、といった発見につながるはずです！ そして個人的にここが目玉なのですが、文字起こしされたメモには、「タイトル」「絵文字アイコン」「感情アイコン」「カテゴリ」が自動で紐づきます！ これ何が良いかというと、圧倒的に見返しやすくなるんですよね
この記事について JavaScriptはお好きですか？ Reactなどフロンドエンドを中心に人気の言語なので、触ってる人はたくさんいると思います。 奥深くて自分も好きな言語ですが、結構なんとなくで触っていたりしませんか？ 今回は自分が後輩によく聞かれた事や、自分が引っかかった事をたくさん書いていきます。 つまり基本的には初心者向け、よくても中級者向けです。 何か一個でも知らない事があれば御の字のつもりで書いたので、ぜひ気軽に読んでください！ JavaScript編 略称はJS、Javaダメぜったい いなさそうなのに稀にいるという・・ Web開発から入ってプログラムを広く知らない場合に発生しやすい？ Javaは全く別に王者がいるので、万が一使っていたららやめましょう。 略称は JS（じぇーえす） でお願いします。 データ型、Object Objectはキーと値をいくつも持てるJSのデータ型で
ぼくのかんがえたさいきょうのGAS開発手法2023
前提clasp の制約、Script API の考え方、Google Drive の考え方に素直に従うその条件下である程度モダンな開発環境での開発を目指す 可能ならコードは VCS で管理する（pull-req など）ドキュメントベースで共同作業に向いた手法で開発を進める特にカジュアルに始めやすい Google Apps Script は悪い意味での属人化まっしぐらになりやすい。これが長期間の業務に影響しないような、ワンショットのものなら別にそれでもよいが、これが誰かに引き継がなければいけないような状況が生まれると一気に地獄みが増してしまうので、そうなってしまう前により良い開発手法を考えておきたい。 考慮したことGAS は素朴に作ると Script 本体の構造がそれを利用する container （例えば Spreadsheet）のデータ構造などと密結合になってしまう。この状態のままコード
Promises in JavaScript can seem a bit daunting at first, but understanding what's happening under the hood can make them much more approachable. In this blog post, we'll dive deep into some of the inner workings of promises and explore how they enable non-blocking asynchronous tasks in JavaScript. I'm still working on making this blog better on mobile devices, mobile browsers don't always render t
はじめに ファイルの末尾には改行を入れたほうが良いのでしょうか。 「ファイル 末尾 改行 POSIX」等で調べると、規格の観点から改行を入れた方がいいという話が出てくるのですが、今回はgitの仕組みの観点からも改行を入れたほうが良いという話をします。 GitHub上での末尾改行の警告 例えば末尾に改行のないこんなファイルが有るとし、commitしてGitHubにpushすると以下のような表示になります export function hello(name: string) { return `Hello, ${name}!`; }
こんにちは！小田島です。前回の「コールバック編」を納稿したとき、アイキャッチ画像はJavaScriptのロゴにタイトルの文字を入れただけというとんでもないやっつけ仕事だったのですが、さくナレ編集部の方に「シリーズで理解が深まる」というすごい煽り文句がついたとてもカッコいい画像に差し替えていただきました。アイキャッチ詐欺にならないようにがんばります。 非同期処理シリーズの2回目はPromiseについての説明です。前回はコールバックについて説明しましたが、Promiseを使うことでどのように便利になったのでしょうか。それでは見ていきましょう！今回はコードが多いのでかなり分量が多く感じられるかもしれませんが、実際はあまり大したことはありません。 今回の目的 今回説明するのはPromiseです。これはFutureパターン（Promiseパターン）というデザインパターンの一種で、ECMAScript
小ネタ。chromeで動作確認 何となく使っていたので改めて勉強してみたら知らなかったことなどのまとめ this 関数の呼び出し元のオブジェクトがthisになる。ただし、呼び出し元のオブジェクトの指定がない場合は、windowオブジェクトがセットされる。ただし、厳格モードuse strictの場合はundefinedがセットされる const foo = { bar: function() { // 呼び出し元はfoo.bar() console.log(this); // foo object const baz = function() { // 呼び出し元はbaz()でオブジェクトの指定がない console.log(this); // window object } baz(); const qux = function() { 'use strict'; // 呼び出し元はqux
ブラウザで長いループや、重い処理をともなうループを回したいとき、同期的にJavaScriptを実行するとメインスレッドがブロックしてしまうので、ちょっとずつ細切れに分割して実行したい、ということがある。 昨日久しぶりに書いたら新たなパターンと出会ったので、これまでにどう書いてて今回どうなったかメモ。 setTimeoutする 以前(10年前とか)はこんなのをよく書いていた。 itemsがでかいArrayで、console.logがすごく重い処理だとして読んでください。 function iterateHeavyTask(items) { const startAt = new Date(); while (items.length > 0 && new Date().getTime() - startAt < 10) { console.log(items.shift()); } if (
import "./App.css"; import { Link, Route, Switch } from "wouter"; function Nav() { return ( <nav> <Link to="/">Home</Link> <br /> <Link to="/about">About</Link> </nav> ); } function Home() { return ( <div className="App"> <h2>Home</h2> <Nav /> </div> ); } function About() { return ( <div className="App"> <h2>About</h2> <Nav /> </div> ); } function App() { return ( <> <Switch> <Route path="/" compo
JavaScriptのデザインパターンについて
どうもoreoです。 今回はモダンなJavaScript開発環境で役立つデザインパターンを紹介します。 この記事は、JavaScript Patterns WorkshopとPatterns.devを参考にしています。 有名な「Java言語で学ぶデザインパターン入門」などでは、古典的な23個のデザインパターンが紹介されていますが、JavaScript Patterns WorkshopではPatterns.devをベースとして、モダンなJavaScriptにおける6つのデザインパターンについて言及されています。この記事ではそれらについてまとめてみたいと思います！ ※本記事中のコードは、JavaScript Patterns WorkshopとPatterns.devから引用させていただいております。 1 Design Patternsとは？ デザインパターンとは、ソフトウェア開発で繰り返し
はじめに このページは、プロトアウトスタジオのAPIにつなげる授業に関連して、よりAPIの多様さ、広がりを深掘りします。 まだ、JavaScriptに慣れていなくても「なるべくシンプルにAPIを体験する」ことを目指して、 public-apis というフリーで使えるAPIを集めてリストにしているサイトから、手順が少なくAPIにつなげられるシンプルに取得できるものを中心に、直接取得できるURL・Node.js axios await/async ソースコードを一つ一つトライしています。 慣れてきたら、自分で public-apis のサイトを直接読んでみて、巡ってみましょう！ APIピックアップ数 最終更新日 2020/6/8 104 個のAPIをピックアップ中！ 参考資料 public-apis の豊富なAPIリストをベースにAPIつなげていきます。 ピックアップルール 手順が少なくAPI
数列の和を求めるプログラムを作成することになり、意気揚々と以下のようなプログラムを書いたという状況を想像して下さい。 function sum(nums, acc = 0) { if (nums.length === 0) return 0; if (nums.length === 1) return nums[0]; return sum(nums.slice(1), acc + nums[0]); } const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; console.log(sum(nums)); // expected: 55 一見すると何も問題なさそうに見えるプログラムですが、実はバグがあります (皆さん分かりますか?) *1。実際に上記プログラムを実行すると 55 ではなく 10 が出力されます。 こうした場面に遭遇すると、自然と sum
TypeScript Tutorial For Beginners: Your Friendly Guide
What is TypeScript and why you may want to use it? Learn more with this TypeScript tutorial for beginners and start adding types to your JavaScript code! TypeScript tutorial for beginners: who this guide is for The following guide is a TypeScript tutorial for JavaScript developers interested in learning more about TypeScript. That means a decent knowledge of "vanilla" JavaScript is appreciated, ev
デベロッパーのコミュニティには、実装に役立つテクニックやヒントが満載です。その中から特に有用なJavaScriptのテクニックとヒントを紹介します。 8 JavaScript Tips & Tricks That No One Teaches 🚀 by Garvit Motwani (@GarvitMotwani) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. JavaScriptにおける機能継承 2. .map()の置換 3. 数値から文字列に、文字列から数値に 4. lengthを使用して配列のサイズを変更したり、空にする 5. 配列の分割で値を入れ替える 6. 配列から重複を削除する 7. ループのコードを少なくする 8. パフォーマンス 終わりに はじめに JavaScriptは世界で最もクールな言語
テキストエディタ「Vim」が30周年を迎える
by Floyd Wilde コマンドラインベースで動作するテキストエディタ「Vim」が1991年のリリースから30周年を迎えました。ソフトウェア開発者のアレックス・ボールドウィン氏は、いかにしてVimが30年間愛され続けたのかについて解説しています。 welcome home : vim online https://www.vim.org/ Vim at 30: Here's Why It's Still Relevant - Simple Thread https://www.simplethread.com/vim-at-30-heres-why-its-still-relevant/ ボールドウィン氏は、Vimが使われ続ける理由と考えられる点をいくつか挙げています。 1.マウス不要 例えば、メモ帳のような典型的なモードレスエディターでは、テキストの入力という1つのモードだけが使用
対象読者と目的 非同期処理の実装方法は知っているが、仕組みを詳しく知らないのでベストプラクティスがわからないときがある 実行順序の保証がよくわからないので自信をもってデプロイできない変更がある より詳しい仕組みを理解することでより計画的な実装をできるようになりたい という動機で書かれた記事です。同様の課題を抱える人を対象読者として想定しています。 目次 実行モデルとタスクキュー Promise async/await AbortSignal, Event, Async Context WHATWG Streams / Node.js Streams (執筆中) 未定 用語に関する注意 前々回定義した以下の用語を今回も使います。 1 tick ... タスクキューが1周すること。 1 microtick ... マイクロタスクキューが1周すること。 これらの単位は非同期処理の間の相対的な優先
基盤チームの右京です。 昨今はフロントエンドのアプリケーションもリッチになり、ブラウザ上で実行されるコードが行うことの範囲も増えてきました。一方で多くのことを実装できてしまうのはリスクでもあり、BASE でも問題となることがあります。 その中でも「開発環境の URL」や「デバッグ機能の存在」ような環境毎に異なる情報は、特に意図せずに漏れやすいものだと考えています。これらはコードを記述する際に、実装方法を知識として知っていればその多くが回避可能です。この記事ではその実装例を解説しています。 コードから漏れる情報 例えば、次のようなコードがあるとします。 function debug() { // 開発環境の host であればデバッグ機能を有効にする return location.host === 'dev.example.com'; } なんの変哲もないようなコードに見えますが、ブラウザ
クリックできるボタンを実装するとき、HTMLの何をよく使用しますか？ buttonタグ、もしくはdivタグ？ divを使用してはいけない理由、buttonを使用するときの注意点、場合によってはaがよい理由を紹介します。 Everything you didn’t know you need to know about buttons by Steve Sewell 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ボタンの実装にdivを使用したときの問題点 ボタンをbuttonで実装する buttonのスタイルに関する問題点 buttonのスタイルを正しく設定する方法 フォーム内のbuttonの動作を修正する 他のページへのリンクに使用する場合はaタグで ボタンの実装をコンポーネントにする 終わりに はじめに クリックで
業務で使うツール(iTerm2,SequelPro,Chrome)をShellScriptでハイパーテクニックする - ハイパーマッスルエンジニア
業務で使うツール(iTerm2,SequelPro,Chrome)を ShellScriptでハイパーテクニックする はじめに この記事は今年イチ！お勧めしたいテクニック by ゆめみ feat.やめ太郎 Advent Calendar 2019の20日目の記事です。 今年は「お勧めテクニック」ということで、業務効率化ｯ!!を盾に業務時間の30％はShellScript遊びに当てている私にピッタリな企画ですね、ありがとうございます。 今回は業務でよく使うツールを、ShellScriptでハイパーテクニックする方法をいくつかご紹介。 今回紹介するコードは全部Githubにあげているので実際に試したい人はどうぞ。 ハイパーテクニックする対象 GoogleChrome iTerm2 SequelPro GoogleChrome ブラウザに移動せずTerminalで自在にタブ移動する Web開発を
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
![[新機能] AWS Lambda Function URLで簡単にLambda関数を実行する - NRIネットコムBlog](https://cdn-ak-scissors.b.st-hatena.com/image/square/bc3c7388e74cb100059d08a9bbf13d4d0d55e082/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Ff%2Ffu3ak1%2F20220408%2F20220408110835.png)
2020 年、 React 軸で学ぶべき技術 - mizchi's blog
Kindle蔵書一覧を取得する方法 - Qiita
ファイルダウンロード完全マスター | フューチャー技術ブログ
GAFAのなかで、Appleだけが「意味」の世界で闘っている グローバル競争で生き残るのに必要な、たったひとつの考え方
【個人開発】世の「家事やれよ論争」を撲滅するスマホアプリをリリースしました - Qiita
フロントエンドエンジニア御用達の MDN web docs を網羅した
プライベートメソッドのテストは書かないもの？ - t-wadaのブログ
Chrome Devtoolのmonitorを使うと関数の呼び出しを観察できて便利 - ぱすたけ日記
ngrokよりserveoがすごい。０秒で localhostを固定URLで公開 - Qiita
pythonは_(アンダースコア)の使い方を理解するだけでプロフェッショナルになれる - Qiita
GoogleスプレッドシートにChatGPTの回答を表示させる関数の作り方 - あなたのスイッチを押すブログ
【ChatGPT】新機能「Function calling」が凄すぎた - Qiita
You Don't Need Next.js | ドクセル
Atomic Architecture
TypeScript + React: Component patterns
なぜ default export を使うべきではないのか？
JavaScriptをもうちょっと理解する54のトピック - Qiita
JavaScript Visualized - Promise Execution
なぜファイルの末尾に改行を入れたほうが良いのか - Qiita
JavaScriptの非同期処理を理解する その2 〜Promise編〜 | さくらのナレッジ
JavaScriptを雰囲気で使っていたので勉強し直したら知らなかったこと
JavaScript 長いループ 分割 - hitode909の日記
雑にReactアプリを作りたい時に使ってるもの
すぐにAPIを体験！public-apis 100以上のJavaScript axiosサンプル集
JavaScript で print デバッグ時に変数名を出力する - mizdra's blog
知っておくと実装に役立つ！JavaScriptのテクニックのまとめ
JavaScriptの非同期処理をじっくり理解する (3) async/await
フロントエンドのコードからの情報漏洩を防ぐための工夫 - BASEプロダクトチームブログ
divはボタンではない、ボタンの実装について知っておくべきすべてのこと
mai13.vp.bex.jp
heylink.me
b.hatena.ne.jp/argopurogunung123
news.denfaminicogamer.jp
plat-go.com
kanazawa10no3.hatenablog.com