JavaScriptで配列から特定の要素を削除する方法 - 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） 非同期処理とは、「同期処理」の対義語で、同期処理は「プログラムの処理が順番に実行され、ある処理が終わるまで次の処理を待つ仕組み」です。 非同期処理の最大のメリットは、 「時間のかかる処理を行っている間に別の処理を行うことができる」 ことです！ 身近な例では、部下への仕事の
javascriptでmp3ファイルを再生 - Qiita
<button id="btn">再生</button> <button id="btn2">停止</button> <audio id="audio"></audio> これらを追加する javascriptを書く HTMLの中にscriptタグをかいてHTMLにjavascriptを書くか、 javascriptファイルを作ってそれでjavascriptを書くか。 今回はめんどくさいのでHTMLのなかにjavascriptを書きます。 headタグ内に書いてみてください 。 エラーでたら、bodyタグ内に書いてみましょう。 <script> var btn = document.getElementById("btn"); //document.getElementByIdを使ってHTMLのbtnというIDを取得 var btn2 = document.getElementById("
WordPressのuploadsにあるファイルへの直接アクセスを制限（WP新仕様対応） - Qiita
WooCommerceというWordPress用プラグインでショップを構築している。最近、デジタル商品（PDF）の販売もやり出しているのだが、一つ問題があって、WordPressはメディアファイルをアップロードすると/wp-content/uplaods/というディレクトリ以下にファイルが置かれるのだが、これには何も制限がかかってなくて、直接URLを入力したらファイルが表示されてしまう。これじゃ販売してる意味がないし、検索エンジンクローラーにも引っかかってしまう。 まぁFTP使って、直接アクセスできない領域に置けばいいじゃないかという話もあるのだが、諸事情からそれは見送り（詳細省きます）。次のような要件を.htaccessで実現することにした。 要件 デジタル商品（.pdf、.mp3、.zip）へのアクセスは禁止 ただし拡張子の前に_sampleと着いているものはアクセス可能。 e.g.
超簡単にChromeの拡張機能を作ってみる【誰でもできるよ】 - Qiita
はじめに みなさんはChromeの拡張機能を使っていますか？ 僕も使っていますが、案外Chromeの拡張機能を作るのは簡単です。 今回は、普段の業務の効率を上げるのも兼ねて自作してみました! 最低限準備するもの manifestファイル Javascriptファイル ぶっちゃけ、これだけで動きます。 実際に作ってみよう それでは実際に作成していきましょう。 今回はDとVを押すだけで、Markdownのリンクを作成する拡張機能を作成していきます。 まずは、manifestファイルから設定していきます! manifestファイル を参考にして、備忘録も兼ねて説明していきます。 今回は、最低限の設定を行います。 { "manifest_version": 3, "name": "Create markdown link", "version": "1.0.0", "icons": { "16":
1行もコードを書かずに画像生成AIツール作ってみた - Qiita
以下のXを見て、早速「Create」を試してみたので、実際に使った所感をまとめます AIがリアルタイムでWebページを作ってくれる神サイト ㅤ 会話だけで、理想のUIを実現することが可能 ㅤ 使い方・活用法をツリーにまとめます！ ㅤ ブックマーク保存をおすすめします↓ pic.twitter.com/J1cJkUkyO8 — すぐる | ChatGPTガチ勢 𝕏 (@SuguruKun_ai) March 25, 2024 一言で言うとヤバいです... 詳細は以下のサイトでも解説しています Createとは Create 公式サイト Createは、1行のコードを書かなくても自然言語を使って、高度なAIを搭載したアプリやツールが作成できる生成AI搭載のノーコードツールです。 エンジニアでなくともChatGPT APIやStable Diffusion APIを組み込んだアプリが簡単に作れ
「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
HTML内でIDをつけた要素はJavaScriptのグローバル変数に格納される - Qiita
id属性に値を設定すると、設定した値の変数がwindowオブジェクトのプロパティとして作られてJSからアクセスできる。 <body> <div id="test">てすと</div> <div id="global">ぐろーばる</div> <script> console.log('test' in window); // true console.log('global' in window); // true console.log(test === window.test); // true console.log(global === window.global); // true </script> </body> こんな仕様になってたの知らなかった。 (HTMLの解析後に作られるのでDOMの準備が出来る前に参照するとエラーになる) Command Line APIとかで人様の
JavaScriptで要素をドラッグして移動する簡単な方法 - Qiita
要素をドラッグして移動することは、JavaScriptにおいて頻出パターンです。 しかし、それを簡単に実現するコードは意外と知られていません。 <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.setPointe
input要素でEnterキー入力を検出する方法が、いつの間にかアップデートされていた - Qiita
フォーム入力などで、テキスト入力してEnterキー入力を検出する方法 いくつか方法があって、簡単に説明すると例えばこんなやり方でしょうか： input要素にキー入力イベントリスナーを設ける方法。 form要素のsubmitイベントで処理する方法。 input要素を対象にした方法に絞って、以下の説明を続けます。 よく見る例（非推奨のコードが含まれます） let text_form = document.getElementById('text_form'); let output = document.getElementById('output'); text_form.addEventListener('keypress', test_ivent); function test_ivent(e) { if (e.keyCode === 13) { output.innerHTML = t
HTML、CSS、JavaScriptで電卓をつくりました。 - Qiita
作ったアプリ https://xenodochial-clarke-ebb79c.netlify.app/ 四則演算だけできるシンプルな電卓です。できるだけWindows10の標準電卓と同じ動作になるように作りました。 今回は外部ライブラリとして、fittyとbig.jsを使いました。 今回学んだこと 数字が枠からはみ出る問題 電卓のディスプレイ部分ですが、入力する数字の桁が大きすぎると枠からはみ出てしまいます。 [1]を連打しまくる... で、数字が何桁入力されても幅が固定された枠の中に収まるように文字サイズを調整したい！と思っていたところ、fittyというとっても便利なライブラリを見つけました。fittyを使うと、次のようにフォントサイズが自動調整されて桁数が多い場合でも、1行に収まるようにしてくれます。
盲信的にquerySelectorAllを使用するのを卒業する。~getElementsBy~と比べてみた~ - Qiita
盲信的にquerySelectorAllを使用するのを卒業する。~getElementsBy~と比べてみた~JavaScript この記事はun-T factory! XA Advent Calendar 2021の16日目の記事です。 この記事で伝えたいこと querySelectorAllとgetElementsBy~系の取得できるオブジェクトの違い、またその振る舞い 処理の早さ(重さ)の比較 querySelectorAllとgetElementsBy~ 2年のエンジニア生活で数えきれないほど使用したquerySelector(All)。 便利だからーというより、初めて見たjsのコードがこれで、以降盲信的に使い続けてきました。 反面、 2年のエンジニア生活でquerySelector(All)以外を使用したことがあったようななかったような...というレベルで、それ以外を知らなすぎる。
新人プログラマ アンチパターン：原理原則多すぎて脳みそOOMエラー - Qiita
この記事で伝えたいこと（忙しい人向け） 新人ほど「保守していく」ことの感覚が腹落ちしにくいのではないか説 我々は保守しやすいコードを書くべきであり、保守しやすいコードを達成するための手段として原理原則やデザインパターンが存在している 保守ってなんで必要なんだっけ？という体系的な理解を持ったうえで、具体的なテクニックを学んでいくことが大事 // 追記（2023/12/9） なんとミノ駆動 さんにコメントいただけました。 もちろん良いコード/悪いコードで学ぶ設計入門 ―保守しやすい 成長し続けるコードの書き方は読んで影響を受けてます。 とってもうれしい。 想定読者 新卒 ~ ２年目くらいまでのプログラミング初心者 Webアプリの保守開発をしているエンジニア 3ヶ月前くらいの自分（未経験からエンジニアになって１年くらい） こんなことないでしょうか 先輩などから原理原則の観点を共有してもらったり、
アウトプットガチ勢が作った高速記事作成フレームワーク - Qiita
はじめに 本記事はアウトプットの心構えのカレンダー | Advent Calendar 2023の4日目の記事です こんにちは！！@Sicut_studyです！ 私はアウトプットの大切さを日頃から発信しており、実際にQiitaにたくさんの記事を投稿しています そんな中で、自分なりに高速に記事としてアウトプットできるフレームワークを使っているのでそのフレームワークについて紹介していきます アウトプットの大切さ まず言っておきたいのはアウトプットは質より量です 量が増えるとだんだんと質もあがります 私は駆け出しのエンジニアの方に普段から「100本記事を書けば人生変わる」と言っています。 そもそも世の中に100本記事を書いたことのある経験をしたことがある人はごく僅かです そんなごく僅かな人になれれば絶対人生が変わります。 多くの人ができないことをやり遂げられる。しかも記事という形で目に実力が見え
Windows10 快適にする不要なタスクスケジューラの停止 - Qiita
不要なタスクスケジューラの停止 *コマンドプロンプトを管理者として起動する。 *以下のコマンドを実行する。 rem 不要 Adobe製品は他システムで更新管理しているので schtasks /change /Disable /TN "Adobe Acrobat Update Task" rem 不要 MediaPlayerの共有サービスは利用しないので rem schtasks /change /Disable /TN "\Microsoft\Windows\Windows Media Sharing\UpdateLibrary" rem 不要 カスタマー エクスペリエンス向上プログラムに参加しないので。 schtasks /change /Disable /TN "\Microsoft\Windows\Application Experience\Microsoft Compatibil
バッチを自動で管理者権限で実行する方法 - Qiita
PRIVILEGES INFORMATION ---------------------- 特権名 説明 状態 ============================= =============================================== ==== SeLockMemoryPrivilege メモリ内のページのロック 無効 SeShutdownPrivilege システムのシャットダウン 無効 SeChangeNotifyPrivilege 走査チェックのバイパス 有効 SeUndockPrivilege ドッキング ステーションからコンピューターを削除 無効 SeIncreaseWorkingSetPrivilege プロセス ワーキング セットの増加 無効 SeTimeZonePrivilege タイム ゾーンの変更 無効 PRIVILEGES INFORM
ゲーミングCSSを作ってQiitaを光らせてみた - Qiita
概要 ゲーミングPC、ゲーミングマウス、ゲーミングキーボード、ゲーミングチェアーなど、色々ありますが、なぜか光っています。 なので、WEB画面も光らせてみようと、gaming-cssというプラグイン作成しnpmに公開しました。 セットアップ方法 下記のコマンドでインストールできます。 詳細な使い方についてはREADMEを確認して頂ければと思います。 CSSを適用 Qiitaのプロフィール画面を装飾しました！ Before After とっても綺麗になりましたね！（Qiita運営さん！ゲーミングテーマはいかがでしょうか？） ちなみに、CSSを適用するのに１時間くらいかかりました。 仕組み 仕組みは、簡単です。下記のように、線・文字・背景・画像などに対してアニメーションのスタイルを用意して適用しているだけです。 /*背景色*/ .gaming-background-color { animat
文化祭で某チェーン店を再現して失敗した話 - Qiita
要約 Wifiは無いに等しいと考えること。 (来場者1万強/日 なんていう状況下でWifiが動くと想定するのが駄目でした) 進捗管理する第三者を設けること。 ソースコード https://github.com/Na4Yu/EasyEats (RTDBのURLやSquareの個別キーは抜いているのでそのままは使えないです) はじめまして はじめまして、高校2年のNaYuです。 今回は文化祭で派手に失敗した話をさせて頂きます。 血反吐を垂れ流しながら書いていましたが、もし皆さんが文化祭を経て「この人のしたことをしなくて良かった~」なんて言っていただければ幸いです。(人の不幸は蜜の味) お願い 本記事は知見の共有を目的として個人が執筆したものであり、本記事の内容について学校、学校関係者への問い合わせはご遠慮頂けるようお願い申し上げます。 これを読んでいる後輩の方々へ この記事が私からの引き継ぎに
玉が行ったり来たりしてるだけなのになぜか円が回っているように見える現象の数理 - Qiita
X で見かけたこの映像。とても不思議。 コードで再現したものが以下。コマが回っているように見える。 一方で、色をつけてかつ軌跡がわかるようにすると、振動しているだけだとはっきりわかる。不思議。 この小さな円に見えるものは、式にすると以下のようになる。ここで $t$ は時間を表現した実数。 $$ \left(x- \frac12 \cos t \right)^2 + \left(y + \frac12 \sin t \right)^2 = \frac14. $$ これはすなわち $(x, y) = (\frac12 \cos t, - \frac12 \sin t)$ を中心に持つ半径 $\frac12$ の円。 これを $x$ 軸で切り取った断面の様子を見る。すなわち $y=0$ を代入する。すると、 $x$ に関する簡単な2次方程式が出てきて、その解は $$ x = 0, \cos t
ソフトウェアはなぜバージョンアップしなければならないのか - Qiita
はじめに 社内インフラの運用担当者にとってソフトウェアのバージョンアップは地味な割に大変な業務です。 特に社内のオンプレサーバで動いているようなソフトウェアの場合、バージョンアップに伴う諸々の調整をそのソフトウェアを利用している各部署と行う必要があります。 そんなときに「今は忙しいからバージョンアップを先送りしてほしい」「このバージョンはスキップしてもよいのでは？」なんて声が各部署から聞こえてきます。バージョンアップの価値を各部署に理解してもらうのは大変です。 この文章はそんな時になぜバージョンアップしなければならないのかを上司や各部署のマネージャに伝えるために書きます。 ソフトウェアの有効期限は2-5年 まず、第一に、ソフトウェアというものは無限に使えるわけではなく、一定の有効期限があり、それを過ぎると徐々に動かなくなってきます。俗にいう「何もしてないのに動かなくなった問題」です。 なぜ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
