Vue.js を vue-cli を使ってシンプルにはじめてみる - QiitaVue.js を vue-cli でシンプルに過不足なくスタートする はじめに 可能なかぎり、この通りやればできるようにシンプルで過不足なくコマンドをまとめていきます。 (2019.02) Vue CLI 3対応するためにほぼサンプルコードを一新しました。 Vue-cli 2.x版が必要なかたはこちらにバックアップしておいたのでご参照ください。 vue-cli のインストール Vue.jsを使う環境を準備するためのコマンドラインインタフェースをインストールします。
Firebaseで楽々シグナリング──WebRTC入門2016番外編
こんにちは！ 2014年に連載した「WebRTCを使ってみよう！」シリーズのアップデートとしてお送りしているこの連載ですが、今回はもとの連載にはなかった内容を番外編としてお届けします。 httpsのハードル 前回は複数人、複数会議室で利用できるようにして、実用的なアプリを作る準備ができました。ところが実際に使おうとすると、Chromeのセキュリティポリシーと向き合わなくてはなりません。 「getUserMedia()やService Workerなどの強力なAPIは、セキュアな環境でなくては利用できない」というポリシーは今のWebの状況に合わせたものだと思います。では、その環境をどうやって用意すればよいのでしょうか？ もちろん証明書を取得して、きちんとサーバーを立てるのがまっとうなやり方です。最近はLet’s Encryptなど無料で証明書を発行するサービスもあります（参考：“Let’s
最近のjs非同期処理 PromiseとGeneratorの共存 - Qiita
（2015/10/21追記） 記事を書いてから半年経ちましたが、最近はRxの良さを理解したり、ES7のasync/awaitがbabelによって実用的になりつつあったり等、またもやベストプラクティスとはなんだったのか状態です。とはいえ、いまのところPromiseは非同期処理の土台であり続けそうですし、Generatorもasync/awaitへの足がかりとして知っておくことのメリットは大きいかと思いますので、引き続き公開させたままとさせて頂きます。 （追記ここまで） 数ある非同期処理のプラクティスを試してみて、だいたいこれが良いんじゃないかというパターンが固まったので書きます。効用はコールバック地獄からの脱出と結局非同期どれが良いの感の払拭。ES6寄りです。 前提知識 JavaScript Promiseの本 http://azu.github.io/promises-book/ ジェネレ
HTML5 CanvasにJavaScriptでリアルタイムに動画を描画。透過レイヤで動画の重ね合わせなど、新たな表現が可能なPC／モバイル対応コーデック「H2MD」［PR］
Webの表現力は、文字の大きさや色を中心に修飾していた時代から美しいグラフィックやアニメーションの活用へと進み、いまでは大きな動画も積極的に取り入れた、豊かな表現力と情報量を備えるWebが数多く見られるようになりました。 最近では広告や解説動画といった例だけでなく、背景いっぱいに動画を使うといった例もあります。モバイルでもゲームやソーシャルメディアなどを中心に積極的に動画を用いた表現が増えています。 GIFやH.264に足りないもの こうした動画表現を実現する技術には複数の選択肢がありますが、モバイルとWebサイトの両方での対応を考えると、GIFアニメーションかH.264のいずれかを選択するのが一般的でしょう。しかしGIFアニメーションは色数が256色と限られ圧縮率も低いため、小さなサイズで数秒程度といった最小限の動画再生にしか向きませんし、音声との同期も困難です。一方、H.264は高精細
今話題のReact.jsはどのようなWebアプリケーションに適しているか？ Introduction To React─ Frontrend Conference
今話題のReact.jsはどのようなWebアプリケーションに適しているか？ Introduction To React─ Frontrend Conference 外村 和仁（株式会社 ピクセルグリッド） 本記事は、2015/2/21に行われたFrontrend Conferenceの「Introduction To React」の内容を紹介します。 当日の資料は以下にアップされていますので、こちらも参照してください。 Introduction To React // Speaker Deck React.jsとは何か React.jsはFacebook製のJavaScriptライブラリです。 http://facebook.github.io/react/ 公式サイトに、「A JavaScript library for building user interfaces」とあるように、R
[AngularJS] $q サービスで覚える Promise | DevelopersIO
車輪開発大好きおたいがです。こんにちは。（挨拶） 今回は JavaScript で非同期処理を実施するときに用いられる Promise ( プロミス ) についてまとめてみました。Promise とは「非同期処理を抽象化したオブジェクトと、そのオブジェクトを操作する仕組み」のことを指します。 引用 : https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise より Promise インターフェースは作成時点では分からなくてもよい値へのプロキシです。プロミスを用いることで、非同期アクションの成功や失敗に対するハンドラを関連付けることができます。 これにより、非同期メソッドは、最終的な値を返すのではなく、未来のある時点で値を持つプロミスを返すことで、同期メソッドと同じように値を返す
![[AngularJS] $q サービスで覚える Promise | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/648e11f84f388126ccfdea056ad86ba379173295/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2013%2F09%2Fangularjs.png)
歌舞伎座.tech#6「VirtualDOMとReact」 アウトラインメモ
歌舞伎座.tech#6「VirtualDOMとReact」 - connpass に参加して来たのでメモ。 すべてのCSSに死を！これはJSerの叫び！- @kyo_ago スライド: CSSに死を！これはJSerの叫び！ #kbkz_tech CSSが辛い CSSはカプセル化とか継承とか、プログラムからの概念がそのまま持ってこれない ReactStyle js-next/react-style JS内にStyleを埋め込むことができる そのままオブジェクト的に入れられる Template Stringsと合わせればその場でCSSを入れることができる styles=にスタイルを入れる セレクタをあまり考えなくていい style属性でスタイリングする 擬似要素、擬似クラスが全滅 :hover :active などが使えない。 CSSの継承などの概念が消える 自分で頑張る必要がある ユーザプレ
AngularJSのDirectiveを理解する. - Qiita
はじめに ディレクティブは、AngularJSにおいて、ViewとModelの双方向バインドを実現するための根幹的な仕組みである。 ディレクティブは、開発者から見ると、Templateの要素・属性として現れる。 例えば、テキストボックスの入力値とscope.nameを紐付ける場合、Angularではhtmlに下記を記述するだけで、ユーザの入力値がscopeへ即時反映される。 上記コードの"ng-model"はAngularにデフォルトで組み込まれたディレクティブである。 もちろん、htmlの文法上は、ng-modelという名称の属性はinputタグには存在しない。Angularが独自にng-model属性を解釈して、双方向バインディングの機能を実現しているのである(Angularでは、これを「html文法の拡張」と呼んでいる)。 ディレクティブには、ng-repeatや{{...}}等、様
JavaScriptのモジュールシステムの歴史と現状 - Qiita
社内向け資料。自分が書いたコードを説明するために資料作る羽目になった。 昔のことはうろ覚えで雰囲気で書いてる部分もあるので、そこらへん勘弁。 古の時代(~2010) 前提としてJavaScriptは名前空間がwindowの一つしかない。 昔Prototype.jsがあった。もうみんな忘れたけどあの時期はプリミティブなオブジェクトのprototypeを生やしまくって、それが衝突しまくってprototype良くない的な雰囲気が生まれたり生まれなかったりした。 その反省があってか(歴史的に若干微妙な気がするが) jQueryは名前空間を一つに集約した。いわゆる jQueryPlugin は、jQueryのプロトタイプにヘルパを生やしまくっていた。グローバルを汚すのは駄目だけどjQueryの名前空間を汚すのはいいよね、ぐらいの考え。 jQuery非依存なライブラリは、「GoodParts」として、
VOYAGE GROUP エンジニアブログ : 今、クライアントサイドのJavaScriptを書く前に知っておきたいこと ~ 2014年トレンド総まとめ
2015年02月05日16:34 カテゴリ 今、クライアントサイドのJavaScriptを書く前に知っておきたいこと ~ 2014年トレンド総まとめ 皆さんこんにちは。adingoにてFluctという広告配信システムの管理画面を中心にクライアントサイドの開発を行っております、大関です。 今回は、先日、社内のエンジニア向けに開催した「2014年のJavaScriptのトレンド総まとめ」というコンセプトの勉強会の内容について紹介します。 JavaScriptトレンド総括（2014） from Tetsuharu OHZEKI それでは、スライドに書ききれなかった前提事項について、何点か補足と解説をします。 補足と解説 前提: なぜ「2014年」なのか JavaScriptを用いた開発、特にWebフロントエンドとも呼称されるクライアントサイドJSのトレンドは、非常に速いサイクルでの進化を見せて
[Angular.js]factoryとserviceの使い分けについて
最近、プライベートのプロダクトでAngular.jsを勉強がてら使っている。 Yeomanでgenerator-angularを使う方法でやってたり。 で、結構悩んで調べたことがあったので、メモ。 ※使い始めて間もないので、間違いがあったらご指摘ください。 サービスを作るやり方、Angular.jsだと色々あります。 yeoman-generatorのREADMEを参考に挙げると https://github.com/yeoman/generator-angular#service service, factory, provider, value, constant と、実にたくさん。 providerとvalueとconstantは、名前からなんとなく使い分けが判るんだけど、 serviceとfactoryの違いって何よ？って結構悩んだ。 簡単な実装例だと、「結局どっちも書き方が違うだ
AngularJS使い方メモ - Qiita
AngularJSアプリケーション開発ガイド を読みながら勉強したときのメモ。 HelloWorld AngularJS を入手する 公式サイトから angular.min.js をダウンロードする。 HTML を書く <html ng-app> <head> <script src="angular.min.js"></script> <script src="helloWorld.js"></script> </head> <body> <h1 ng-controller="HelloWorldController">{{message}}</h1> </body> </html> angular.min.js を読み込む。 ng-app ディレクティブを付けたタグの中が、 AngularJS のテンプレートとして処理される。 ng-controller ディレクティブを付けたタグの中
ES6時代のJavaScript - クックパッド開発者ブログ
こんにちは会員事業部の丸山@h13i32maruです。 最近のWebフロントエンドの変化は非常に激しく、ちょっと目を離した間にどんどん新しいものが出てきますよね。そんな激しい変化の一つとしてES6という次期JavaScriptの仕様があります。このES6は現在策定中で、執筆時点ではDraft Rev31が公開されています。 JavaScriptはECMAScript(ECMA262)という仕様をもとに実装されています。 現在のモダンなWebブラウザはECMAScript 5.1th EditionをもとにしたJavaScript実行エンジンを搭載しています。 そして次のバージョンであるECMAScript 6th Editionが現在策定中で、略称としてES6という名前がよく使われます。 今回は、他の言語にはあってJavaScriptにも欲しいなと思っていた機能や、JavaScriptでよ
TypeScriptで始めるNode.js入門 - ICS MEDIA
みなさんは普段Node.jsをどのように使っていますか？ サーバーサイドで動くJavaScriptであるNode.jsは、Socket.IOと連携してリアルタイムなウェブコンテンツを作ったり、webpackやgulpのようなフロントエンドエンジニアのツールとして使われたりとさまざまな場面で活用されています。 Node.jsで大規模な開発をする場合、TypeScriptを採用して開発の生産効率性・保守性を上げるのもオススメです。WebStormやVisual Studio Codeを使えばコード補完が効くためプログラミングの効率が劇的に向上し、TypeScriptの静的型付けによってコンパイル時型チェックが行われるので安全性が増します。Node.jsを使って中・大規模なシステムを構築するときはTypeScriptを検討するといいでしょう。 今回はNode.jsをTypeScriptで記述する
最近の行儀のよい JavaScript の書き方 - Qiita
JavaScriptは移り変わりの早い言語です。 もう1年以上経っていますし、記事のメンテもちゃんとできていないので、消し線を入れることにしました。 参考程度のために記事は一応残しますが、より新しい情報を読まれることをお勧めいたします。 はじめに --- 最近では JavaScript の実行環境はブラウザに限りません。（node.js, Web Workers） また、旧来のような <script> 経由でのロードもとうに古くなっています。今は CommonJS スタイルで、require を用いたモジュールのロードを行なうことがより良いとされています。 ですから、次のようなことは改める必要があります。 - var YourModule = {}; などとして、外部から YourModule.hoge(); などと呼び出す書き方 - this === window だと思うこと 今回は、
Ractive.js の紹介 — KaoriYa
HTML の DOM 操作を良い感じで隠蔽してくれる Ractive.js というライブラリを紹介します。 本記事は VirtualDOM Advent Calendar 2014 の13日目の記事です。 VirtualDOM といえば React だ、と言わんばかりの流れですが、本記事では敢えて Ractive.js を取り上げます。Ractive.js が VirtualDOM かって? 確かめてみましょう。 良し、大丈夫。VirtualDOMです。 Ractive.js とは? Ractive.js は本家サイトの説明を借りれば、テンプレートドリブンなUIライブラリです。なんのこっちゃわからないでしょうね。 まずVirtualDOMのメリットとは 生のDOMを直接操作しなくても、JavaScriptのオブジェクトだけを操作すれば、上手いこと自動的に書き換えてくれる ことだと言えます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
anime.js
How to retain scroll position of ng-repeat in AngularJS?
https://h2md.axell-embedded.com/
Hello, ES6 ~これから迎えるJSのミライ~ - @yoshiko_pg