All slide content and descriptions are owned by their creators.
Reactのコンポーネント作成を効率化しよう
All slide content and descriptions are owned by their creators.
React+Canvasで画像コントロール - Qiita
はじめに 以前に投稿したCSSで写真コントロールUIを作るをさらに改良して、 画像をズームしたり、マウスドラッグで動かしたりできて、さらに画像のピクセル座標を取得するUIを作成した。 前回はreact/reduxのスタイル制御で実装したが、 今回はマウスでクリックした位置にピンを立てたりといった、 より複雑な画像コントロールを実現するため、 canvas内包のreactライブラリであるreact-konvaを使ってみた。 react-konvaを使うメリット 普通にcanvasを使うより断然簡単！ これは他のCanvas内包ライブラリも同じかもしれないが、 画像操作の実装が格段にしやすくなった。 前回の投稿のようにスタイルを操作する時の苦労から解放された。 画像のズームやドラッグをする際は、width, height, 画像の位置を示すx, yを操作すればいい。 これらのパラメータをsta
【2年で年収2.5倍】QiitaとUdemyでキャリアアップに成功したユーザーの最強学習法 - pr.qiita.com
エンジニアにとって学習を続けることは非常に重要だ。常に自分のスキル向上を意識して勉強・学習を続けていかなければ、技術の進歩に置いていかれてしまうことになりかねない。 そんな最新技術の知識やスキルを如何に早く、効率良く身に付けるかは大きな課題だが、その課題をオンライン学習によって解決できるサービスの１つに「Udemy」がある。 Udemyとは https://www.udemy.com Udemy（ユーデミー）は、世界で1,500万人以上が利用する世界最大級のオンライン学習プラットフォームで、日本ではベネッセコーポレーションが日本における事業パートナーとして2015年から協業を開始している。 人気講座には「みんなのAI講座 ゼロからPythonで学ぶ人工知能と機械学習」や「【世界で30万人が受講】フルスタック・Webエンジニア講座（2017最新版）」などがあり、ITを中心に最新の技術を学べる
最新版TypeScript 3.0+Webpack 4の環境構築まとめ(React, Vue.js, Three.jsのサンプル付き) - ICS MEDIA
TypeScriptはMicrosoftが開発するプログラミング言語です。JavaScriptのスーパーセットという位置づけで、静的型付けなど強力な言語機能を備えています。TypeScriptは高度なウェブアプリケーションの開発で使われることが多く、Google社内の標準言語として2017年に採用されるなど、注目が高まっています（参考記事『Google社内の標準言語としてTypeScriptが承認される － Publickey』）。 ▲TypeScriptの公式サイト TypeScriptはコンパイラによってJavaScriptのコードが得られますが、TypeScriptのコンパイラにはECMAScript Modules（ES Modules = importやexport文のこと）をまとめる機能が提供されていません。そのため、ES ModulesのJSファイルをまとめるモジュールバンド
いまどきのWebアプリをどう作るか？ フルスタックJavaScript開発のコツ
数週間前、GitHubでプロジェクトをシェアしている開発者に出会いました。そのプロジェクトはTrelloのクローンで、React、Redux、Express、MongoDBからなるプロジェクトでした。全階層、広い範囲にわたりフルスタックのJavaScriptスキルが駆使されていました。 開発者のMoustapha Dioufに、プロジェクトに取り組む際の技術選択、設計、開発について書いてみないかとたずねると、うれしいことに彼は賛成してくれました。この記事があなたのプロジェクトに役立てば幸いです。（by SitePoint Editor：Nilson Jacques） プロジェクトのアプローチを順に見ながら、Webアプリ作成時に実践したことを説明します。紹介するテクニックは、どんなプログラミング言語においても当てはまります。私はJava/JavaScriptの仕事でこの方法を使い、生産性がぐ
Announcing Gatsby 1.0.0! | Gatsby
Gatsby is your friendly, blazing fast static site generator for React. And after nearly a year of research, prototyping, and testing, Gatsby v1 is ready for action ???. Static site generators offer many benefits over traditional dynamic website frameworks — better performance, higher security, lower cost of scaling, and a better developer experience. In v1, Gatsby blazes new ground for static site
ReactでTrelloみたいなToDoリスト＜4＞ immutability-helper - Qiita
関連記事 Reactのスタート Reactのプロジェクト Reactで挨拶 ReactでTrelloみたいなToDoリスト＜1＞ props ReactでTrelloみたいなToDoリスト＜2＞ state ReactでTrelloみたいなToDoリスト＜3＞ prop-types ReactでTrelloみたいなToDoリスト＜4＞ immutability-helper 外部APIとの通信、Props Callback function 今までは外観を作っただけで、カードの操作はできなかった。 カードの操作ができるように機能を追加してみよう。 また著者のサイトから学習用のAPIサーバーを提供しているので、そのサーバーと通信する形で改善する。 カードを操作する機能については、親コンポーネントからfunctionを作り、Props Callbackとして子コンポーネントへ渡す。 diff
[初心者向け]Fluxを一周する | DevelopersIO
Fluxとは Facebook社が提唱した、UI管理のためのアーキテクチャです。Webアプリケーションに限らず、様々なフロントエンド環境に適用できる考え方です。 画像出典 https://facebook.github.io/flux/docs/in-depth-overview.html#content この記事ではFluxそのもの詳細には触れません。英語・日本語を問わず良質な記事がたくさんあるので、気になった方は検索してみてください。 今回は、ネット上にたくさんあるドキュメントやWebサイトを参考にして、Fluxを一通りやってみた内容になります。 重要なのは、常に以下の順序で動作し、例外は無いということです。 Actionが発生する Storeの値が変更される Viewが書き換えられる 最初にレンダリングされたあと、マウス操作などでActionが発行されると、設定したとおりにStore
![[初心者向け]Fluxを一周する | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/5c7875ca2e925ab080276e197b72cab156819526/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2014%2F04%2Fjs.png)
ReactでTrelloみたいなToDoリスト＜2＞ state - Qiita
関連記事 Reactのスタート Reactのプロジェクト Reactで挨拶 ReactでTrelloみたいなToDoリスト＜1＞ props ReactでTrelloみたいなToDoリスト＜2＞ state ReactでTrelloみたいなToDoリスト＜3＞ prop-types ReactでTrelloみたいなToDoリスト＜4＞ immutability-helper stateについて コンポーネント間データの受け渡しに使ったpropsは変更不可（immutable）だった。 変更可能（mutable）なstateについて学んでみよう。 Reactのコンポーネントはthis.stateを用いて、色んなデータを持ちられる。 this.stateは、this.setState()を呼び出して変えられる。 stateが変えたらトリガーが発動されて、該当コンポーネントとその子コンポーネント
Webサイト開発にCSS in JavaScriptを使うのはやめよう | POSTD
9つのおとぎ話 CSSは迷走しています。JavaScriptでドキュメントをスタイリングしているプロジェクトでは、多くの場合誤った理由からその方式を選択しています。本稿では、よくある誤解（神話）を列挙し、そうした問題に対するCSSソリューションを紹介します。 本稿は、特定のプロジェクトや人物への攻撃を意図するものではありません。ここでは、“CSS in JavaScript”(CSS in JS)を styled-components を使用することと定義します。これは、Reactのコンポーネントをスタイリングする最近のトレンドとなっています。 styled-components の作者である Max Stoiber と Glen Maddern 、また彼らに協力した人々は皆、卓越したアイデアと善意にあふれる優秀な人々です。 完全な透明性のために断っておくと、私は react-css-mo
【Google SEO】JSフレームワークを使ったサイトではプリレンダリングを推奨
[レベル: 上級] React や Angular などの JavaScript フレームワークを利用したサイトでは、プリレンダリングしたページを配信することを勧める。 Google の John Mueller（ジョン・ミューラー）氏は、英語版のウェブマスター向けオフィスアワーでこのようにコメントしました。 プリレンダリングで高速表示 プリレンダリング (Prerendering) は、コンテンツの大部分を JavaScript で生成するページで利用されます（正しく言えば、JS に限りませんがここでは深入りしません）。 プリレンダリングでは、ブラウザに JavaScript を実行させてページをレンダリングさせるのではなく、サーバー側であらかじめレンダリングした“静的な”HTMLをブラウザに配信します。 ※補足: この記事で言う「プリレンダリング」は「サーバー サイド レンダリング (
React/Redux/Node.jsのSSR/SPAを速くする6つのチューニングポイント
React/Redux/Node.jsのSSR/SPAを速くする6つのチューニングポイント：大規模ブログサイト表示速度改善 大解剖（終）（1/3 ページ） 2004年から続くブログサービス「アメブロ」が2016年9月にシステムをリニューアル。本連載では、そこで取り入れた主要な技術や、その効果を紹介していく。今回は、React/Redux/Node.jsを使ったIsomorphic JavaScript特有のパフォーマンスチューニング手法や実際にあった問題および、その解決方法について。 2004年から続くブログサービスである「アメブロ」は、2016年9月にシステムをリニューアルしました。本連載「大規模ブログサイト表示速度改善 大解剖」では、そこで取り入れた主要な技術や、その効果を紹介しています。 アメブロのリニューアルでは、React/Reduxを採用し、サーバサイドとフロントエンド両方での
FLOCSSを使ってCSSファイルを20,000行から9,000行にした話 - Qiita
入社して僕が最初にアサインされたのがこのプロジェクト。 サービスをスタートさせたのは今年の２月。最初は外注でとりあえずサービスを作ることに集中していたらしい... その結果、どのスタイルがどこに作用するか全く分からないCSSの魔境でした。 これでは簡単なページを追加するにも一苦労。 そこで、20,000行あるCSSファイルのリファクタリングに踏み切りました。 当時の問題 スタートアップのサービスなのでもっと機能を追加したり、変更したりしたいと言う要望は日に日に大きくなっていました。 一方で、実際に機能を作ったとしてもそれを view に反映させるのも日に日に苦しくなっていました。 僕たちを苦しめていた理由は以下の通りです。 どこにスタイルが作用しているか分からないので、CSSを安易に変更ができない。 新しい部品を付け足す時にCSSの影響範囲を考慮しなくてはならず、プロダクトのUI変更が困難
Webデザイナーの仕事が広がる！ElectronとReactでデスクトップアプリ開発
WebデザインとJavaScriptの技術があれば、デスクトップアプリも自在に作れる時代です。ElectronとReactを使って、SoundCloudの音楽を自由に再生できるデスクトップアプリを作ってみました。 本記事はMark Brown、Dan Prince、Bruno Motaが査読を担当しています。最高のコンテンツに仕上げるために尽力してくれたSitePointの査読担当者のみなさんに感謝します。 GitHubが開発したElectronは、Webデザインのスキルを存分に活用し、クロスプラットホームで軽快に動くデスクトップアプリを作成できます。この記事では、ElectronをReact、ES6、SoundCloud APIと組み合わせて、デスクトップでお気に入りの曲を流せるスタイリッシュな音楽ストリーミングアプリを作る方法を紹介します。また、この音楽ストリーミングアプリをパッケージ
今からでも読んでおきたいReact.js入門資料12選
Facebookが提供しているJavaScriptライブラリ・React.jsは「Yahoo!」「Airbnb」「Reddit」「Netflix」などで採用されています。 日本でも注目され始めているので、React.jsを使ってみたい方は多いのではないでしょうか。 これからReact.jsを学ぶ方の参考になるReact.jsの入門資料（サイト・記事・スライド）を12個ご紹介します。 他のJavaScriptフレームワークからReact.jsに乗り換えようか迷っている方の参考になる資料も紹介しています。 React.jsの学習の参考になるサイト・記事 今話題のReact.jsはどのようなWebアプリケーションに適しているか？ Introduction To React─ Frontrend Conference / HTML5 Expert.jp https://html5experts.j
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Reddit - Dive into anything
Sencha ExtReact: The Most Complete Set of React Components
React Native Animation Fundamentals
JSのコードの自動整形に Prettier が便利だったので、�eslint とAtomから使えるように設定した - Qiita
Jobs at Tab