JavaScriptのthisもこれで完璧！呼び出し方で変わる5つのパターン - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
JavaScriptの非同期処理をしっかり理解する 〜async/await/Promise〜 - Qiita
JavaScript での非同期処理について、身近な例や具体例を交えながら詳細に解説しています。 最後には練習問題も用意しています！ 頑張って書いているので、良いと思ったらコメント・いいね・ストック・共有などしてもらえると嬉しいです！！ 非同期処理とは 非同期処理とは、プログラムの処理が順番に実行されず、ある処理を実行している間に他の処理を並行して実行することができる仕組みです。非同期処理では、あるタスクが完了するのを待たずに次のタスクが実行されるため、効率的に複数の処理を進めることが可能です。 （by ChatGPT） 非同期処理とは、「同期処理」の対義語で、同期処理は「プログラムの処理が順番に実行され、ある処理が終わるまで次の処理を待つ仕組み」です。 非同期処理の最大のメリットは、 「時間のかかる処理を行っている間に別の処理を行うことができる」 ことです！ 身近な例では、部下への仕事の
知っておくと仕事が捗る便利ツール17選 - Qiita
はじめに 知っておくと仕事が捗るブラウザ上で動く超便利なツールを17個集めました。 Squoosh Googleが開発した画像変換・圧縮用のWebサービス。 プレビュー画面で変換前後の画質をリアルタイムで確認しながら圧縮設定を調整することができる。 Documatic Documaticは、プロジェクトドキュメントの開発プロセスを削減するためのツール。API リファレンスからユーザー ガイドまで、コード ベースを簡単に文書化できる柔軟なテンプレートとユーザーフレンドリーな編集ツールを提供する。 transform jsonからyamlの形式に変換したい等、あらゆるデータ形式から別の形式に変換するサービス。 jsonからyml、htmxからjsxへの変形、jsonやGraphQLのIDLからTypeScriptのinterfaceまでも、ブラウザ上で生成することができる。 Roadmap.s
JavaScriptで要素をドラッグして移動する簡単な方法 - Qiita
<img id="$img" src="https://js.cx/clipart/ball.svg" width="40" height="40"> <script> $img.onpointermove = function(event){ if(event.buttons){ this.style.left = this.offsetLeft + event.movementX + 'px' this.style.top = this.offsetTop + event.movementY + 'px' this.style.position = 'absolute' this.draggable = false this.setPointerCapture(event.pointerId) } } </script>
moment.js・day.js よりも速くて軽い cdate ライブラリ - Qiita
moment.js や day.js と似たインターフェースを実装した高速・軽量の JavaScript ライブラリ『cdate』をリリースしました。→ https://www.npmjs.com/package/cdate cdate の主な特徴： moment.js や day.js、Luxon よりも高速 moment.js と同じ .format("YYYY-MM-DD HH:mm:ss") 出力フォーマットに対応 strftime と同じ .text("%Y-%m-%d %H:%M:%S") 出力フォーマットに対応 moment.js と同様に .add(1, "month").startOf("week").endOf("day") のような計算に対応 .tz("Asia/Tokyo") あるいは .utcOffset("+09:00") のようなタイムゾーン（時間帯）指定に対
エンジニア向けチートシート集 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 今回はエンジニア向けのチートシート集のまとめを紹介していきます。 チートシートを利用することで 作業効率が上がる 概要が掴みやすい 学習にもなる といった恩恵が得られます。 ただし前提として毎回コードを書くたびに「チートシート集でカンニングすればええや」と思うのではなく「最初はチートシートでカンニングしつつ徐々に体で覚えていく」ことを意識して使うことが大切です。 最終的にはチートシートは見ずに「自分の使える技術」として定着させるための道具だと思って使ってください。 この記事の対象者 エンジニア初心者~中級者 作業効率を上げたい
ゲーム感覚でプログラミング学べるサービス集 - Qiita
はじめに 今回はゲーム感覚でプログラミングを学べるサービスを紹介します。 ゲームを通して学んだ知識をアウトプットできるサービス集を厳選したので、ぜひ学んだ知識を「使える技術」として自分のものにしていただければと思います。 この記事の主な対象者 プログラミング初心者~中級者 基礎文法は学んだけどアウトプットができていない人 フロントエンジニアを目指してる人 楽しみながらプログラミングを学びたい人 ぷよぷよプログラミング まずはじめに紹介するのは、SNSでも話題になった、ぷよぷよを開発しながらプログラミングを学ぶことができる「ぷよぷよプログラミング」です。 ぷよぷよプログラミングでは、人気ゲームぷよぷよを開発しながらHTMLやCSSやJavaScriptといったプログラミングをしていく中で基礎となる技術を学ぶことができます。 実際にアプリ開発をしながら学べるので、インプットとアウトプットが同時
body-scroll-lock.js「すべてのブラウザでスクロールのロックしたるで」←こいつ超有能 - Qiita
この記事に書いてあること JavaScriptプラグインのbody-scroll-lock.jsの使い方について サイトリンク GitHubリポジトリ npmサイト body-scroll-lock.jsとは？ ターゲット要素（モーダル/ライトボックス/フライアウト/ナビメニューなど）のスクロールを中断せずに、ボディスクロールを禁止にするプラグインです 対象ブラウザ iOS Mobileおよびタブレット、Android、デスクトップSafari/Chrome/Firefox どんな時に使うか？ 例えばモーダルを表示した時に、背景を固定したいといった場合に使うことができます。 モーダルの中だけスクロールを有効にして、背景固定を実現するなんてことも簡単に実装可能です。 なぜ使うの？ スクロールのロックは簡単そうに思えて、実は結構面倒くさい処理内容です。 例えば、 overflow:hidden
【HTML5】マリオのコインの音をブラウザで出そう【ファミコン】 - Qiita
で、上記の通り「矩形波、三角波」って見たらアラフォー以上の人は「ファミコンじゃん」ってなったり、むしろ、コナミ矩形波倶楽部を思い出す方も多いかもしれません。 技術的なこと まぁ、ソースを見て貰えば特に難しいことはしていない（いつものように殴り書きだし…）のでコインであれば「♪シミー」という音を鳴らせばできるわけです。 const AudioContext = window.AudioContext || window.webkitAudioContext const audioContext = new AudioContext() const gainNode = audioContext.createGain() gainNode.connect(audioContext.destination) gainNode.gain.value = 0.1 const oscillator =
朝飯前に学べる！便利なPythonのヒント100選【前編】 - Qiita
本記事は、Fatos Morina氏による「100 Helpful Python Tips You Can Learn Before Finishing Your Morning Coffee」（2021年5月10日公開）の和訳を、著者の許可を得て掲載しているものです。 #朝飯前に学べる！便利なPythonのヒント100選【前編】 Photo by Jexo on Unsplash ##はじめに Pythonは、主にそのシンプルさと習得のしやすさから、最近では非常に人気があります。 データサイエンスや機械学習、ウェブ開発、スクリプト記述、自動化など、幅広い分野で利用することができます。 この記事はかなり長いので、すぐ始めましょう。 ##1. forループのelse条件 今までにPythonのあらゆるコードを見てきたとしても、次のfor-elseは見逃している可能性があります。私も数週間前に
Promise で排他制御を行う - Qiita
Promise での非同期処理時、排他制御を怠ったばっかりにバグを出してしまった、そんな経験ありませんか。私はあります。 スレッドを使う場合、Mutex や synchronized 等々、大抵排他制御を行うライブラリや構文などがセットでついてくるのだけど、Promise/A+ には無いので自前で制御する必要がある。 なので、Promise で排他制御が出来るライブラリを npm から調べ、めぼしい物二つをピックアップしてみた。 async-lock https://www.npmjs.com/package/async-lock 一番メジャーっぽいライブラリ。ダウンロード数も多い。 ロック取得時、key を指定する redis の key の set のように、key ごとに排他制御したい場合に便利 タイムアウトのサポート 待ち受けタスク数の上限のサポート インターフェイスが、acqui
GoogleフォームとGASで請求書のPDFを自動生成する - Qiita
はじめに 業務で必ず必要になる請求書。皆さんはどうやって作成していますか？ 最も有名な請求書作成サービスはおそらくMisocaですが、Misocaは弥生に買収されて9月より完全にサービスが有料化し、なかなか便利かつ無料に使えるサービスがなかったりします。 Excelや時にはVBAも使っている会社もありますが、ローカルでの作成は請求書フォームの改定が徹底されなかったり、請求書の作成履歴が管理されなかったりと、不便な点がたくさんあります。 そこで当社では、Googleフォームを使用した請求書作成システムを運用しています。 これにより、 作成履歴が残り、改竄を防止できる フォーム送信時に自動でPDFが生成されてGoogleドライブに保存される ファイル名を請求書番号、請求先名など自由にカスタマイズし、自動で設定できる などを実現することができます。 フロー 図の青色部分はGoogleフォームのサ
JavaScriptで文字列が小文字・大文字・数字を全て含むかどうか判定する方法について - Qiita
タイトルにあるように、文字列が半角英小文字・大文字と半角数字を全て含むかどうかを判定するという機会は少なくありません。特に、文字種の多さがパスワードの強さであるという教義の持ち主である場合に顕著です。もちろん長さは16文字以内です。 さて、この判定は一見単純に見えて一筋縄ではいきません。文字列の条件判定といえば正規表現ですが、「全て含む」という条件をきれいに書くのは少し難しいでしょう。そこで、この記事ではこの条件を判定する諸方法について雑に考察します。 愚直に正規表現を使う方法 正規表現では、「ある文字種をひとつ含む」という条件を書くのは簡単です。例えば半角小文字を含むという文字列は/[a-z]/という正規表現で判定可能です。これを用いれば、正規表現を3回使うことで上述の条件を判定できます。 const ratz = /[a-z]/, rAtZ = /[A-Z]/, r0t9 = /[0-
東大生が5秒で始められるゲームプログラミング学習サービスを開発・リリースした話 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? この度、5秒で始められるゲームプログラミング学習サービス「プロアカ」をリリースしました。1人での開発でしたが月額課金制度まで実装しており、少し大きなプロダクトになったので知見を共有したいと思いました。 また、新型コロナの影響で自宅待機の時間が長くなっている方が多いため、自宅学習できる当サービスについて知っていただければと思いました。休校中の学生の方もぜひプログラミングを学んでいただければと思います。サービスサイトはこちらです。 #目次 作ったサービス サービス内容で工夫したこと 使用した技術 開発期間は半年間 リリース後 終わりに #作
ワイ「なに！？ジェネレーター関数を使えば複雑なCSSアニメーションも簡単やと！？」 - Qiita
業務中ワイ ワイ「お、また株式会社ブラックはんからお仕事依頼のメールが来てるで」 ワイ「どれどれ・・・」 暗井「お世話になっております。株式会社ブラックの暗井 暗人（くらい・あんと）です」 暗井「クリックするとフワフワっとだんだん縦横に大きくなるボックスを作ってください」 暗井「予算は800万円です」 ワイ「これまた何ちゅうフワフワっとした指示や」 ワイ「でもjQueryのanimateメソッド使えば余裕やろ」 ワイ「かしこまりました」 ワイ「何とか800万円以内に抑えます」 ワイ「送信っと」 ワイ「お、早速お返事や」 暗井「なお、発注元の都合でjQueryの使用はできません」 ワイ「ファッ！？」 ワイ「まじか・・・jQuery禁止か」 ワイ「800万円で出来るかな・・・」 社長「（それは出来るやろ・・・何年かける気や・・・）」 ザコーダーワイ、jQuery禁止で困る ワイ「jQueryな
ワイ「いうても型なんて面倒くさいだけやろ？」 - Qiita
※登場人物等は全てフィクションです。 再就職したワイ 社長「やめ太郎くん」 ワイ「はい」 社長「今うちで開発中のブラウザゲームがあるんやけど」 社長「そのゲームの中に登場するジュースの自動販売機をプログラミングしてくれへんか」 ワイ「ええで」 社長「言語はTypeScriptや」 ワイ「・・・ええで（震え声）」 タイプスクリプト is 何 ワイ「なんやTypeScriptて」 ワイ「JavaScriptの打ち間違いか？」 ワイ「きっとそうやな」 ワイ「誰かがタイプミスで仕様書にTypeScriptって打ち込んでもうたんや」 ワイ「いわばタイポスクリプトや」 ハリー先輩「ちゃうで」 ハリー先輩「知らん言葉が出てきたからって変な妄想で自己解決したらアカンで」 ハリー先輩「なにがタイポスクリプトや」 ハリー先輩「TypeScriptは静的型付けが出来るAltJSや」 ワイ「ほえー、静的な型のある
Slackに気象庁の情報（災害情報）を投下するHubotを作った（JavaScript） - Qiita
はじめに ちょっとした地震などの時にどこが揺れたんだろうとかをわざわざ調べに行かなくていい様に、Slackに気象庁から災害情報を取ってきて投稿するBotを作りました。 意外と気象庁が配っている情報をPubSubHubbub（現：WebSub？気象庁の表記に合わせてPubSubhubbubと表記）で取得する方法について情報がなかったので書きます。 今回のコード : https://github.com/kakudo415/disasterbot おしながき Subscriberを書く（登録部分） 気象庁にSubscriberを登録する Subscriberをさらに書く（受け取り部分） 環境 JavaScript Hubot つくる 今回はPubSubHubbubをいかに受け取るかがメインなので投稿部分などは省かせていただきます（詳細はコードを見てください）。 Subscriberを書く（登録
JavaScriptで数値フォーマットする標準API「Intl.NumberFormat」 (カンマ区切り、円・ドル表記、漢数字など) - Qiita
ほぼすべてのブラウザやNode.jsでサポートされている数値をフォーマットするAPI「Intl.NumberFormat」を紹介する記事です。 JavaScriptで数値をカンマ区切りにしたいときにGoogleで検索してみると、正規表現を使っていたり、ループで回して3桁ごとにカンマ付ける実装を紹介する記事を多く見つけました。 しかし、それらは古い記事ということもあり、2018年現在は数値のフォーマットを実装する必要はありません。EcmaScriptで仕様策定されておりほとんどのブラウザやNode.jsで使える関数があるので紹介します。 今回紹介するコードの実行結果はすべてChromeでの結果になります。 TL;DR 「Intl.NumberFormat.prototype.format」を使います。 まだChromeとFirefoxだけですが、「Intl.NumberFormat.prot
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
console.log(); しか使えなかった自分へ。。。 - Qiita
【2019年4月版】JavaScriptのconsoleがすごいことになってた。 - Qiita
