2016年、サーバーサイドエンジニアがゼロからReact/Reduxを学習したときの方法を振り返る
こんにちは。スタジオ・アルカナのサーバーサイドエンジニアなっちゃん(@natsumican63)です。 この記事はReact Advent Calendar 2016の13日目の記事です。 それは2016年も後半へ差し掛かったある日のことでした… 上司「次の案件、この辺の技術使うから軽く勉強しておいてー」 つ React.js + Redux.js + redux-saga + Cordova + ES6 + Babel + OnsenUI + Gulp + Webpack ( ﾟдﾟ) (つд⊂)ｺﾞｼｺﾞｼ (；ﾟ Дﾟ) !?!? (; ﾟдﾟ)「…わ、わかりました」 ※「何でもやります！やらせてください！」が私の口癖なので、決して無茶振りしてくる弊社ではありませんよ！ほんとだよ！！ 斯くして2016年、サーバーサイドエンジニアがはじめてフロントエンドへの門戸を開くこととなった際の学
Essential Electron : Electronの簡潔・平易な概要 | POSTD
Electronとは？ Electronは JavaScript、HTML、CSS を使ってデスクトップアプリケーションを作ることができる ライブラリ です。作ったアプリケーションはMac、Windows、Linuxで動かせます。 次は： なぜ重要？ 定義： JavaScript、HTML、CSS はWeb用の言語で、Webサイトの基本的な構成要素です。Chromeなどのブラウザは、コードをふだん目にするグラフィックに変えて表示します。 Electronはライブラリです Electronはコードですが、再利用でき、自分で書き起こす必要がありません。ユーザはその上にプロジェクトを構成します。 参考資料 Apps built on Electron Electron API Demos （Electronで何ができるかをみてください） なぜ重要？ 一般に、デスクトップアプリケーションは各オペレ
エフェクト作成入門講座 Three.js編 ゲーム演出に役立つマグマ表現の作り方 - ICS MEDIA
ゲームやビジュアライゼーションのWebコンテンツでは、華やかな3D演出の実装をJavaScriptとWebGLで求められることがあります。この記事のシリーズでは、WebGLのJSライブラリとして有名なThree.jsを利用して、3Dエフェクトの作成手順を解説します。 今回、扱うテーマは「マグマエフェクト」。実は以前、このテーマを3Dエフェクト作成ツールであるEffekseerエフェクシアーで扱ったことがあります（記事「エフェクト作成入門講座 Effekseer編 UVスクロールを使ったマグマエフェクトの作成」)。Effekseerはプログラムを使わないデザインツールなので、今回紹介するThree.jsによるプログラムの作り方とはまったく異なります。ですが、表現のエッセンスはどんな作り方でも共通。エフェクトの実装ポイントが理解できていれば、異なった方法でも同じ表現を実装できるのです。 本記事
技術の流行についてゆくこと - アカベコマイリ
以下の記事とはてブを受けての所感。 【翻訳】 2016年にJavaScriptを学んでどう感じたか - Endo Tech Blog はてなブックマーク - 【翻訳】 2016年にJavaScriptを学んでどう感じたか - Endo Tech Blog JavaScript による Web フロントエンド開発環境について総括する記事があると、はてブでは拒否反応が多く見られる。特にフレームワークやライブラリの乱立や JavaScript/CSS の Transpiler 周りに忌避感があるようだ。 確かに複雑である。しかし「それが何の問題を解決しているのか？」に注目すれば単純な要素技術の集合であることが理解できるはず。 例えば Browserify、webpack、Babel などの Transpiler/Bundler 系と ES2015 や TypeScript の関係は、JVM や
【コピペOK】Chart.jsで手軽にブログにグラフを埋め込もう
準備 WordPressなどファイルをアップロードできる場合はファイルをダウンロード、サーバーにアップロードして下さい。 はてなブログのようにファイルをアップロードできない場合はCDNが用意されているのでこちらを利用しましょう。 Chart.js - cdnjs.com - The best FOSS CDN for web related libraries to speed up your websites! グラフを埋め込みたいページに一度だけ以下のファイルを読み込みます。 chart.js base 後は埋め込みたいグラフのコードを貼り付けるだけで表示されます。 棒グラフ PV推移などに使える棒グラフ。はてなアクセス解析風でしょうか。 gist1c24cb9ef50b60c3898638809ed05c45 <canvas id="myChart1" width="400" hei
GitHub - yarnpkg/yarn: The 1.x line is frozen - features and bugfixes now happen on https://github.com/yarnpkg/berry
This repository holds the sources for Yarn 1.x (latest version at the time of this writing being 1.22). New releases (at this time the 3.2.3, although we're currently working on our next major) are tracked on the yarnpkg/berry repository, this one here being mostly kept for historical purposes and the occasional hotfix we publish to make the migration from 1.x to later releases easier. If you hit
実例に学ぶXSS脆弱性の発見と修正方法/line_dm 16 20160916 how to find and fix xss
LINE Developer Meetup in Fukuoka #16 http://connpass.com/event/38413/
Real World React 2 - 2016/09/27 - React Meetup #4 - Qiita
About @mizchi Qiita のフロントエンドエンジニア React勝手エヴァンジェリスト 4ヶ月で14kg痩せた (80kg => 66kg) 近況 ビジネスドメインのリファクタが主でアウトプット少ない 泥臭系の知見は溜まってる 会社のメンバーが増えた + 自分以外のフロント系の人が増えたので、設計を明示しないといけない この資料は何 JSer.info 5周年記念イベント - connpass (2016/01/16) にて発表した資料を加筆したもの 如何にしてReactを「ふつうのウェブアプリ」に導入していくか ふつうのウェブアプリ NOT SPA SPA でなくともReactは使える jQuery に支配された現代のフロントエンドを改善したい => 複雑なモジュールを局所的に解決するのにReactが有用であることを示したい フロントエンドの流れ AJAX以前(~2003)
データビジュアライゼーション・ツール20選 – lab.sugimototatsuo.com
この記事はThe top 20 data visualisation toolsの原著者許諾済みの日本語訳です。 By Brian Suda on September 17, 2012 Translated by Tatsuo Sugimoto 2014年4月28日更新：オリジナル記事が以前のサイトから移転したため発生していた画像の非表示に対応しました。 わたしがもっともよくきかれる質問のひとつが、データビジュアライゼーションを始める方法についてです。このブログの先へ進むには、練習し、さらに実践し、利用できるツールを理解する必要があります。この記事では、シンプルなチャートから複雑なグラフ、地図、インフォグラフィックスまで、ビジュアライゼーションを作成するための20種類のツールを紹介しようとおもいます。ほとんどのツールは無料で利用でき、そのうちいくつかはすでにインストール済みかもしれません。
phiary
phi I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python はじめに 「webpack インストールしといてー」, 「gulp 導入して watch しながら開発してー」, 「React だから ES6 でコード書いてー」 最近こんな会話が当たり前のように現場で飛び交っています. フロントエンドの開発者には HTML, CSS に特化している人 (coder, markup engineer) JavaScript は得意だけど CSS はちょっと弱い人 (javascripter) HTML, CSS, JavaScript 全てを統べる者 (frontend
Re: React.js界隈の人に聞きたい - mizchi's blog
React.js界隈の人に聞きたい 前提 Reactより前に僕がやりたかったこととして、冪等性の担保の為に毎フレーム document.body.innerHTML を書き換えたかったがパフォーマンス的にそれが許されなかったが、Reactは擬似的にそれを達成させてくれたという圧倒的感謝🙏がある— ダイナモポグラマ (@mizchi) 2016年5月23日 SPA 世の中にSPAの需要があるのか？という点考えていたけど、需要がないからSPA技術がいらない、というのはたぶん間違ってて、SPA技術を持たない人が多いからその発想もなく、SPAで達成できることがイメージ出来ないのがアプリケーション設計の縛りになっている、という感じな気がする— ダイナモポグラマ (@mizchi) 2016年5月23日 GmailやTrelloやPivotalやグラブルは異常な技術の集大成ではなく、個別に分解可能な
複数のYouTube動画を埋め込んでも重くならないようにする方法 - オバサンになりたい。
2016/4/27更新 スマホでも動作するよう対応しました こんにちは、錠前（ @jomae_yasushi ）です。 YouTube動画が大量に貼り付けられたページを開いてPCがクラッシュしそうになった経験、ネトサフをよくする人なら一度はあるかと思います。とにかく重いですよね〜 私も先日動画をふんだんに貼り付けた 楽曲紹介記事 を作ってみたのですが、30本の動画を埋め込んだページはノートPCでも表示に少し時間がかかり、スマホでは何度リロードしてもなかなか表示されないといった具合で、これはいかんと急いで対応策を調べました。 ネットのあちこちに書かれている色々な方法を試してみたのですが、JavaScriptの知識に乏しい私でも簡単に実践できた方法を以下に紹介します。ついでに知っておくと理解が深まる周辺知識もまとめてみました。 YouTube動画とサムネイルのURL YouTubeの動画ページ
ESLintをAtomに導入し、Reactの構文にも対応したAirbnbのJSスタイルガイドを使う
最近周りでよく「AirbnbのJavaScriptスタイルガイド」が良いという話を聞くようになりました。ということで、自分もAtomに導入してみたんですが、これがなかなかいい感じです。多くの開発者の意見を取り入れられて作られているスタイルガイドで、特にReactやES6の構文チェックなどにも対応しているので、とても良い書き方の勉強になっています。けっこうお勧めだと思ったので、今回はAtom限定の話となりますが、ESLintを使った導入方法を紹介したいと思います。 ESLintとはESLintは、2013年6月にNicholas C. Zakas氏によってオープンソースプロジェクトとして公開されたJavaScriptの構文チェックツールです。個別にルールをon/offできたり、独自のカスタムルールを設定できたり、公開されている様々なプラグインを組み込んで使うことができたりします。 ESLin
Microsoft EdgeもFlashを一時停止へ 今夏のアップデートで
米Microsoftは4月7日（現地時間）、今夏予定しているWindows 10のアップデート「Anniversary Update」で、Webブラウザ「Microsoft Edge」でFlash動画の自動再生をブロックすると発表した。前日リリースしたFast Ring向けプレビュー（ビルド14316）では既にこの機能が有効になっている。 Edgeで開くWebページ内にFlashコンテンツがあると停止状態で表示され、ユーザーが自主的にクリック（タップ）しないと再生されないようになる。 Microsoftは公式ブログで「モダンブラウザでは、Microsoft、Adobe、Google、Apple、Mozillaなどが開拓してきたWeb標準によってFlashなしでもリッチコンテンツやアニメーションを提供できる」とし、HTML5の方がFlashよりも高速で安全だとも説明した。 米AppleのSa
Angular2実践入門〜ng-japan 2016 セッションレポート〜
Angular2実践入門〜ng-japan 2016 セッションレポート〜 仲 裕介（HTML5 Experts.jp副編集長） この記事は、「ng-japan 2016」のセッションレポート（速報）です。講演内容を忠実に再現していますが、ニュアンス等伝えきれない場合があるので、気になるところは、記事末尾に掲載の講演資料やYoutube動画でご確認ください。 Angular2実践入門 / 白石俊平氏 当メディアの編集長であり、TechFeedの開発者でもある白石俊平氏によるセッション。スライド40枚以上の大作でライブコーディングもあります。 ライブコーディングで学ぶAngular2 今日のライブコーディングを追体験できるスターターキットを作った。是非活用してほしい。 https://github.com/shumpei/angular2-webpack-starter-minimum –
オープンソースのエディタ「Visual Studio Code」がChromeブラウザのデバッガプロトコルに対応。エディタから直接デバッグ可能に
オープンソースのエディタ「Visual Studio Code」がChromeブラウザのデバッガプロトコルに対応。エディタから直接デバッグ可能に マイクロソフトがオープンソースで公開している「Visual Studio Code」が、Chromeブラウザのデバッガプロトコルに対応したことが発表されました。 Visual Studio Codeのエディタ画面から、Chromeブラウザで実行しているJavaScriptのブレークポイントの設定と実行と停止、変数の参照などが可能になります。 JavaScriptのSoruce Map機能も働くため、圧縮済みのコードを実行しても自動的にVisual Studio Code上の圧縮前のJavaScriptコードに対応してそのままデバッグ可能。また同様の仕組みのおかげでTypeScriptのコードもVisual Studio Code上でそのままデバッ
WebAPIのJSONPってなあに？JSONとは別物！ - マネー報道 MoneyReport
JSONの受取 WebAPIを利用してJSON形式のデータを受け取り、ブラウザ上に表示する処理を作っている最中です。 その実装の中で、 「WebAPIを呼び出すのは基本ブラウザのJavaScript側？それともサーバー側のPHPとかでも呼んで良いの？」 という基本的な使い分けが分からず、Web開発者の方々のアドバイスを頂いて切り分けたのが昨日の記事。 やはりブラウザ上でWebAPIから取得したデータを表示するだけなら、ブラウザのJavaScript側で実装するのがスマートで良いそうです(^-^)v ただ特段、ユーザーにデータ表示をさせたりしない用途であればサーバー側で実装してもＯＫとのこと。 まぁ待っている人がユーザーじゃなくて自分（開発者）とかであれば、時間が掛かってもまぁ問題ないですからねぇ。 と、言う訳で昨日はWebAPIを呼び出してJSON形式で返してくれる物で、以前からデータが欲
［4］モダンWebのシステムを効率良く作る開発環境
モダンWebでは、Webブラウザーに処理が分散するのに伴い、メインの開発言語がサーバー向けのJava、C#、PHPなどから、ブラウザーで動作するJavaScriptに変わる。つまり、従来と異なる言語、実行環境でアプリの主要部分を開発することになる。開発者にとっては、とても大きな変化だ。 したがって、モダンWeb導入を成功させるためには、自社の環境に適した効率良い開発環境を構築し、この変化をうまく乗り切ることが重要になる。JavaScriptの開発環境には様々な選択肢があり、それらを選択して組み合わせる必要がある。組み合わせによって開発生産性は大きく違ってくる。 そこで、今回はモダンWebアプリの開発環境について解説する。前半は開発環境の概要と選択基準を解説し、後半は開発環境の組み合わせ例を紹介する。 従来のWebアプリ開発との違い 図1は、標準的なモダンWebのシステム構成の概略である。従
Electron, Reactでタブブラウザを作ってみた - Qiita
知人がesaのデスクトップクライアントを使わなくなった理由が、複数タブが開けなくて不便だったと聞いた。 確かに「Electronのアプリでも複数タブが使えるといいな」と思ったのでさくっと作ってみました。 作ったもの タブ周りの処理を中心に書いた。ブラウザというよりただのQiitaリーダ。 環境 MacOS X 10.10.4 Node.js v.4.1.1 electron v.0.34.3 準備 Electron環境の導入が必須。 30分で出来る、JavaScript (Electron) でデスクトップアプリを作って配布するまでがとても参考になります。 今回はReactをES6で書くのでbabel+webpack+gulpの設定を書いておきます。 gulpfile.js webpack.config.js npmで必要なパッケージをインストールし、gulpでビルド用のタスクを起動すると
初心者ツクラーの為のJavaScript入門 - トモタカラボ
要約 JavaScript、難しいと思いませんか? プログラミングなんて、やったことがない。難しくて分からない。そんな人の為に書きました。 01 はじめに この記事は、ツクールMVに適したJavaScript入門を紹介します。主に以下の人が対象です。 プログラミングって何だか分からない。if文? for文?? 何ですかそれは??? これからJavaScriptを学ぼうと思っている ツクールMVでJavaScriptプラグインを作ってみたい でも、何を揃えれば良いのか、踏み出し方がわからない ツクールMVでJavaScriptプラグインに触れるにあたり、いちばん簡単な説明書のつもりで書きました。JavaScriptプログラミング学習前の、必要な前提知識・ツール・書籍を紹介します。 02 奥深きJavaScript界への第一歩 RPGツクールMVには、JavaScriptプラグイン機構が搭載
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
