2014年に連載した「WebRTCを使ってみよう！」シリーズですが、内容がすっかり古くなってしまいました。そこで2016年6月の最新情報に基づき、内容をアップデートして改めてお届けしたいと思います。

WebRTC (Web Real-Time Communication、ウェブリアルタイムコミュニケーション) は、ウェブアプリケーションやウェブサイトにて、仲介を必要とせずにブラウザー間で直接、任意のデータの交換や、キャプチャした音声／映像ストリームの送受信を可能にする技術です。 WebRTC に関する一連の標準規格は、ユーザーがプラグインやサードパーティ製ソフトウェアをインストールすることなく、ピアーツーピアーにて、データ共有や遠隔会議を実現することを可能にします。 WebRTC は、相互に関連したいくつかの API とプロトコルで構成されており、これらが連携してこれを実現しています。ここで紹介するドキュメントでは、WebRTC の基礎知識、データ接続とメディア接続、両方の設定方法と、使用方法などを理解するのに役立ちます。 WebRTC は複数の目的に対応しています。メディアキャプチャ

WebRTC (Web Real-Time Communication) is a technology that enables Web applications and sites to capture and optionally stream audio and/or video media, as well as to exchange arbitrary data between browsers without requiring an intermediary. The set of standards that comprise WebRTC makes it possible to share data and perform teleconferencing peer-to-peer, without requiring that the user install p

私は数年前からReactについて意識しており、実際にReactに関する書物などを購入してHello Worldの実装も行なったことがあるのですが、どうもReactは癖が強い気がしていまして（JSXなど）今までテンプレートエンジンを利用してウェブサイトを作成していた自分には、Reactの素晴らしさがまだ実感できていません。 私がこれらデータバインディング系（またはWebコンポーネント化系？）モジュールに初めて触れたのはKnockout.jsが切っ掛けになるのですが、Knockout.jsを利用することで複雑なDOM操作から解放されたときは本当に感動しました。 しかし、それらのモジュールを使いこなしていく過程でより複雑なことをしようとすると、どう実装すれば良いかわからないことがあり、ドキュメントを何度も読み返して悪戦苦闘することがありました。（Knockout.jsならではの苦闘かもしれません

JavaScriptの学習メモ。 今日は『確かな力が身につくJavaScript「超」入門』の第３章を読んでみます。 jsstudy.hatenablog.com 3.5 時間で異なるメッセージを表示する　《論理演算子》 サンプルコード 実行結果 論理演算子 &&演算子 ||演算子 「 | 」の入力の仕方 !演算子 論理演算子 一覧 論理演算とは？ AND　論理積 OR　論理和 XOR　排他的論理和 NOT　論理否定 JavaScriptの論理演算子 まとめ 3.5 時間で異なるメッセージを表示する　《論理演算子》 (p.90) ここまでのif文では「○○が△△だったら」や「××が□□より大きかったら」というかたちの条件式を書いてきました。 それでは、「時刻が19時以降で、かつ21時より前」とか、「9時台、もしくは15時台」というような条件式はどうやって書けばよいでしょう？ 今回は、新しく

JavaScript学習に役立つお話がありました。 「プロトタイピング」でプログラムを試作する練習について紹介されています。 www.webprofessional.jp （前回に引き続き、今回もこのお話から学んでみたいと思います。） jsstudy.hatenablog.com アプリ作成の進め方として、以下の手順が紹介されています。 最初に基本を身に着けよう 計画を立てる コード無しで書いていく 小さな部分に分けて製作する 各パーツを結合する 実験とテスト 外部の助けを求める コードのリファクタリング（再構築） 試行錯誤の重要性 現実には、プロジェクトは完璧なコードをガンガン書くことではなく、たくさんの試行錯誤とリファレンスを幾度も参照して少しずつできあがるものなのです。 実験とテスト この段階ですでに、たくさんの実験とテストを繰り返して動作確認をしてきました。 きちんと動作するならば

JSの学習コスト高いかという問題、言語のコア自体はシンプルだが細かい == とかのハマりどころが多いのと、言語機能自体がシンプルすぎてエコシステムを理解してモジュールを扱うところに辿り着くのが大変、という問題に分類できる— 現場の声 (@mizchi) 2016年8月15日 jQueryの学習コストは、DOMはツリーなんだよという概念の獲得と DOM API の抽象サブセットを覚えるというだけで、2016年現在は jQueryによるUI設計論(ここが高まるとBackboneとかその辺)みたいなものに手を出す必要がないなら、そんなでもないんだろうな— 現場の声 (@mizchi) 2016年8月15日 Reactが難しいと言われる場合、仮想DOMという概念がやや難しい、というか非常にCS的なアルゴリズムとデータ構造が背景にあって、その上で単純なトップレベルAPIとアルゴリズムを理解してないと

Dismiss Document your code Every project on GitHub comes with a version-controlled wiki to give your documentation the high level of care it deserves. It’s easy to create well-maintained, Markdown or rich text documentation alongside your code. Sign up for free See pricing for teams and enterprises 「FEのためのJS基礎」シリーズについて 「JS基礎シリーズ」は、フロントエンドエンジニア向けのJavaScript（以下JS）の中でも、特に実践に必要となる情報のみを個人的にまとめたシリーズです。

JavaScript学習に役立つお話がありました。 「リファクタリング」でプログラムを改善する練習について紹介されています。 www.webprofessional.jp （前回に引き続き、今回もこのお話から学んでみたいと思います。） jsstudy.hatenablog.com アプリ作成の進め方として、以下の手順が紹介されています。 最初に基本を身に着けよう 計画を立てる コード無しで書いていく 小さな部分に分けて製作する 各パーツを結合する 実験とテスト 外部の助けを求める コードのリファクタリング（再構築） リファクタリングとは？ reの意味 - 英和辞典 Weblio辞書 re‐　【接頭辞】 「相互，反，後，退，秘; 離，去，下，再，否，不」などの意. 接頭辞の「re」は、再びという意味 factorの意味 - 英和辞典 Weblio辞書 factorとは (ある現象・結果を生ず

JavaScript学習に役立つお話がありました。 「擬似コード」でロジックを書き出す練習について紹介されています。 www.webprofessional.jp JavaScriptに限らず、プログラミングの基本を学んだら何か動くモノ（プライベートプロジェクト）を作ってみたくなります。でも実際にどうやって進めたらいいのでしょうか？ 現実には、プロジェクトは完璧なコードをガンガン書くことではなく、たくさんの試行錯誤とリファレンスを幾度も参照して少しずつできあがるものなのです。 アプリ作成の進め方として、以下の手順が紹介されています。 最初に基本を身に着けよう 計画を立てる コード無しで書いていく 小さな部分に分けて製作する 各パーツを結合する 実験とテスト 外部の助けを求める コードのリファクタリング（再構築） あ 擬似コードの活用 「コード無しで書いていく」って、どういうことでしょうか？

SnippetsLabにいつも使う関数まとめるついでにQiitaにもメモっとく。 汎用関数 Htmlタグを除去 /** * Htmlタグを除去 * @param {string} str Htmlタグが含まれた文字列(<h1>サンプル文字列</h1>) * @returns {string} Htmlタグ除去された文字列(サンプル文字列) */ const removeHtmlTag = function (str) { return String(str).replace(/<("[^"]*"|'[^']*'|[^'">])*>/g, ''); }; /** * URLをパースしてGET値のオブジェクトにする * @returns {{}} GET値のオブジェクトです。 */ const purseQuery = function () { const result = {}; cons

JavaScriptに限らず、プログラミングの基本を学んだら何か動くモノ（プライベートプロジェクト）を作ってみたくなります。でも実際にどうやって進めたらいいのでしょうか？ 読者からときどき聞こえてくるのは、自分自身でJavaScriptのプロジェクトを進める方法が分からないということです。 理由の1つは、記事では具体的な手順が示されるので、手順そのものを自分で考えることがないからです。またプロジェクトに手こずるもう1つの理由は、まだ作りかけの状態なのに他人の完成作品と比べて落胆することです。 実際のプロジェクトの進め方は記事（私のも含めて）で説明しているほど単純ではありません。現実には、プロジェクトは完璧なコードをガンガン書くことではなく、たくさんの試行錯誤とリファレンスを幾度も参照して少しずつできあがるものなのです。 本記事では、自分でJavaScriptプロジェクトを進めていく方法を説

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

京大マイコンクラブが教える絶対に失敗しない言語の選び方 キミには JavaScript がオススメだ！ 新しい！！ JavaScript自体は1995年出だが, ブラウザベースの需要の高まりから近年再燃してきている言語だ！！ ES6などはとっても新しいぞ！！！ 英語で書ける！！ 英語でプログラミングできるので, 英語が嫌いでないキミにぴったりだ！ 英語で書けるなんて凄い言語だ！！ 動的型付け！！ 型が動的に決定されるから, 型にはまりたくないキミにぴったりだ！ 2016年の新入生プロジェクト JavaSript入門講座のスライドはこちら サンプルコード console.log("Hello World!"); Tweet

JavaScript学習の一環として、Webサイト制作の練習もやってみます。 今回は、プログラムを書くツールを準備します。 以前用意した「Visual Studio Code」に、PHP用の設定を追加してみます。 用語 IDE 統合開発環境 - Wikipedia 統合開発環境、IDE (Integrated Development Environment) は、ソフトウェアの開発環境。 従来、コンパイラ、テキストエディタ、デバッガなどがばらばらで利用していたものをひとつの対話型操作環境（多くはGUI）から利用できるようにしたもの。 最近のIDEには、GUIアプリケーション開発のための迅速なプロトタイピング (RAD) が可能なものが多い。 統合開発環境を使うことによって、巨大かつ複雑なソフトウェアでも、作成者に負担をかけることなく開発することが可能になる。 サンがJava FXの実例をデ

今日は休みの予定だったのですが、急遽仕事になってしまいました。 帰宅は思ったより早かったので、本屋さんへ立ち寄りました。 確かな力が身につくJavaScript「超」入門 JavaScript、ここのところ毎日ネットで情報を読み漁ったり、ちょっとしたコードを試したりしています。 私が普段から利用している本屋さんでも、JavaScriptに関する本が多く並んでいます。興味のある人や必要な人が多いんでしょうね。 その中で、以前から気になっていて、Amazonでも評価の高かった「確かな力が身につくJavaScript「超」入門」を購入しました。 他にも数冊興味のある本はあったのですが、最初に何冊も買って、気負いすぎてもいけないので、まずは入門書を１冊購入です（苦笑）。 まだパラパラと読んだだけですが、図解と実行結果、短めのサンプルプログラムと見やすく解りやすそうです。 １つずつ確実に理解しながら