ちゃびん さん プロフィール

  •  
ちゃびんさん: mae's blog
ハンドル名ちゃびん さん
ブログタイトルmae's blog
ブログURLhttp://mae.chab.in/
サイト紹介文30代に突入し、趣味を増やすことに努めています。Linux、WEBアプリ、ピアノなどについて書いています。
参加カテゴリー
更新頻度(1年)情報提供19回 / 365日(平均0.4回/週) - 参加 2010/05/30 02:43

ちゃびん さんのブログ記事

  • WebVRをReactで開発するフレームワーク「React VR」ことはじめ
  • 今年2017年は「VR(バーチャルリアリティ)元年」と呼ばれています。MozillaとW3Cが共同で仕様の策定を進めている「WebVR API」は、今年中にFirefoxやChromeなどの主要なWebブラウザーに実装されると言われています。VR業界を牽引している米Oculusは2017年の動きとして、VR用ゴーグル(ヘッドセット)で動くVRブラウザー「Carmel」やVRコンテンツを開発するためのフレームワーク「React VR」の開発に力を入れています。先日(4/18- [続きを読む]
  • ES2017の新機能「async / await」でPromise(非同期処理)をスッキリ書く
  • いよいよECMAScript(ES2017 / ES8)のリリースが来月(2017年6月)に迫ってきました。すでに仕様は固まり、あとは承認を待つだけの状態となっているようです。ES2017の目玉機能のひとつが、今回紹介する「async/await」です。Promiseを使った処理をすっきり書くことができるようになります。async/awaitはすでに多くのモダンブラウザでは使えるようになっており、すでに利用している方もいるかと思いますが、ES2017のリリースも間 [続きを読む]
  • TypeScriptでReactを書く ? webpackを使った開発環境の構築方法
  • 2017年に入りTypeScriptがだいぶ熱くなってきています。特に以下の2つのニュースはTypeScriptの使用について大きく後押ししてくれるものとなったかと思います。Googleが社内の標準言語としてTypeScriptを追加SlackでのJavaScriptからTypeScriptへの移行こうした動きを受けて、私もTypeScriptへの移行を模索し始めました。今回の記事では、私が現在最も書く機会の多いReactをTypeScriptで書く環境の構築方法を紹介したいと思います [続きを読む]
  • React + Redux + WP REST APIで爆速ブログを作ったので事例として紹介します
  • WordPress 4.7では、これまでプラグインとして提供されていたWP REST APIが機能として組み込まれ、標準でREST APIが使えるようになりました。このことにより予想されることは、PHP以外のプラットフォームで、WordPressのブログテーマやWordPressの機能を使ったサービスが今後どんどん生まれてくると言うことです。ちょうど自分の扱っている新規事業の企画でブログメディアを作ることになりました。新しいメディアを運営する上で、 [続きを読む]
  • フロントエンドの2016年の振り返りと2017年の展望
  • あけましておめでとうございます。2017年も当ブログを何卒よろしくお願いいたします。今年初めての投稿なので、このブログとフロントエンドの2016年を振り返り、2017年の展望でも書いたいと思います。2016年のブログを振り返るまずは当ブログmaesblogの2016年を振り返ります。2016年も2015年に引き続き毎月1記事以上アップを続けることができました。しかし、2016年の記事投稿数は、2015年の45記事に対して大幅に投稿ペースは落ち [続きを読む]
  • 覚えておきたいReactの実装でよく使う基本的な構文(書き方)
  • Reactを勉強し始めた頃は、その概念はわかったとしても、実際にコードを書いてみようとすると、どう書いていいかわからず手が止まってしまう人もいるかと思います。jQueryをバリバリ書いていた人でも、Reactを書こうとすると最初は戸惑ってしまうっていうのはよく聞く話です。ある意味Reactの書き方は特殊です。まずは書き慣れる必要があるかと思います。今回の記事では、初心者向けとしてReactの実装でよく使う基本的な構文を紹介 [続きを読む]
  • HTML 5.1勧告によるHTML5の仕様変更点まとめ
  • 2016年11月1日にW3CによるHTML5.1勧告版が公開されました。いわゆるHTML5.1の正式版となるものです。HTML5の勧告が2014年の10月28日だったので、実に2年ぶりのアップデートとなります。変更点もそれなりにあるので、細かく見てみることにしました。軽くまとめておきますので、参考にしてみてください。まず11月1日に公開されたHTML5.1 W3C勧告版は以下となります。HTML 5.1 W3C Recommendation, 1 November 2016HTML5から今回のHTM [続きを読む]
  • Reactチュートリアル: Intro To React【日本語翻訳】
  • 2016年10月にReactの公式ドキュメントが刷新されました。それに伴いチュートリアルの内容も新しいものとなりました。当ブログでは以前のチュートリアルも日本語に翻訳していましたので、今回も翻訳しました。自分のReactの知識をフル活用して、それなりにわかりやすく訳したつもりです。ぜひ参考にしてください。当記事は以下のReactの公式チュートリアルを日本語に翻訳したものです。Tutorial: Intro To Reactまずこのチュートリ [続きを読む]
  • ReactとAngular 2の比較(React vs. Angular 2)
  • 2016年9月16日に長らく開発が進められていたAngular 2の正式版がリリースされました。自分はどちらかというとReactの人間なので、Angular 2に関してはまだまだ知らないことが多いです。そんな折、TwitterかFacebookを見ていた時に自分のタイムラインに「React vs. Angular 2 | React vs. Angular 2 | hack.guides()」という実に興味深いタイトルの記事の情報が流れてきました。内容はともかく、コードの比較などもあり、しっかり読 [続きを読む]
  • GraphQLのドキュメント「Getting Started」【日本語翻訳】
  • GraphQLはFacebookが開発しているクライアントとサーバー間のデータのやり取りを容易に記述するためのクエリ言語です。Reactでの開発にRelayを使いたいなと思っていますが、GraphQL周りの知識が乏しすぎるので、勉強がてらGraphQLのドキュメントのGetting Startedの部分を和訳してみました。せっかくなのでブログにもアップしておきます。誤訳などもあるかと思いますが、Google翻訳よりはマシだと参考にしていただければと思います [続きを読む]
  • SNSシェア数取得JSプラグイン「cb-sharecount-js v2.0」リリース
  • ブログ記事を評価する上での一つの指標としてSNSのシェア数(ソーシャルカウント)があります。各SNSが用意した純正のシェアボタンなどもありますが、パフォーマンスがイマイチだったり、自由にデザインできなかったり、何かと不便です。そういうわけで2014年に自分でSNSのシェア数を取得するjQueryのプラグインを作りました。それからTwitterのツイート数取得APIの廃止やFacebookのいいね数取得APIの仕様変更などがあり、うま [続きを読む]
  • Reactのバケツリレーの回避にJSX Spread Attributesを利用する
  • Reactは、データは必ず親から子にしか渡せない仕組みになっているため、バケツリレーが随所で発生します。階層が深くなればなるほど、バケツリレーは大変になります。さらに渡せるデータは単なる値のみならず、オブジェクトやら関数など何でもありということから、気がついたらバケツリレーがとんでもなく複雑になっていたということが起こりがちです。今回は、そんなReactのバケツリレーに疲れた時に試してもらいたい一つの方法を [続きを読む]
  • Reactを「webpack + babel-loader」でビルドする方法
  • 自分はReactのビルドにBrowserifyを主に使用しており、昨年には『Reactをnpmでビルドする方法 browserify (watchify) + babelify編』という記事も書きました。ただ、ここ最近のwebpackの人気っぷりはすさまじいものがあり、「React + webpack」という組み合わせが今後のスタンダードになってもおかしくないという状況なので、今回はwebpackでReactをビルドする方法をまとめてみました。目次webpackとはnpm環境の準備Reactの開発に [続きを読む]
  • Babel CLI(babelコマンド)の使い方
  • ES2015も普及し始め、Babelを使う機会も多くなってきていると思います。BabelはES2015以降のJavaScriptの標準機能を現状のJavaScriptに変換して、ブラウザで読み込めるようにしてくれるツールです。通常は、gulp、Gruntなどのタスクランナーや、Browserify、Webpackなどのビルドツールと一緒に使うことが多いと思いますが、Babel CLIという「babelのコマンド」だけでもそれなりのことができてしまうのはご存知でしょうか。今回はそ [続きを読む]
  • Reduxの実装とReactとの連携を超シンプルなサンプルを使って解説
  • 玉石混合状態にあったFluxのフレームワークも、ここ最近ではReduxが首一つ抜け出したような感じとなっています。自分はFacebook/Flux派ではありましたが、先月発売された『WEB+DB PRESS vol.92』に掲載されていた伊藤直也さんのReduxの記事を読んで、Reduxを覚えてみようという気になりました。Redux自体はとてもシンプルで、とっつきやすいと思いました。ただReactとの連携はFacebook/Fluxと比べるとややこしい部分が多いかなとい [続きを読む]
  • nodebrewを使ってMac OSX環境のNode.jsを管理する
  • Node.jsのバージョンアップの速度は前から速いんですが、ここにきて自分の環境のNode.jsのバージョンではインストールできないnpmのパッケージなどが出始めてきました。気が向いたときにバージョンアップなどしていましたが、特に何も起きない限りバージョンアップをおろそかにしがちではありました。これを機に、今更ですがNode.jsのバージョン管理ツールであるnodebrewを使ってみることにしました。導入方法や使い方などをまとめ [続きを読む]
  • ESLintをAtomに導入し、Reactの構文にも対応したAirbnbのJSスタイルガイドを使う
  • 最近周りでよく「AirbnbのJavaScriptスタイルガイド」が良いという話を聞くようになりました。ということで、自分もAtomに導入してみたんですが、これがなかなかいい感じです。多くの開発者の意見を取り入れられて作られているスタイルガイドで、特にReactやES6の構文チェックなどにも対応しているので、とても良い書き方の勉強になっています。けっこうお勧めだと思ったので、今回はAtom限定の話となりますが、ESLintを使った導入 [続きを読む]