コードを書く際の重要な要点は、読みやすく他人に理解される「良いコード」を書くことです。しかし、完璧を目指して最初から書こうとすると行き詰まります。代わりに、荒削りながらも動くコードを作成し、徐々にリファクタリングして完成度を高めます。型エラーやリントエラーを無視しても構わないので、まずは動くものを作成しましょう。それからリファクタリングして「良いコード」を作成できます。 コードを書くときに最も大切なことってなんだろう？聡明な読者諸君ならご存知だろうが、コードは書く時間よりも読む時間のほうが長い。だから他人に読まれることを意識して、読みやすい「良いコード」を書かなくっちゃならない。コンポーネントは適切な粒度で分割されていて、適切な名前がつけられている。型システムに安全性だって守られてるし、最新のなんとかアーキテクチャにも準拠している。素晴らしいコードだ。 でも、そんなコードをはじめから書くの

Reactに対する見方をアップデートする 国内外の優れた開発者の方による React の各論の記事は枚挙にいとまがありません。しかし、React の入門を一通り終えた方に向けの浅く広い総論はあまり見かけません。 React の公式ドキュメントのトップページに掲載されている短い3つの文章があります。この React の本質を表現した文章を掘り下げることが、初学者のステップアップにつながるのではないかと考え、各章に対して注釈を加えました。 React について少し深く知ることで、さらに React を好きになったという方を一人でも多く増やしたい。その思いから本記事を執筆しました。 本記事は React の考え方を知ることで、React に対する見方をアップデートすることを目的としています。 Reactとは何か。それはUIを構築するためのJSライブラリである React公式ドキュメントの一文 R

はじめに 今どきのフロントエンドのトレンドを調べていたら、この記事に出会いました。 7 FrontEnd JavaScript Trends and Tools You Should Know for 2020 その中で、コンポーネント単位での共有ツールとしてBitが「今、アツい！」と紹介されており、前々から個人的に気になっていたのと、日本語の情報が少なかったので、公式ドキュメントにあるチュートリアルをやってみました。 ということで、この記事は以下のBit公式ドキュメントの翻訳記事です。 Bit for React - Bit よしなに意訳したり、重要そうな部分を太字にしたりしていますが、基本的に内容は変えていません。 少しでも、皆さんのBitの理解の助けになれば幸いです。 Bit for React 概要 Bitを使用すると、異なるプロジェクトやアプリケーション間でコンポーネントを共有お

機能改善だけでなく、非推奨になった機能も多いですね。 2015年〜　ES2015の正式リリース前 2015年6月まではES2015が正式リリースされていなかったため、Reactのコンポーネントの作成にはReact.createClassが使われていました。 React独自のクラスコンポーネントを生成する機能です。 var Component = React.createClass({ render: function() { return ReactDOM.tagName({options, "Hello"}) } }); React.renderComponent( Component(null), document.getElementById("root") ) 2016年〜　クラスコンポーネントの時代 Reactバージョン15.0.0からはReact.createClassはほとん

JavaScriptフレームワークを比較してみよう (2018年4月) トレンドの移り変わりが激しいWebフロントエンド。2017-2018年現在、JSフレームワークで最も有力な3強がAngular/React/Vue.jsの３つと言われています。他に日本で比較的聞くのはRiot.js、Ember.js、Hyperappなどがありますね。 ちょいとFW選定の技術調査でいろいろ調べたりしたので、このエントリでは初学者なりに比較を整理してまとめてみたいと思います。 なお最後にも書いてありますが、実際に使ったりして得られた知見もあれば、入門レベルだと確かめようがないので本やネットの情報や意見の中で多いものの受け売り的になっているところもあります。フレームワークって結局どれがいいのという話は混乱したり場合によっては荒れがちですが、最終的には情報は各自の判断でご利用ください。フレームワークは開発をよ

Typetalk チームフロントエンドエンジニアの岡藤（@johnykei）です。先日 Typetalk Webサイトリニューアルに伴い、フロントエンドの技術を jQuery から React + styled-components に刷新しました。本記事では、React を用いた Web サイト制作についてお伝えします。 はじめに タイトルにもあるように、僕は今まで JavaScript を書く必要がある時は使い慣れた jQuery を使っていました。 フロントエンドエンジニアという肩書きではありますが、フロントエンドエンジニアという職種は幅広く、僕はどちらかというとページやUIのスタイリングが主な業務で、普段 JavaScript を書く頻度もそんなに高くありませんでした。 最近海外ではそのような業種の人をフロントエンドデザイナーと呼ぶ動きも出てきていますが、jQuery しか使ってい

概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: When (and when not) to use Redux – LogRocket 原文公開日: 2018/01/20 著者: Christian Nwamba サイト: LogRocket 2018/03/13: 初版公開 2021/06/03: 更新 Reduxが登場するまで、複雑なタスクを組むときのステート管理は相当つらい作業でした。Reduxは、Fluxというアプリケーションデザインパターンにヒントを得て、JavaScriptアプリでステートを管理するために設計されました。ReduxはReactと併用されることが多いのですが、ReduxはjQueryやAngular、Vueといった別のフレームワークとも併用できます。 Reduxのサイズは非常に小さい（依存関係も含めてわずか2KB）にもかかわらず、アプリの各コンポーネ

TypeScriptはMicrosoftが開発するプログラミング言語です。JavaScriptのスーパーセットという位置づけで、静的型付けなど強力な言語機能を備えています。TypeScriptは高度なウェブアプリケーションの開発で使われることが多く、ほとんどのフロントエンドエンジニアが使っているといっても過言ではありません。 ▲TypeScriptの公式サイト TypeScriptはコンパイラによってJavaScriptのコードが得られますが、TypeScriptのコンパイラにはECMAScript Modules（ES Modules = importやexport文のこと）をまとめる機能が提供されていません。そのため、ES ModulesのJSファイルをまとめるモジュールバンドラー（例：webpack、Rollup等）をTypeScriptと合わせて使うのが一般的です。 この記事では、

2017年版と2018年版でwebアプリケーション作成時のreactの（マイ）ベストプラクティクスを以下のリポジトリに、まとめてみたので記事にしてみました。 react-best-practices https://github.com/wheatandcat/react-best-practices/tree/master ちなみにタイトルは、その過程で2018年版に削除したpackageです（理由は後述） github サンプルコードの内容は、ログイン/ログアウト + fetchした内容を画面に表示するだけです （ただのサンプルなので、実装はハリボテです） 2017年版 https://github.com/wheatandcat/react-best-practices/tree/master/2017years 2018年版 https://github.com/wheatandc

はじめに 流行りの redux を React 等、他のフレームワーク/ライブラリと【組み合わせず】に触ってみたので、その記録を残します。 redux という言葉を最近よく聞くけど何なのかは知らない人に、redux がどういうものなのかを知って、使い始めてもらえればもらえれば幸いです。 ついでに、redux はユニットテストに落とし込みやすいと知ったので、mochaとchaiを使ってユニットテストも書いています。 良ければご参考に。 対象 この記事は redux を触ったことがない JS はある程度触ったことがある （必須）webpack, ES6記法 を多分に使っているので、読むことが出来る方 を対象としています。 Redux とは こちらの記事が素晴らしくわかりやすい概念の説明（なんならこれだけでもだいたい理解できちゃう…）が載っているのでぜひご覧ください。 reduxは一言でいうと、

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

はじめに React ReduxでREST APIを叩きたいのですが，既存の記事を読んでも何をどうしたらいいのか理解できない。。。 ということで，とりあえず公式ドキュメントを読み解くことにしました。 公式ドキュメントには一通り基本的な事項は書いてあるはず。。。 ReduxのBasicsについては，Reduxの基本 ~ 公式ドキュメント Basics~で，一通り読んでまとめました。 目標 ReduxドキュメントのAdvancedを一通り理解する とりあえず使えなくても読んでなんとなく何をしているのかを理解することを目標にします。その後，サンプルを見ながら自分で実装していこうと思います。 Advanced この章では，基本的な事項は理解していることを前提として，AJAXやルーティングをどのように実装していくのかが説明されています。 章立ては， Async Actions Async Flow

【2016/12/17 追記】 React（flux）を使ったブログエンジンを開発しました！ 何か参考になれば嬉しいです！ Notee https://github.com/funaota/notee 最近React.jsを始めた新米javascripterです！ こんな感じで作ってきました。 【rails/非同期】js初心者がいいね機能をReact.jsで実装してみた。その① http://qiita.com/funao/items/60aa3d7e36cf93e0d832 【rails/非同期】js初心者がコメント機能をReact.jsで実装してみた。その① http://qiita.com/funao/items/55a91ff1732b9c825630 ただ、Fluxがまだいまいちピンときてなかったので、今回しっかり勉強してみました。そのときに役に立った記事をまとめました。 役に立

エンジニアの id:t930 です。 freee Developers Advent Calendar 2017 19日目いきます。 React はその名前を聞くようになってから3年以上が経過し、Webアプリケーション開発の文脈においてはもはや枯れた技術と言えるでしょう。会計freeeでも2015年ごろに Backbone.js から React へのリプレースを行い、現在では Reactコンポーネントだけでも900近いファイルが存在しています。当然このような規模でやっているとリファクタリングも必要になってくるわけで、本記事ではそんな中で得られたReactコンポーネントにおけるリファクタリングの指針について紹介していきます。1 適切な単位に分割する React に限った話ではないですが、巨大で見通しの悪いコンポーネントはメンテナビリティや再利用性の低下を招きます。表示領域、責務、意味付けに

どう考えているか、というのを聞かれたので、記事に起こしておきます。個人の意見です。 Prettier を使う 気づけばコードの整形を人間がやる時代は終わりました。 細かいコーディングスタイルでレビューの時間を取るぐらいだったら、一貫した自動整形ルールを適用すべきです。 人によっては細かいこだわりがあって prettier の規則が気に食わないかもしれず、僕も最初はそうでしたが、Atomで保存する度に自動整形を走らせる prettier の強烈な開発体験によって、最終的にそれらのこだわりを全て捨てることが出来ました。 生産性を求めるなら、現時点では最優先で導入すべきものです。 React.createClass を使わない v16 で削除されたのでいわずもがな。 同様に、 createClass でしか使えなかった mixin 周辺機能も丸ごと deprecated です。 「可能な限りは」

const fsbx = require('fuse-box'); const fuseBox = fsbx.FuseBox.init({ homeDir: 'src/', sourcemaps : true, outFile: './dist/app.js', plugins: [ [ fsbx.SassPlugin({ outputStyle: 'compressed' }), fsbx.CSSPlugin({}) ], fsbx.TypeScriptHelpers(), fsbx.JSONPlugin(), fsbx.HTMLPlugin({ useDefault: false }) ] }); fuseBox.devServer('>main.ts **/*.html', { port: 4445 }); シンプル！！ fuse-boxの特徴として ・TypeScriptはデフォル

はじめに AWS Lambda + API Gateway でAPIつくってReactの部分はS3に置けば超低コストでSPA作れるんじゃね！？という思いつき（みんな気づいてる）を実践してみた記録です。 バージョン Serverless v0.5.5 React v15.1.0 aws-cli v1.10.35 Node.js v4.3 Serverlessはバージョン毎にかなり差異が大きいようなので注意してください（数カ月前に書かれた記事を読んでも？？？となることが多い）。 Nodeの他にPythonでもいけますが今回はNodeでいきます。LambdaはNode v5~系にはまだ対応していません。 プロジェクトをつくる AWSのIDとシークレットを取得する Serverless - Configuring AWS に書いてある通りに進めます。また、AWSは日本語に設定してあるものとします。

ReduxのGithubドキュメントを基に入門用記事として書いたものを、簡潔にまとめました。 もと記事はこちらです。 Redux入門 1日目 Reduxとは Redux入門 2日目 Reduxの基本・Actions Redux入門 3日目 Reduxの基本・Reducers Redux入門 4日目 Reduxの基本・Stores Redux入門 5日目 Reduxの基本・Data Flow Redux入門 6日目 ReduxとReactの連携 Reduxとは Reduxは、ReactJSが扱うUIのstate(状態)を管理をするためのフレームワークです。Reactではstateの管理するデータフローにFluxを提案していますが、ReduxはFluxの概念を拡張してより扱いやすく設計されています。 Reduxはstateを管理するためのライブラリーなので、React以外にもAngularJS

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?