しばらく前、React 17 RCが発表されました。現行のReact 16に比べて、いくつかの破壊的変更がある一方、新機能が何もないというのが特徴です。Reactチームとしては、新機能が無いとはいえ、破壊的変更も少なくなっておりなるべく16から17へのアップデートを行なってほしいという考えのようです。 この記事では、React 17における破壊的変更のうち、useEffectのクリーンアップのタイミングに関する変更を取り上げます（以下は公式サイトから引用）。 In React 17, the effect cleanup function also runs asynchronously — for example, if the component is unmounting, the cleanup will run after the screen has been updated.

Reactのチュートリアル、たくさんありますよね。どれも質が高く、どこから手をつければいいかわからなくなっちゃいます。 ですがやはり巷のチュートリアルには面倒な問題もあります。今回は面倒ごとを全部すっ飛ばしてReactでのウェブアプリ作りに入門してみましょう。 Reactを始めるには、まずあれとこれとそれとどれと…… Reactやるには、まずNode.js入れてbabel入れてreact入れてreact-router入れて、ついでにredux入れてreact-redux入れて、redux-saga入れて…… Reactめんどくせえ！！！ってのが正直なところだと思います。はい、私もそう思います。ただ、まあ、色々必要なのも事実なので……。 それでもやっぱり「ReactやるならReactだけやりたい。他はどうでもいい」という気持ちは簡単に捨てられるものではありません。そこで今回はそういう面倒全部

ReactにHooksの仕組みが導入されてからずいぶん経ちました。Hooks導入当時のコミュニティの熱狂は、それはもう凄いものでした。「Reactにとんでもない機能が実装されたぞ！」と大騒ぎで、Hooksについての新しい記事を見ない日はありませんでした。 そんな盛り上がりも冷めつつあり、Hooksも実務に密着した「当たり前」の機能になったのかな、と思いました。しかしその一方でまだHooksについてはよくわからないという人も多く、知識の二極化を生んでいるように感じます。 世の中にはReactにすでに全く馴染んでいる人向けのHooksの解説記事は多く見当たりますが、最近のReact初心者に向けてのHooks解説記事はあまり多くありません。この記事では、Hooksについて実例を示しつつReactの基礎的な面からの解説を行います。 React初心者向けのHooks 世の中にはもう多くの高品質なHo

対象読者 JavaScriptとWeb開発の基礎に理解がある方 Reactに興味／関心があり、これから学び始める方 前提環境 macOS Sierra 10.12 Node.js v6.6.0／npm 3.10.3 React 15.4.0 PropsとState Reactコンポーネント内では、PropsとStateという2つのオブジェクトが利用されます。Propsは、コンポーネントを生成するときに親から渡されるオブジェクトで、コンポーネントが画面から取り除かれるまで、不変の値を保持します。対してStateはコンポーネント内で保持される、プライベートなオブジェクトで、可変の変数を保持します。 以下のサンプルは、180秒間のカウントダウンタイマーです。こちらでPropsとStateの使い分けのイメージを説明します。 import React from 'react'; import Rea

サーバーとの通信、HTML5のAPIを使ったアプリケーションの開発に必要不可欠な「非同期処理」について学びましょう。 非同期処理とは背景処理の「非同期」化サーバーとの通信を例に考えてみようPromiseパターン基本的な考え方コードの基本形(1)呼び出した関数がPromiseパターンに従っている場合(2)自分で作成する関数でPromiseパターンを利用したい場合非同期処理の「失敗」の扱い方(1)呼び出した関数の失敗通知を受け取る(2)自分が作成する非同期処理関数で失敗を通知する複数の非同期処理をつなげて順番に行う複数の非同期処理を並列に実行して、全てが完了したら最終処理を行う非同期処理とは背景Webブラウザは基本的に、JavaScriptコードを実行するとき、コードを上から順に1行ずつ実行します。 また、関数を呼び出すと、その関数の実行が終了するまで（return文によって呼び出し元の関数に

Promiseの概念はずいぶん浸透してきました。Promiseは単なる「新機能」のひとつから、もはや非同期処理における基本となりました。有志のライブラリなどもPromiseを返すのが当たり前になってきていて、コールバックでの処理はオプションであることが多くなりました。 さて、そうなってくるとPromiseの概念がどうこうというよりも、実用的なケースに対するコードスニペットがほしくなってきます。そこで今回の記事では、よくあるケースに対しての具体的解決策をいくつか提示します。 この記事について この記事では、JavaScript初心者に向けた、実用的な観点に焦点をあてて説明します。よっていつもの記事ほど正確性や厳密性はありません。 Promiseの「仕様」について詳しく知りたい場合は、MDNを読むなり、仕様書を読むなりしてください。 世界はPromiseに染まった Promise！Promis

# Overviewinterfaceは大きく分けて2つの使い方があると考えてください(結局どちらも同じ)。 1つめは何でも入る型としての使い方で、2つめは関数を集めたものです。1つめは簡単で、2つめが少し複雑です。 1. 何でもはいる型としてのinterface既知の通りGolangは型に厳しいです。型に厳しいおかげで、コンパイラが色々教えてくれるのですが、時にはゆるーく型を扱いたい時があります。そのような時にinterfaceを使います。 package mainimport "fmt"func main() { var i interface{} i = 4 fmt.Println(i) //4 i = 4.5 fmt.Println(i) //4.5 i = "文字列だってはいるんだ" fmt.Println(i) //文字列だってはいるんだ }重要なのは、interfaceで定義

Goやるなら並列処理やるでしょ Goのイメージ = 並列処理というイメージがある人は多いと思います。Goはケアが難しかった並列処理を他の言語よりも比較的扱いがしやすいようになっていて、わりと手軽に書けたりします。ですが、なんとなくで使っていると思わぬメモリリークの発生などが発生したりします。パフォーマンスアップのつもりが、パフォーマンスダウンになってしまうことも・・・。 私自身もちゃんと理解できていないなと感じることがあったので、今回はざっくり理解していきたいと思います。 今回の記事のソースは以下のRepoになります。 github.com 並列処理って何が良いの 何が嬉しいのかって話をまずしますと、以下のような合計で6秒どうしてもかかってしまう処理があったとします。確かに順次処理でやっていくと、各処理は2秒ずつかかってしまいます。ですが、例えばこれが同時に処理できたらどうでしょう？最大で

clean_architecture.md 2020/5/31追記: 自分用のメモに書いていたつもりだったのですが、たくさんのスターを頂けてとても嬉しいです。 と同時に、書きかけで中途半端な状態のドキュメントをご覧いただくことになっており、大変心苦しく思っています。 このドキュメントを完成させるために、今後以下のような更新を予定しています。 TODO部分を埋める 書籍を基にした理論・原則パートと、実装例パートを分割 現在は4層のレイヤそれぞれごとに原則の確認→実装時の課題リスト→実装例という構成ですが、同じリポジトリへの言及箇所がバラバラになってしまう問題がありました。更新後は、実装時の課題リストを全て洗い出した後にまとめて実装を確認する構成とする予定です。 2021/1/22追記: パートの分割と、クリーンアーキテクチャという概念の定義について追記を行いました。大部分の実装例パートを中心

Standard Go Project Layout Translations: 한국어 문서 简体中文 正體中文 简体中文 - ??? Français 日本語 Português Español Română Русский Türkçe Italiano Vietnamese Українська Indonesian Overview This is a basic layout for Go application projects. It's not an official standard defined by the core Go dev team; however, it is a set of common historical and emerging project layout patterns in the Go ecosystem. Some of thes

前回のエントリでGo言語の関数の基本的な部分について書きました。 本エントリでは、前回のエントリでは扱わなかった無名関数について書きます。 Go言語では関数を値として扱うことができて、変数へ格納することもできます。 まずその辺りの動作を以下確認しておきます。 例えば以下のような、引数で与えられた文字列を装飾して戻り値で返す関数があったとします func decorate(src string) string { return "<<" + src + ">>" } この場合には、decorate関数を変数に格納してその変数を経由して実行することができます func main() { f := decorate // 関数を変数に格納 ret := f("golang") // 変数fに対して引数を渡して関数を実行 fmt.Println("decorete result ->", ret)

Reactの続きです。前回は条件分岐のやってみました。今回はループ（繰り返し）です。条件分岐のif文と同様、JSXの中でfor文をそのまま書くとエラーになるので、その回避法とfor文以外の配列やmap()を使った書き方をやってみます。それでは行きましょう！ 【目次】 JSXの中ではfor文も動かない JSXでfor文：失敗例（returnの使い方に注意！） JSX内に普通にfor文書いてみる（動かない） for文を即時関数に入れる（1回しか実行されない？） for文をJSX外部の関数として書く（結果は同じ） JSXは動かないがconsole.log()はループする console.log()にもreturnをつける（一回しか実行されない！） for文の中にreturnがあると処理が止まる JSXのreturnを削除（予想どおり動かない） JSXでfor文：成功例（push()を使う！） 空

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

Docker道場オンライン#1発表資料です。 https://dockerdojo.connpass.com/event/191772/ 配信動画 https://youtu.be/XMw0IvtfxakRead less

The Gopher character is based on the Go mascot designed by [Renée French](http://reneefrench.blogspot.com/). はじめにはじめまして。TIG DXユニット所属の村上です。2020年4月にフューチャーに新卒入社しました。 私の所属しているプロジェクトでは、Go言語を使ってWeb APIを構築しています。私は元々Pythonを主に書いていましたが、Go言語を書くのは初めてでした。そんな私がPythonからGo言語へ入門する際に、苦労した経験や発見を共有したいと思います！ 自分のITスキルセット プログラミング言語 : Python, Java, PHP, C, アセンブリ データサイエンス : 確率統計, 機械学習（特に深層強化学習） ハードウェア : コンピュータアーキテクチャ, 自作P

ざっくり年収1,000万円のエンジニアが10名いる会社では、年間1億円の技術投資がなされているわけですが（地代家賃、ライセンスフィー、PC代など含めるともっと）、年間1億円を正しく詳細に把握して、投資をコントロールできている会社は少ないと思います。会社が創業期であれば、最低限作らなければならない機能などは分かりやすく見えていたりするのでまだしも、そのプロダクトでしっかりとした収益が成り立ち、上場企業となるようなレベル感のプロダクトに対する技術投資となると、一部の大きなプロジェクトは把握していても、細かな投資ポートフォリオを常に把握することは難しいのではないでしょうか？今回はこの部分に一石を投じてみたいと思います。 技術投資量を見える化する 投資の最適化とは言いますが、最適化というのは「To Be」の話ですので、まずは「As Is」を知らなければ話になりません。その、まず「As Is」を知る

技育祭2020にて