【JavaScript】var / let / const を本気で使い分けてみた - Qiita
再宣言 一度宣言した変数を、同じ変数名で宣言し直すことを再宣言といいます。 再宣言可能なvarで再宣言した場合、後に宣言した変数が適用され、 再宣言不可能なlet/constで再宣言した場合、エラーになります。 varでは、予期しない再宣言が起こりうるため危険です。 // var var a = 0; var a = 1; console.log(a) // `1`と出力される // let let b = 0; let b = 1; // SyntaxError: Identifier 'b' has already been declared // const const c = 0; const c = 1; // SyntaxError: Identifier 'c' has already been declared
【JavaScript】let、const、varの違いと使い分け方法を徹底解説 - TECH PLAY Magazine
JavaScriptの変数を使い分けるには、let、var、constの違いを理解する必要があります。それぞれの違いについて3つの役割に分けて解説します。 再宣言、再代入 再宣言は一度宣言した変数名で再度宣言すること。再代入は値が入っている変数に上書きで代入することです。 varは再宣言と再代入のどちらも可能で、constはどちらも不可能。letは再代入できるものの、再宣言できないという違いがあります。 // 再宣言 var hoge1 = 1; var hoge1 = 2; console.log(hoge1); // 2 let hoge2 = 1; let hoge2 = 2; // ここでエラーが発生 const hoge3 = 1; const hoge3 = 2; // ここでエラーが発生 // 再代入 var hoge1 = 1; hoge1 = 2; console.lo
プログラミング言語をすぐに試せる「プレイグラウンド」まとめ。2024年版
新しいプログラミング言語やライブラリ、フレームワークを学ぶには、実際にそれらを試して挙動などを見てみることが大事ですが、実行環境を用意するのは手間がかかります。 そこで役立つのが、いわゆる「プレイグラウンド」と呼ばれる、Webブラウザでプログラミング言語やライブラリ、フレームワークをすぐに試すことができるサービスです。 主要なプログラミング言語の公式サイトには、実際にその言語をすぐに試せるプレイグラウンドが用意されていることも多く、また公式サイト以外にもネット上にはさまざまなプレイグラウンドがあります。 プレイグラウンドを使えば、気軽にいろんなプログラミング言語やライブラリ、フレームワークを試せます。 この記事ではそうしたプレイグラウンドをまとめてみました。ここで紹介したプレイグラウンドの他にも、あなたのお気に入りのプレイグラウンドがあればX/Twitterやブックマークのコメント、メール
ブラウザ上でJavaScriptの実行ができるサービスまとめ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 動機 ぼくがいま勉強しているJavaScriptのフィードバックを得る際に、コードそのものをWeb上で公開できるサービスはないかと探していたところいつくか見つかったので、まとめ。 Web上でJavaScript実行できる利点 すべてのサービスに共通して、シェアができることが一番の特徴。 自分のパソコンをリモートして見てもらっているような分かりやすさがある。 また、わざわざjsファイル、cssファイルなどを開かさせる手間もなく、一度に俯瞰できるのがコード書く人にもフィードバックする人にも優しい。 JSFiddle 特徴 HTML・CSS・
JavaScriptの配列操作を覚えよう (JavaScript基礎構文)
JavaScriptには様々な変数の型が存在します。有名なところでは文字列や数字、真偽値などがありますが、そうした変数を複数格納できるのが配列です。最も基本的な定義は [] で行われます。 const ary = []; リストを作ったり、クラウドのデータベースからデータを一覧で取得した際にも配列がよく使われます。それだけに、この配列を操作する方法をマスターすれば、コーディングがとても簡単になるでしょう。 この記事では便利な配列操作方法について解説します。 初期化 配列の初期化は [] を利用して行います。 const ary = []; この場合 ary は空の配列になります。 ary.length; // => 0 初期化する際に値をあらかじめ指定する場合には , で値を区切ります。 const ary = ['文字です', 100, true, new Date]; 配列の要素にアク
配列を征する者はJSを制す。JavaScriptのスマートな配列操作テクニック - ICS MEDIA
JavaScriptでコードを記述する際、配列の各要素について処理をするケースは頻出します。開発の現場で配列操作の処理を見ていると、次のようなケースがよくあります。 配列の非破壊の望まれる場面が増えているが、元の配列を破壊操作している filter()やevery()など配列のメソッドで書けるところを、forEach()メソッドやfor ... of文を使ってコードを記載し、冗長になっている 記述しても効果のないArray.from()を使用している コード的には問題なく、アプリケーションは意図的に動作しているかもしれません。しかし、冗長な記述は可読性が低下し、予期せぬバグを誘発する可能性があるでしょう。 本記事では、配列操作でよく見かける冗長な記述を、簡潔な記述で置き換える方法について解説します。 本記事で紹介するJavaScriptの配列操作のチートシートを用意したので、まとめて読みた
VSCodeでJSDocを使ってコメントを書こう
function test(a, b, c) { if (a === b) { alert(c); } } ご覧のように、コメントなしでコードを読むことが難しいです そこで、JSDocを導入してコメントを書きましょう JSDocってなに JSDocは、JavaScriptのコメントの書き方に対するルールです そして、VSCodeとの相性が非常に良く、プラグインなしでショートカットで簡単に書くことができます 使用の流れは以下のようです まずはメソッドの上に、/**を打ちます そこで、autocompleteが自動に表示しますので、Enterを打って改行させます そうすると、パラメータが自動的に認識され、コメントが生成されました そして、書き方の以下です 一つ目の*はメソッドのタイトルで、@paramの末端にパラメータの意味や用途などを書きます /** * メソッドのタイトル * @param
JavaScriptでJSDocコメントを書くメリットとは - ICS MEDIA
筆者が試したところ、開発環境としてWebStormやVS Codeがとくに優れており、ツールチップにJSDocコメントの情報がすべて表示されました。 ちなみにReactやAngularなどのメジャーなJSライブラリにおいても、そのソースコードではJSDocコメントが使われています (例 : Angular、React)。APIが多岐に渡るJSライブラリを利用するとき、わざわざリファレンスをブラウザで開いたり解説書で調べることなく、コード上で関数の仕様を確認できます。 ▲描画ライブラリCreateJSのAPIを表示したもの JSDocコメントのメリット② APIリファレンスの生成 TypeDoc等のツールを使うことでコードのリファレンスドキュメントを作成できます。こういったJSライブラリのリファレンスはみなさんも一度は見たことがあるのではないでしょうか。 ウェブサイト案件のソースコードでAP
VSCodeでJavaScriptのデバッグが容易になったらしい
VSCode（Visual Studio Code）で、JavaScriptのデバッグが容易になったらしいので試してみます。これまではGoogle Chromeで確認する際、VSCodeにDebugger for Chromeという拡張機能のインストールが必要でしたが、それが不要になりました。 今回は、Reactでデバックを試してみます。 ちなみに、私のVScodeのバージョンは1.58.2です。 手順 VSCodeを開く ローカルでReactを起動する（yarn start） VSCodeでcommand + shift + d を押す（実行とデバックを選択状態にする） ブレークポイントを付ける command + shift + p を押す（コマンドパレットを開く） 「Debug: Open Link」を選択し、エンターキーを押す URLを入力し、エンターキーを押す 自動でGoogle
Visual Studio CodeでのJavaScriptのデバッグ方法 - ICS MEDIA
マイクロソフトが無償で提供しているコードエディター「Visual Studio Code（略称：VS Code）」はGoogle ChromeやMicrosoft Edgeのデバッグ機能と連携できます。VS Code上でブレークポイントを設定してコールスタックを確認したり、ステップ実行や変数のウォッチなどを行えます。複雑なJavaScript開発を行っている方は、デバッグ機能を使うことで、効率のよい開発体験を得られるでしょう。 本記事ではデバッグ機能を使うためのVS Codeの導入方法について説明します。 導入手順と前提 VS Codeにはデフォルトでデバッグ機能が搭載されています。 ※2021年8月以前のVS Codeでは拡張機能「Debugger for Chrome」の導入が別途必要でしたが、今のVS Codeでは拡張機能をインストールする必要はありません。 本記事では、ウェブページ
iframeの高さを自動調節する - Qiita
親サイトにifremeを入れたときにうまく高さが指定できなかったので 参考になるサイトを探しまくりました。 要件 iframe。よくあるyoutube、googlemapではなく、別のサイトのiframe（クロスドメインと言う）。 iframe側の高さが動的に変わる場合（例：記事のタイトルとか、日によって文字数がかわるやつ）高さを固定すると変にスクロールがついてしまい、見た目が悪い。 iframe使ってるってなるべく気づかれたくないときに活用できる サンプルコード <script> window.addEventListener('message', function(e) { var iframe = $("#parentframe"); var eventName = e.data[0]; var data = e.data[1]; switch(eventName) { case '
CSSでiframeタグの高さを自動調整する方法を現役エンジニアが解説【初心者向け】
目次 iframeとは iframeをCSSで調整するには iframeの高さを自動調整する方法 まとめ iframeとは iframeとはWebページの中に別のWebページを埋め込む要素です。 <iframe src="sub.html" width="100px" height="100px"></iframe> srcで埋め込むページのアドレスを、widthで幅、heightで高さを指定します。その他のオプションなど、詳しくは以下の記事も参考にしてください MDN – <iframe>:インラインフレーム要素 [PR] Webデザインで副業する方法とは iframeをCSSで調整するには iframeで枠線を指定するframeborder、スクロールバーの表示有無を制御するscrollingは非推奨の属性になっています。枠線を制御するにはcssのborderプロパティを使用しましょう
ホームページ- 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
【JavaScript】toLocaleDateStringで日付フォーマット 🗓 - Qiita
toLocaleDateStringで簡単に日付フォーマット これまで日付フォーマットする時って、getFullYear()とかgetMonth() + 1とかで頑張ってフォーマットしていたんですけど、toLocaleDateString()を使う方法を知り、備忘録として取り上げました。 toLocaleDateString()は、 Dateオブジェクトが持つ日付と時刻の値を、指定したロケールの形式で文字列として返します。 構文
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Online Javascript Editor
ブラウザのみでいろいろ試せるサイト集 - Qiita
【JavaScript】JSDocって何？よく使うJSDocタグまとめ - Qiita
JSDocについて理解する - Qiita
EOLを迎えた古い「Node.js」へのCVE付番、MITREに却下されてしまう／開発チームが新方針発表、EOL版は便宜上「今後の新たな脆弱性全てが該当する」原則に
【JavaScript】日付処理 - Qiita
