JavaScript:プロトタイプチェーン詳解！prototype と __proto__ について 2017 6/03 prototype や __proto__ それぞれを詳しく説明しているものは存在しますが、この２つの違いを明確にまとめている情報があまりありませんでした。 そこでプロトタイプベースとはどういうことなのか、コード上に登場する prototype や __proto__ とは一体何なのかを自分なりに整理してみました。 更新履歴 [2017.06.03] コンテンツ修正しました。sititou70様、ご指摘いただき有難うございました。 [2014.07.19] コンテンツ修正しました。通りすがり様、ご指摘いただき有難うございました。 JavaScript は「プロトタイプベース」のオブジェクト指向言語です。 まず最初にこの「プロトタイプベース」のオブジェクト指向とはいったい

Visual Studio Code は JavaScript 開発が超絶便利になる可能性を秘めている！ クロスプラットフォームでオープンソースな IDE 環境、Visual Studio Code が公開されたので試してみた。 拡張を入れなくても、デフォルトで JavaScript の「自動 Lint」「Grunt、Gulp 連携」「デバッグ」が動いた。なんだかすごく便利そうな予感。 Windows 環境で起動してみたらこんな画面だった。 なんか黒いが、色は好みにカスタマイズできるし、プリセットからも選べる。 フォルダーを開くことから始まる Visual Studio Code にはプロジェクトの概念はない。 [File] > [Open Folder] からフォルダーを開けばよい。 ためしに、過去に作った Node.js 製の livereloadx のフォルダーを開いてみた。 左側に

こちらからダウンロードして、インストーラーを起動するだけなので省略。Visual Studio Codeは他にMacとLinux用のパッケージも用意されている。 こちらからダウンロードできるが、Node.jsのバージョンは二つの体系がある。LTSと呼ばれるバージョンはLong-term Supportの略で、比較的長期間サポートが続けられるので安定運用したい場合は、こちらを使ってねということらしい。もう一つのバージョンであるCurrentは新しい機能が追加された最新版ということなので、ここではCurrentのバージョンを使ってみた。これもインストーラーを起動して、デフォルトの状態でインストールするだけなので特に難しい部分はない。一応、コマンドプロンプトでバージョンを表示できるか確認しておく。 C:\>node --version v6.7.0

軽量スクリプティング言語として、以前から多くの人たちに使われてきたプログラミング言語「Python」。現在では機械学習を実装するための言語としても大きく注目を集めている。 そのPythonでプログラミングを行うために必要となる基本事項をまとめたのが本電子書籍だ。そのための環境として、Windowsアプリケーション開発者にはなじみ深いVisual Studioを選択している。Visual Studioは、いまではC#などのMicrosoft純正言語を使うだけの環境ではない。オープンソースで開発されているさまざまな言語を使って開発をするための便利な環境となっている。 とはいっても、Visual Studio 2015／2017でPythonプログラミングを行うための設定方法を除けば、多くの場面ではその対話環境をベースとして話を進めているので、別の環境や別のOSを使用している方にも役立つ内容とな

今回は取りあえず、VS Codeが組み込みでサポートしているJavaScriptコードのデバッグ機能を利用しながら、VS Codeのデバッグの基本を見ていこう。 ［デバッグ］ビュー VS Codeでデバッグを行うにはウィンドウ左端のアクティビティーバーで［デバッグ］アイコンをクリックする。すると、サイドバーにデバッグに関連する情報が表示されるようになる（これを［デバッグ］ビューと呼ぶ）。ここからデバッグの構成、デバッグの開始などが行える。また、デバッグ中は変数の値や関数の呼び出し階層（コールスタック）を表示したり、ブレークポイントの有効化／無効化を切り替えたりできる。 （1）の［デバッグ］アイコンをクリックすると、（2）の［デバッグ］ビューが表示される。（3）の［デバッグの開始］ボタンをクリックすると、（4）に示された構成でデバッグが開始される（上の画像はデバッグ用の構成が行われていない状

JavaScriptを練習するときブラウザーで実行していました。 JavaScript（JS）のコードは、Visual Studio Code（VSCode）で書いています。 VSCode上でJSを実行して、動作確認する方法がありました。（メモ） 前提（準備） Windowsパソコンの用意 Node.jsの用意 Visual Studio Codeの用意 Visual Studio Codeのデバッガー Node.jsの設定 ステップ実行 用語 まとめ 前提（準備） 今作業している環境は以下のとおりです。 Windows7（32ビット版） Node.js （バージョン 0.12.0） Visual Studio Code （バージョン 1.11.2） を使っています。 Windowsパソコンの用意 予算あり（多） → ThinkPad X1 Carbon 16GBモデルがイイかな？ 予算あ

JavaScriptの学習で、『確かな力が身につくJavaScript「超」入門』という本を読んでみます。 確かな力が身につくJavaScript「超」入門 (確かな力が身につく「超」入門シリーズ) 作者: 狩野祐東 出版社/メーカー: SBクリエイティブ 発売日: 2015/10/30 メディア: 単行本 この商品を含むブログを見る 目次 Chapter1　イントロダクション Chapter2　アウトプットの基本 Chapter3　JavaScriptの文法と基本的な機能 Chapter4　インプットとデータの加工 Chapter5　一歩進んだテクニック Chapter6　jQuery入門 Chapter7　外部データを活用したアプリケーションに挑戦! 出版社情報 著者紹介 目次 Chapter1　イントロダクション 1.1 これからJavaScriptを始める皆さんへ 1.2 Java

マイクロソフトが無償で提供しているコードエディター「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では拡張機能をインストールする必要はありません。 本記事では、ウェブページ

Visual Studio Codeの使い方、基本の「キ」：特集：Visual Studio Code早分かりガイド（1/6 ページ） Microsoft発のクロスプラットフォームなテキストエディタ、「Visual Studio Code」の使い方の基本をまとめる（バージョン1.25対応）。

React VRというのは、Facebookが開発し、GitHubにてBSDライセンスで公開しているオープンソースのVRアプリケーションフレームワークです。現在のところは、Webブラウザ向けにWebGLとWebVRを使ったVRアプリケーションを作るための様々な仕組みを提供しています。 React VRを知らなくても、ReactやReact Nativeなら知っているという人もいるかもしれません。VRコンテンツを作るには新しいフレームワークやライブラリなどを学ぶ必要がありましたが、Reactと同じ考え方を使ってVRコンテンツを作ることができる点が、他のフレームワークと異なる点です。 ネイティブVRが最高の体験をもたらすとは限らない VRというと何らかのVRヘッドマウントを装着して体験するものというイメージがあります。また、VRヘッドマウントは高額で、VRを体験するハードルが高かったことも事実

Home » Oculus、ブラウザで動くWebVRのライブラリ「React VR」を公開 Airbnbなど利用 Oculus、ブラウザで動くWebVRのライブラリ「React VR」を公開 Airbnbなど利用 Oculusは、先週ブラウザでVRコンテンツを利用できるWebVR向けのJavaScriptのオープンソース・ライブラリ「React VR」を公開しました。 ブラウザで動くWebVR”React VR” WebVRはブラウザにVRコンテンツを埋め込み、アプリなどを抜きに再生を可能にする仕組みです。 今回、フェイスブックはWebVRでJavaScriptのオープンソース・ライブラリ「React VR」をローンチしました。JavaScriptを使い、ゲームエンジンを使わずに手軽にVRコンテンツを制作し、ウェブサイトに組み込むことができます。 また、フェイスブックはGitHubに、Re

リアルバーチャル社がメタバースでの市場調査を開始！精度の高さに信頼の声も 体験調査ビジネスVRメタバースリアルバーチャル株式会社VR市場調査 14時間前 KATWALK向けVRゲーム「ゴーストきゃぷちゃー」稼働開始！RED° TOKYO TOWER KATWALKRED° TOKYO TOWER株式会社デジタルリージョンゴーストきゃぷちゃー体験施設VRゲーム 2024/04/16 18:00 企業向けメタバース空間レンタルサービス開始！就活生や内定者と気軽に対話可能 VRスマホVRアプリメタバース株式会社Xメタバース空間レンタルサービスメタバース就活 2024/04/15 18:00 ダイソンがiPhone向けに掃除が楽しくなるARアプリを開発 ARMRiPhoneLiDARDyson CleanTraceダイソン 2024/04/13 18:00 VRニュースイッキ見！「西鉄が九州エリア

As if robocalling wasn’t already enough of a problem, the advent of easily accessible, realistic AI-powered writing and synthetic voice could supercharge the practice. The FCC aims to preempt th

Oculus Connect 3でOculusは今後ネイティブアプリだけでなくWebの世界のVRもサポートすることを発表しました。 WebでもVRができるようになることの利点は以下のようなものがあります。 開発と、開発した作品の共有がシンプルであること 見てくれる人がたくさんいること Web VRを使ったWebページを制作するために、React VRフレームワークを開発中です。 とはいえ、現段階ではWeb VRのWebページを作ってもRiftやGear VRでは表示できません。そこで、Web VRのWebページを表示するためのブラウザCarmelを開発しています。 React VRのコードはこんな感じになります。 React VRはFacebookの開発しているReactフレームワークを元につくられています。 React VRは二つのコンポーネントからなっており、ボタンやテキスト表示を提供

9月末にExpoがアップデートされてiOSのAR Kit対応が行われました。チュートリアルが公開されたのでちょっと手を出してみました。使用する要素としては、 expo three expo-three のみです。3Dオブジェクトの生成はThree.js、レンダリングはExpo、Expo Threeという構成になっています。 Introducing Expo AR: Three.js on ARKit デモ Introducing Expo AR #1 感想 Expoの制限はあるもののARアプリをJavaScriptでかけるというのは前提となる知識量のハードルが下がるかと思います。 チュートリアルやると満足感が得られてしまうのでやや危険ですね。色々いじってみるのは大切な一歩だと思いますが、一歩踏み出した後に自分の発想が広がっていかないのがなかなか辛いところです。

音ゲーは根強い人気のあるゲームジャンルです。やり方も手を使ったりバチを使う、足で行うなど様々な種類があります。手で行うものであればパソコンで再現されたソフトウェアも数多く存在します。好きな方はハマってしまうことでしょう。 そんな音ゲーをWebブラウザベースで楽しめるのがBemuseです。HTML5で作られているので幅広いブラウザで遊べます。 Bemuseの使い方 ゲーム開始前です。 最初はチュートリアルも含みつつ進みます。 え、何これ難しい…。 圧倒的に無理でした…。 Bemuseはキーボード（SDFJKLとスペースキー）を使って操作します。チュートリアルレベルであってもかなり難しいと感じられるはずです。キータイピングの練習にはならないと思われますが、それでも速い指裁きが求められるのは確かでしょう。 技術的にはReact/Reduxを使っています。そういった点でも興味深いソフトウェアです。

サードパーティのNative用SDKのコンポーネントをReactNativeで使いたかったので調べた。公式は英語を読めたとしても説明不足だったり、余計だったり分かりづらいと思う。 当方、Android Java初心者ですので悪しからず。プロパティの設定や、他APIの使用はさらに色々設定が必要。 iOS編はこちら。 公式ドキュメント 一番シンプルなコード Native ComponentのNameとViewインスタンスを返すManagerクラスの作成。 Managerクラス（と他Java module）を取りまとめるPackageの作成。 PackageをMainApplication.javaに登録。 Managerクラスでつけた名前を指定してJavaScriptから呼び出す。 package com.example; import android.widget.TextView; imp

ReactとReact Nativeでコードを共通化し，web / android / iOS (+PC)クロスデバイス開発ReactreactnativeElectronredux React, React Native, Reduxを使って，web, android, iOSアプリのコードを出来る限り共通化します． ReactとReduxを組み合わせて使う場合，見た目を司るPresentational componentとロジックを司るContainer componentにコードを分離します( http://qiita.com/tuttieee/items/a3ca7d9d415049d02d60 )． そこで，Presentational componentは各デバイス固有のコードにし，Container componentは共通化することでロジックをデバイス依存のコードから切り離

関数とはいくつかの処理をまとめ関数名として名前をつけて定義したものです。何度も繰り返し行われる一連の作業を関数としてまとめておき、必要に応じて関数を呼び出して使います。 JavaScript では関数もオブジェクトのひとつで Function オブジェクトです。ここでは JavaScript における関数の定義方法から使い方までを順に解説していきます。

メモですよ。 東京Node学園 17時限目 まずはみなさんご存知Node学園。 「flyjs」 by @jbucaran github.com ES6の`*generators`を活用したビルドシステム。 const paths = { src: "src/**/*.js", dist: "dist" } export default function* () { yield this .source(paths.src).eslint() yield this.clear(paths.dist) yield this.log("Building Fly...") .source(paths.src) .babel({ optional: ["runtime"], modules: "common" }) .target(paths.dist) } これはflyjs自体のflyfile.j

ブックマークしました ここにツイート内容が記載されます https://b.hatena.ne.jp/URLはspanで囲んでください Twitterで共有

こんにちは、nishayaです。 管理部のエンジニアとして、社内向けのシステムを作ったり、 社内で開催されるイベントでコーヒーを淹れたりしています。 社内向けだからこそできる冒険もある、ということで、 現在はReact/Reduxを用いたSPA開発を行っています。 今回のSpeeeKaigi(下記の記事を参照)では、 ReactとReduxを使ってシンセサイザーを作る話をしました。 tech.speee.jp 発表資料 使用したもの React Redux Web MIDI API Web Audio API Web MIDI APIを使用しているため、今回のターゲットブラウザはGoogle Chromeのみとしました。 そのため、webkit プレフィクス付きのAudioContextにも対応していません。 モチベーション 業務でSPA開発にReact/Reduxを使用するという決定をし

Web Audio APIを使えばブラウザでも簡単に音楽アプリケーションが作れる！のですが、APIがあれば万事OKというわけでもなく、どのような方法でWebアプリケーションに組み込むのかという問題もあります。ということで、この記事ではReactとReduxを使ったWebアプリケーションにどういうアプローチでWeb Audio APIを組み込むのかを考えます。 この記事では簡単なシーケンサーをインクリメンタルに実装します。各項目の冒頭にその時点でのデモとソースコードのリンクを用意しています。デモのリンクは次の絵文字で示しています。 音の出ないデモ 音の出るデモ 依存モジュールは次の通りです。BabelとBrowserifyでビルドするというシンプルな構成です。 $ npm install -D babel-preset-es2015 babel-preset-react babelify b

「電源を入れようと思って電源ボタンを押しても、画面に全く何も映らなくなっちゃった…」 パソコンの故障には色々な症状がありますが、上記のようなご相談は中でも非常に多いです。昨日まではしっかり動いてくれていたのに、突然何も動かなくなってしまったらどうすればよいか途方に暮れてしまいますね（泣） この症状について推測できる原因はいくつか考えられますが、その多くが部品の故障によるものです。また、部品の故障の場合はマザーボード（基盤。パソコンの動きをつかさどっている重要な部品の一つです）かもしくはディスプレイの不具合のケースがほとんどで、そうなるとメーカーでの修理代も3万円を軽く超えることが多いです。 ただ、そこで「もう買い換えるか修理するかしか無いのか…」と諦めないで下さい！もしかしたらあなたのその起動しないパソコン、全く別のことが原因で動かないのかもしれません。そしてそのことが原因であれば、ご自身

パソコン工房でモニターを買いたい人の中でも、できるだけ良いスペックかつ安いモニターが欲しいとお考えの方もいるのではないでしょうか。 この記事では、 「パソコン工房でゲーマー向けの安いモニターはある？」 「仕事で使えるおすすめの安いモニターは...

PCハードウェアに詳しくなるまとめTOPへ Windows PCが起動しないトラブルの対処法として，「BIOS初期化・CMOSクリア」がある。 BIOSの設定変更や，ハードウェア接続に伴う問題の解決に役立つ。 PCが起動しなくなったら，「BIOS初期化」で治ることもある 「標準設定の再読み込み」と「CMOS初期化」は異なる ボタン電池を取り外すことで，CMOSクリア 「CMOSクリア端子」というジャンパを活用する手もある CMOSクリアの方法を教えてくれるYoutube動画 PCが起動しなくなったら，「BIOS初期化」で治ることもある PCが起動しなくなるタイミングや原因として： BIOS設定を変更したら，PCが動かなくなった… ハードウェア構成を変えたら，Windowsが起動しなくなった… など，BIOSに関係するトラブルがある。 こういうときは，BIOSの設定を初期化することによって，

BIOSが起動しない状態とは、 パソコンの電源は入るものの、BIOSが正常に立ち上がらないため、 結果としてパソコンの動作そのものが止まってしまう状態です。 パソコン本体や内蔵ハードディスク等、各種部位の電源が入らないため、 パソコンが起動できないのとは異なります。 というわけで、以下の条件を満たします。 電源ランプが点灯し、電源、CPU等の冷却ファンは回転する ハードディスクのアクセスランプは、最初点灯しても数秒後には完全に消灯 画面は真っ暗で何も表示されず、ビープ音も鳴らない BIOSが起動しない限り、ディスプレイには何の信号も送られないため、画面は真っ暗のままのはずです。 もちろん、BIOSのビープ音すら鳴りません。 ビープ音が鳴っているのであれば、それはBIOSが鳴らしているのであり、 メモリやビデオカード等に異常があることを、画面に表示できない代わりに音で示しているのです。 逆に

Windowsではおなじみのウィンドウスナップ機能を実現するオープンソースのMacアプリ「Snapp」が公開されています(Hacker News)。 Snappを実行し、ウィンドウをデスクトップの左右端にドラッグすると左右半分のサイズに、下端にドラッグすると下半分のサイズに、上端にドラッグすると全画面サイズにリサイズされます。 使用方法 今のところバイナリは提供されていませんので、自力でビルドする必要があります。 git clone https://github.com/gbrueckner/Snapp.git cd Snapp.git make install 「make install」するとSnapp.appがアプリケーションフォルダにコピーされ、ログイン時に自動起動するよう設定されます。「make uninstall」でアプリの削除よび自動起動が解除されます。 なお実行する際は、プ