Vue.jsとReact.jsを習得するために、どのように学んでいけばよいのか -VueとReactのデベロッパ用ロードマップVue.jsとReact.jsを習得するために、どのように学んでいけばよいのか、次に何を学べばよいのか、その指針となるロードマップを紹介します。 【追記】 Angularのロードマップを追加しました。 基礎知識（HTML, CSS, JavaScript）、制作者として必要なスキル（Git, HTTPSプロトコル, Terminalなど）をはじめ、Vue.jsとReact.jsで何を学ばなければならないのかが、まとめられています。 拡大画像: Vueのロードマップ
JavaScriptのみでGoogle Driveに動的にテキストや画像等を保存する - Qiita
Save to Drive buttonだとData URIが使えない つまり、動的にファイル生成して保存が出来ない！ 今回の方法ならば、頑張れば、画像イメージでもなんでもJavaScriptのみでサーバサイドに 頼らず、Google Driveに保存可能。タダで永続的なストレージAPIが手に入る！ 昔からあるJavaScript APIを使うことで、動的にファイルをGoogle Driveに保存できる 準備 Google Consoleにログイン アプリケーションを登録（Webアプリケーション） ※ただし、Redirect URIsは空にして登録すること！ テキストエリアに入力した内容をテキストファイルとして保存する 拡張子は勝手には付加されないので、「.txt」を付けるなりしないと何のファイルか分からなくなるｗ <script type="text/javascript"> var C
Web最新技術がてんこ盛りのreact-native-domから目が離せない - ナカザンドットネット
パリで発表されていたReact向けプロダクトがあまりにも未来に生きていて興奮したので、紹介させてください。 目次 目次 この記事のゴール 想定読者 はじめに 今回ベースとするソースコード React Nativeは何をするツールか Reactは何をするツールか React DOMとReact Nativeの違い Reactアプリケーションを描画するものたち React DOMの役割 React Nativeの役割 1. ネイティブ処理系の上でJavaScript処理系を動かす 2. Reactを動かす 3. Reactから渡された差分をネイティブViewに適用する React Native DOMはどこがReact Nativeなのか React Native DOMのやばいところ6連発 ReactからはReact Nativeに見えてるのがやばい Objective-C実装をJavaSc
JavaScriptのStreams APIで細切れのデータを読み書きする
近年、PCに搭載されるメモリは爆発的に増えました。16GBや32GBのメモリが搭載されているのが当たり前の時代です。性能の制限が強いスマートフォンですら4GBほど搭載していることがあります。ストレージの読み書き速度もどんどん加速し、昔では扱えなかったようなデータ量をリアルタイムで処理できます。インターネット回線も同様に大量のデータを扱えるようになりました。 しかし現実的な大きさのデータを一度に扱おうとすると、現代でもそれなりに処理時間がかかります。ユーザはレスポンスに対して敏感で、反応が0.1秒でも遅れるとストレスを感じます。しかし時間がかかるものはかかるのです。この問題は一見どうしようもないように思えます。 そこで登場するのが「データを細切れにして処理する」というコンピュータにおける万能の薬です。細切れにして逐次処理すれば、少しずつデータを処理することができ、素早いレスポンスを実現するこ
Webブラウザの操作をJavaScriptで自動化。Headless Chromeのフレームワーク「Puppeteer」がバージョン1.0に到達。ChromeのDevToolsチームが開発
UIを持たずスクリプトから操作可能なWebブラウザのHeadless Chromeを利用するためのフレームワーク「Puppeteer」がバージョン1.0に到達した。Webアプリケーションの自動テストなどに利用可能だ。 GoogleのWebブラウザ「Chrome」は、ユーザーインターフェイスを持たずコマンドラインやリモートデバッグ機能を通じてWebブラウザを操作できる「Headless Chrome」機能を備えています。この機能は2017年6月にリリースされた「Chrome 59」から実現されたものです。 Headless Chromeを利用すると人間がWebブラウザをマウスやキーボードで操作することなく、プログラムでHeadless Chromeを起動し、特定のWebページを読み込み、画面キャプチャの取得や、指定された場所をクリックし、値を入力し結果を取得する、といった操作を自動的に行わせ
フロントエンドエンジニアが2017年触ったWebの技術まとめ(非フロントエンド含む) - Qiita
2017年ももう終わりなので、自分用のメモも兼ねて今年触った技術をざっとメモしてみる。 フロントエンドに対しては大凡モダンなものを使っているけれど、他についてはその限りではないので、自分が古いと感じるものについては来年以降移行したいもの、手をつけたいものもあわせてまとめる。 ちなみに今年のGitHubで見えるだけのアクティビティとしてはこんな感じ。そこそこコードは書いた。 技術の分類 とりあえず以下でカテゴライズしておく。そこそこその他はありそう。 Webフロントエンド Webバックエンド その他Node周り インフラ / ミドルウェア Webサービス(クラウド周り) まとめ Webフロントエンド フレームワーク周り 基本的に去年に続きVue.jsが中心でコードを書く機会が多かった。体感Vue:React:Angularが7:2:1くらい。他もちょこちょこというところ。一定以上有名なもので
くそったれJavaScript - Qiita
以下はWhat the f*ck JavaScript?というリポジトリの日本語訳です。 What the f*ck JavaScript? JavaScriptは素晴らしい言語です。 単純な構文、大きなエコシステム、そして最も重要なところはコミュニティです。 同時に、JavaScriptは非常にトリッキーで面倒な言語でもあります。 幾つかの仕様は我々の仕事を地獄に変え、他の幾つかは笑える仕様です。 WTFJSの大元のアイデアはBrian Lerouxによるものです。 以下のリストは2012年のdotJSにおける彼のトーク、WTFJSに触発されています。 Node Packaged Manuscript 以下の内容はnpmでインストールできます。
やばい、iOSにネイティブアプリ要らなくなるかも。SafariもPWAに対応する可能性 - Qiita
これ以上は長くなるため後述． Chromeは既に，Safariもようやく 上記の通り，Service WorkersがPWAでも最重要な機能の一つである．Chromeでは既に対応済み． しかしSafariが対応しておらず，世間的にはモチベーションの上がらない状況であった（やちまもその一人である）． Safariにおいて，Service Workersの実装状況 No active development が Under Consideration になったのは2015/12/041のことである． 20ヶ月という永遠とも呼べる時を経て，2017/08/032にようやく In Development となったわけであった． ちなみにMicrosoft Edgeでは既に開発中34である． だから何なのか SafariにService Workersの実装がなされると，一気にウェブアプリへの移行が
ES2015(ES6) 入門 - Qiita
はじめに 今更ですが、ES2015(ES6)で追加された機能や構文に関する備忘録です。 「JSは書けるけどES2015(ES6)はわからないっす...!」といった人達向けの記事です。 入門記事のためイテレータやジェネレータ等のわかりづらかったり、 説明が長くなりそうな機能や構文は割愛しております。 ES2015(ES6)とは ECMASCriptの6th Editionのこと。ECMAScript 6th editionの6を取ってES6と呼ばれていたが、 2015年に標準化されたため正式名称はES2015になった。 正式名称がES2015ならES6という名称を使うのは間違いなのか どちらの名称でも問題はない。 ES6の名称の方がエンジニアコミュニティに中では浸透しているらしく、ES6と記載されていることが多い。 詳細は以下を参考。 ES6 or ES2015 ? 〜WEB+DB PRES
Javascriptでよく使う処理をスニペットにしてみた - Qiita
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
Next.js - Qiita
https://zeit.co/blog/next の翻訳です。 > Naoyuki Kanezawa (@nkzawa), Guillermo Rauch (@rauchg) and Tony Kovanen (@tonykovanen) > 2016年10月26日 私たちは、サーバレンダリングされるユニバーサルなJavaScriptウェブアプリのための小さなフレームワークであり、ReactやWebpack、Babel上に構築され、このサイト（訳注: https://zeit.co ）を動作させているNext.jsをオープンソース化することをとても嬉しく思います！ (Next.jsの"Hello World") Next.jsを使い始めるには、package.jsonを含む新しいディレクトリ内で次のように実行してください。
一から始めるJavaScriptユニットテスト - Hatena Developer Blog
この記事は、はてなエンジニアアドベントカレンダー2016の5日目の記事です。 こんにちは、はてなでアプリケーションエンジニアをしている id:shiba_yu36 です。先日、buildersconにおいて、現在所属しているプロジェクトでJavaScriptのユニットテストを導入した知見について、「一から始めるJavaScriptユニットテスト」というタイトルで発表しました。 speakerdeck.com この発表は、実際にJavaScriptのユニットテスト環境を作ってみると非常にハードルが高いと感じたので、そのハードルを少しでも下げられればという思いで、非常にシンプルな例で一から環境を作る例を紹介しました。アジェンダは次のとおりでした。 カクヨムのJS環境 JSのテストツールを整理する 通常の関数のユニットテスト DOM操作する機能のユニットテスト カクヨムのJS環境や、JSのテスト
レトロエンジニアのための近代Webフロントエンド事情 - Qiita
フロントエンド開発という言葉があちらこちらから聞こえてくる。 「反対語はバックエンド開発だから、サーバとかCUIじゃない、アプリとかGUIあたりのことを指す広い意味の言葉だよね。」 ・・・とか思ってたらとんでもない。 世の中ではJavaScript界隈を限定している風な使われ方をしている。 私のような C/C++ メインのレトロエンジニアは肩身が狭くなるばかりである。 本文は、近年のWeb技術に追いつこうと調査した結果のメモ書きである。 n番煎じの内容だが、Web業界にいない人間の視点 なので、私と同類のレトロエンジニア等、一部の人には新しい気付きが与えられるかもしれない。 詳しい人の添削・ツッコミは大歓迎。 詳細はリンク先に任せ、私が思う「わかりやすい順序」で、調べたことをざっと紹介していく。 きっかけ 読み飛ばしてもよい。 Reactを使うとなぜjQueryが要らなくなるのか 数年前、
ゼロから始めるJavaScript生活 - Qiita
（訳者注: これは、JavaScript Stack from Scratchを翻訳し、まとめて読めるように1ファイルにしたものです。元の翻訳と各種ファイルについては、日本語訳forkリポジトリを参照してください。また、原文が活発に更新されているため、訳文も追従して更新されます。ご了承ください。） モダンJavaScriptスタックチュートリアル、ゼロから始めるJavaScript生活へようこそ。 ⚠️️ このチュートリアルのメジャーアップデート版を3月初旬に公開する予定です。ご期待下さい! より詳しく(英語). これはJavaScriptスタックを使い始めるための最短最速のガイドです。このガイドは一般的なプログラミングの知識とJavaScriptの基礎を前提としています。これら全てのツールを一緒につなぎ合わせることにフォーカスしており、各ツールについて可能な限りシンプルな例を提供します。
Web開発が捗るFirebase入門！JavaScriptで「Webユーザー認証」機能を超お手軽に作るチュートリアル大公開！ - paiza times
どうも、まさとらん（@0310lan）です。 今回は、Webサービスなどを開発する際に、ユーザーの管理や識別などで必要になる「ユーザー認証」機能を、できるだけシンプルに作ってみたいと思います。 利用するのは、さまざまなバックエンド機能を提供するGoogleの【 Firebase 】です！ 非常に多機能なサービスですが扱いはとてもシンプルで、簡単なコードを覚えてしまえば誰でも活用できるはずです！ 自分でサーバーを用意する必要もなく、基本的な機能は無料で使えるので今すぐ始められるのも特徴と言えるでしょう。 ■始め方！ 今回は、「メールアドレス」と「パスワード」でログインする一般的な「ユーザー認証」ページの作成に挑戦してみましょう！ そこで、まずはFirebaseにアクセスして新規にプロジェクトを作成します。 好きな「➀プロジェクト名」と、自分の「➁国名」を指定します。 すると、プロジェクト
フロントエンドエンジニアのための動画ストリーミング技術基礎
動画はデータ容量が大きい 画像と違い、動画コンテンツはデータ容量がとても大きいため、データをダウンロードして再生するまでに待ち時間が発生します。 動画のデータ容量が大きい理由はとても単純で、動画は画像データが集合したものだからです。静止画像を人間の目が滑らかに感じられる速さで切り替えて表示することで絵を動かすという表現を実現しています（よくパラパラマンガに例えられますが、そんな感じです）。この人間の目が滑らかに感じる速さというのが 1 秒間に 30 枚だったり 24 枚を切り替えることになります。29.97 (≒30) fps とか 24 fps とかの数字を耳にしたことがあるかと思いますが、24 fps の場合は 1 秒間（s）の間（p）に 24 フレーム（f）を切り替えることを意味します。 データを全て自分の端末にダウンロードしてから再生しようとすると、かなり長い待ち時間が発生してしま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Nuxt.jsとFirebaseでSPA×SSR×PWA×サーバーレスを実現する - DMM inside
TechCrunch | Startup and Technology News
Reactで学ぶ！いまどきのWeb開発
anime.js
