（Javascript）スプレッド構文（...）を使ってオブジェクトを展開してみよう - Qiitaconst userObject = { userName: 'John', age: 20, city: 'New York' } const userObjectCopy = { ...userObject } console.log(userObjectCopy)
オブジェクト指向でUIを考えられるようになりたい。 - Qiita
1. 目的 UIデザインを勉強し始めました。現在「オブジェクト指向UIデザイン-使いやすいソフトウェアの原理」を読んでいます。そのため、学習進行の記録と復習を兼ねて、学んだことを記事にしようと思います。 以下「1. オブジェクト指向UIとは何か」という本書のさわり部分についてまとめています。 この記事で載せている例には私が考えたものも含まれていますので、間違い等ありましたらコメントにてご指摘いただけますと幸いです。 2. オブジェクト指向UI(OOUI) UIをオブジェクト(ユーザーが操作する時の対象物)を起点に設計します。GUIももともとオブジェクト指向プログラミングのコンセプトに合わせて考案されました。多くのアプリはオブジェクト指向型のGUIです。 最大の目的は、ユーザーがオブジェクトに対して自由な順序で働きかけながら目的を達成することです。 原則 オブジェクトを知覚でき直接的に働きか
今からでも遅くないconsoleを使いこなそう - Qiita
はじめに この記事では、consoleメソッドについて紹介を行っていきます。consoleメソッドには例えばconsole.log()などが挙げられます。web開発においてconsole.log()を使用する方は多いかもしれません。しかしconsoleにはconsole.log()以外にも様々なメソッドがあるので、状況に合わせて使い分けることで少しでも快適なデバック、開発ライフを目指しましょう。 弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。 また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。 consoleについて consoleオブジェクトを用いることで変数の値などをコンソール上に出力することができます。主に出力の確認であったり不具合の原因特定などのデバックするために
JavaScriptのthisって何this? - Qiita
はじめに こんにちは。kosukein38です。 JavaScriptでthisを書いて毎回これ何参照してるんだっけ?ってなるので、軽くまとめてみました。 対象者 thisって何this?な人 内容 JavaScriptにおけるthisは、現在の実行コンテキストに依存する特別なキーワードです。 その値は、関数がどのように呼び出されるかによって異なってきます。 単独関数内のthis 単独関数が呼び出された場合（つまり、オブジェクトのメソッドとしてではなく）、thisはグローバルオブジェクト（ブラウザではwindow）を参照します。 ただし、strictモードではthisはundefinedになります。
JavaScriptは「参照渡し」をしないって本当？ - Qiita
概要 タイトルの答えはYES. JSを勉強し始めたばかりで、JSにおける値渡し/参照渡し/参照の値渡しの処理の違いがわかりませんでした。 調べていくうちに「え、JSって参照渡ししないんだ！？」となったので、ここに学んだことをまとめようと思います。 追記：いただいたコメントをもとに修正しました。コメントありがとうございます！ 結論 JSでの処理は「プリミティブ値は値渡し」「オブジェクトは参照渡し」と言われていますが、厳密には「参照渡し」はしません。 JSでは「参照の値渡し」(共有渡し、本文中では共有渡しに統一)が行われています。 値渡し、参照渡し、共有渡しとは 値渡し 引数に値を渡す時、変数の値をコピーして渡す処理。 呼び出しもとの変数は変化しません。 参照渡し 引数に値を渡す時、参照(=メモリ番地)で渡す処理。 変更が呼び出しもとに反映されます。 共有渡し 引数に値を渡す時、変数に格納され
C++erですがCOMに翻弄されています: 再入との戦い - Qiita
C++ Advent Calender この記事はC++のカレンダー | Advent Calendar 2023 - Qiita の21日目の記事です。 20日目: Try to make a try ! by @wx257osn2 22日目: C++ コンパイル時「出力」で画像ファイル生成 #C++ - Qiita by @Raclamusi はじめに 2021年に新卒で今の会社に入社して以来、ずっととある一つの製品の開発部門に所属していて、その中のWindowsチームというところにいます。 WindowsチームなのにiOSの要件が来たり、サーバーEoLの要件が来たりとなんだか特殊部隊感があるのですが、きっと気の所為です。 さて、ここまで入社以来ずっと本格的な理解から逃げ続けてきた存在があります。それがCOMです。 ところがついにこの秋から冬にかけての要件ではVisual Studio
JSONって何？ - Qiita
この記事は「RUNTEQ Advent Calendar 2023」の24日目に参加しています🎄🎅✨ はじめに 現在プログラミングスクールRUNTEQで学習中のhimeです！ 以前から気になっていた「JSON」について理解したいと思い、今回テーマに選びました！ JSONについて整理したのち、最後にアプリのプロジェクトを立ち上げた際に生成される package.jsonというファイルが何なのか理解したいです。 自分が作ったアプリのpackage.jsonの中身を解説できたらな〜と思います。 JSON とは JSON(ジェイソン) は JavaScript Object Notation の略称です。 日本語訳だと「JavaScriptオブジェクト記法」になります。 JSONは、データの構造化とデータの交換を目的とした軽量なデータ形式で、 ファイルの拡張子は.jsonです。 まとめると、J
ついに JavaScript に groupBy が実装されたぞ！！！ - Qiita
JavaScript標準でgroupBy関数が実装されています。2023年11月現在Safari以外の主要なブラウザで実装済みで、SafariもTechnology Previewのようです。 （現在MDNの日本語の記事は古い情報のままになっており、現行と異なるので注意！ →更新していただきました。ありがとうございます！） Proposal の Stage はすでに 4 / Finished なので規格として確定済みです。 基本的な使い方 よくあるgroupByです。配列（Iterable）とキーを抽出する関数の二つを指定すると、キーで配列をグループ化します。 const ret = Object.groupBy([ { name: '山田太郎', address: '東京' }, { name: '山田次郎', address: '愛知' }, { name: '山田三郎', addre
Javaを中心に偏見ベースでプログラミング言語の関係をまとめた - きしだのHatena
オブジェクト指向言語の話をするときに便利なように、Javaを中心にプログラミング言語をまとめてみました。 Javaに影響与えるか、Javaから影響を受けるか、という感じですね。 Simula オブジェクト指向はここから始まったと言われています。 クラス、オブジェクト、継承、仮想関数(多態)といった、オブジェクト指向の基本要素が備わっていました。 ただし、「オブジェクト指向」という言葉は生まれていません。 Smalltalk Simulaから発想を得て「オブジェクト指向」という言葉を生んだのはアラン・ケイでした。 しかし、モデルとしてはSimulaとは異なりメッセージングを主体としたものでした。また、アラン・ケイの「オブジェクト指向」はプログラミングのパラダイムだけではなく、人がコンピュータをどのように扱うかというメタファであり、ダイナブックというハードウェアやそのユーザーインタフェースを含
オブジェクト指向プログラミングの概要 - Qiita
はじめに この記事の目的は、オブジェクト指向プログラミングの概念をつかむこと。 オブジェクト指向は独立した概念ではなく、それまでのものを拡張して作られている。 そのためにまず、オブジェクト指向に至るまでのプログラミング言語の遷移を追う。 そして、オブジェクト指向を構成する3大要素を解説する。 プログラミング言語の歴史 1. 始まりは機械語 コンピュータは0と1しか理解できないため、 2進数や8、16進数の機械語で書いていた。
【JavaScript・初学者】Reactでよく使われる頻出記法 / mapについて - Qiita
はじめに Reactを学習していましたが、JavaScriptの記法についてフワッとしている部分がよくあったので、簡単ですが今回はmapメソッドについて少し調べました。 mapメソッドの使い方 mapは配列の繰り返しをしてくれる関数です。 mapはオブジェクトには使用できないことを覚えておきましょう。 const data = [1,2,3,4] const result = data.map((num) => { return num + 1; } ) const data = {id:1, number: 2} const result = data.map((num) => { return num + 1; } ) // Uncaught TypeError: data.map is not a function
【JavaScript・初学者】Reactでよく使われる頻出記法 / 分割代入について - Qiita
はじめに Reactを学習していましたが、JavaScriptの記法についてフワッとしている部分がよくあったので、簡単ですが今回は分割代入について少し調べました。 通常の代入について 例えばあるオブジェクトがあったとして、それぞれのプロパティを変数に代入するには、このようにプロパティごとに変数を定義してあげる必要があります。 const student = { id: "1", name: "michael", age: 18 }; const id = student.id; const name = student.name; const age = student.age; console.log(id); console.log(name); console.log(age); const student = { id: "1", name: "michael", age: 18,
オブジェクト指向の複雑性を軽減する、データ指向プログラミング入門
思った以上に反響をいただき嬉しく思っています。SNSやコメントで言及していただいている構造化プログラミングとの比較や現代的なOOP開発への適応記事を執筆予定です。記事が完成しましたら自分のSNSで共有いたしますので、もし良ければフォローしてお待ちいただけますと幸いです。（記事を書くのは思考が整理されて良いものですね。） TL;DR データ指向プログラミング(DOP) とは、データとコードを分割してアプリケーションを設計・実装するプログラミングパラダイムのこと。 DOPの実装は、以下の原則に従う。 コードとデータを分離する 汎用的なデータ構造でデータを表現する データをイミュータブルなものとして扱う データスキーマとデータ表現を分離する 個人的にDOPは、バックエンドを宣言的プログラミングっぽく書くための現実的な解だと捉えています。実装の詳細は翔泳社より出版されている「データ指向プログラミン
JavaScript オプション引数のデフォルト値を指定したい - Qiita
function func1({a = 100, b = 200} = {}) { console.log(`${a}, ${b}`) } func1() // => 100, 200 func1({a: 20}) // => 20, 200 Refs デフォルト引数 - JavaScript | MDN 既定値のある分割代入の引数 既定値の代入を、分割代入表記で行うことができます。 これを行う一般的な方法は、空のオブジェクト/配列をオブジェクト/配列に分割代入することです。例えば、 [x = 1, y = 2] = [] とします。 このようにすることで、空の配列/オブジェクトを関数に渡しても、あらかじめ設定した値を保持することができます。 分割代入 - JavaScript | MDN
Javascriptの標準組み込みオブジェクトのFunctionのインスタンスメソッドcall(),apply(),bind()について - Qiita
Javascriptの標準組み込みオブジェクトのFunctionのインスタンスメソッドcall(),apply(),bind()についてJavaScript なんとなくで使っていたので、整理を兼ねて文字に起こします。 はじめに Javascriptには、標準組み込みオブジェクト(Standard built-in objects)というグローバル領域にあるオブジェクトがあります。 この標準組み込みオブジェクトにオブジェクトの基本となるオブジェクト、Object, Function,Boolean,Symbolがあります。 今回はこの中のFunctionオブジェクトについて、深掘りしていきます。 Javascriptの全ての関数はこのFunctionオブジェクトであり、 Functionオブジェクトは functionsのメソッドを持ちます。 thisについて Functionのメソッドで使
JavaScriptデザインパターン入門 - Qiita
1. はじめに JavaScriptデザインパターンは、JavaScriptを使ってプログラムを書くときによく出くわす問題を解決するためのガイドです。これらのパターンの背後にある考え方を理解することで、自分の問題に適用することができます。また、これらのパターンが自分のコードに役立つ場合を見つけることもできます。 2. モジュールパターン モジュールパターンは、JavaScriptのモジュールシステムの一部で、データを保護する方法を提供します。これは、モジュール内のプライベートなデータと動作を保護し、一方で公開APIを提供する方法です。これにより、プライベートとパブリックのアクセスレベルを持つ自己完結型のモジュールオブジェクトを作成することができます。 これは、JavaやC++のような言語でクラスにアクセス修飾子を使用するのに似ています。 JavaScriptでは、クロージャを使用してモジュ
JavaScriptでオブジェクト（連想配列）の配列を操作する - Qiita
JavaScriptで連想配列（関数を取り扱わないオブジェクト）の配列の編集方法をまとめてみました。連想配列の配列の形で受け取ったデータを、編集するための資料です。 やりたいこと 条件に合致するデータを複数（すべて）抽出する 条件を1行で記述できる場合 filter 条件を複数行で記述する場合 filter 配列の中の配列を条件にする場合 filter+some, filter+every 条件に合致するデータを1件抽出する 条件を1行で記述できる場合 find 条件を複数行で記述する場合 find 連想配列を編集して新しい配列や連想配列を作る 必要な項目を配列で出力 map 必要な項目を連想配列で出力 map 複数条件（条件が配列）に合致するデータを抽出する 複数条件のいずれかに合致するデータを抽出する filter + some 複数条件のいずれかに合致するデータを、条件毎の配列で抽出
【JavaScript】プロパティを変数名で呼び出す - Qiita
私は、フロントエンドからRailsで作成したAPIにリクエストを投げて、返ってきたJSON形式のレスポンスを処理するということがよくあります。 その際、次のようにオブジェクト名.プロパティ名でレスポンスの中から欲しいデータを抽出していました。 // サンプルのレスポンスデータ let menu = { type: 'hamburger', name: 'てりやきバーガー', } // menuのtyepが取得したい場合 console.log(menu.type) // 'hamburger'が出力される ある時、プロパティ名に変数を使いたいことがあり「あれ、どうすればいいんだ？」と手が止まってしまったので、今回はその方法について記録しておきます。 最初に試したこと 以下の方法を試してみましたが、当然うまくいきません。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Immutableとは？Mutableとの違い - Qiita
[JavaScript]今日と一致する日付かどうかを判定する方法 - Qiita![[JavaScript]今日と一致する日付かどうかを判定する方法 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/23e3e274724a2afe63a630da56ce9a25bc2bd5cf/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCSmF2YVNjcmlwdCU1RCVFNCVCQiU4QSVFNiU5NyVBNSVFMyU4MSVBOCVFNCVCOCU4MCVFOCU4NyVCNCVFMyU4MSU5OSVFMyU4MiU4QiVFNiU5NyVBNSVFNCVCQiU5OCVFMyU4MSU4QiVFMyU4MSVBOSVFMyU4MSU4NiVFMyU4MSU4QiVFMyU4MiU5MiVFNSU4OCVBNCVFNSVBRSU5QSVFMyU4MSU5OSVFMyU4MiU4QiVFNiU5NiVCOSVFNiVCMyU5NSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NTg5ZDk5MGU0ZjU0NGFjZjAzYzE2N2RmNjYxZTcxYmE%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwbWFyeWphc3MmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTQ5ZjBmZjg3OWVkNDZiNDJjNmM3YzdmMjJjOTJhY2Fj%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D81a313b9d1cf9511e53163654bc404e0)
