とある師走のWeb制作会社 社長「お〜い、やめ太郎くん」 ワイ「なんでっか」 社長「ちょっと作ってほしい画面があんねん」 社長「↑こんなんを作ってほしいねん」 ワイ「おお、SNSの設定画面とかによくあるやつでんな」 ワイ「簡単ですわ、任しといてください」 社長「おお、ありがとう」 社長「フレームワークはVue.jsで頼むわ」 社長「ほな、よろしく〜」 作り始めてみる ワイ「ええと、このトグルスイッチみたいなんはいくつ必要なんや」 ワイ「3つやな」 ワイ「ほな、このトグルスイッチはコンポーネントとして作っとこか」 ワイ「そしたら3回使い回せるからな」 ワイ「イメージとしては、ToggleSwitchっていう名前のコンポーネントを作って・・・」 <ul class="switch-list"> <li>通知 <ToggleSwitch /></li> <li>検索フィルター <ToggleSw

function init() { var name = "Mozilla"; // name は、init が作成するローカル変数 function displayName() { // displayName() は内部に閉じた関数 console.log(name); // 親関数で宣言された変数を使用 } displayName(); } init(); init() 関数はローカル変数 name を作成し、それから関数 displayName() を定義しています。displayName() は init() の中で定義されている内部関数で、その関数本体の内部でしか利用できません。displayName() 自体はローカル変数を持っていませんが、外側のスコープで宣言された変数にアクセスできるので、displayName() では親関数 init() で宣言された変数 name を

JavaScript は非常に関数指向な言語であり、これにより多くの自由があります。ある時点で作成した関数を別の変数にコピーしたり別の関数に引数として渡し、後でまったく別の場所から呼ぶことができます。 私たちはすでに関数がその外（“外側” の変数）にアクセスできることを知っています ですが、関数が作成されたあとで外側の変数を変更すると何が起きるでしょうか？関数は最新の値 or 古い値どちらを取得するのでしょうか？ また、関数がパラメータとして渡され、別のコード部分から呼び出される場合、新しい場所での外側の変数にアクセスできるのでしょうか？ これらのシナリオやより複雑なシナリオを理解するために、知識を広げていきましょう。 JavaScript では変数を宣言する方法が3通りあります: let, const（モダンな方法）,とvar (過去の名残)です。 この記事では、例には let を使用し

関数とスコープ 定義された関数はそれぞれのスコープを持っています。スコープとは変数や関数の引数などを参照できる範囲を決めるものです。 JavaScriptでは、新しい関数を定義するとその関数にひもづけられた新しいスコープが作成されます。関数を定義するということは処理をまとめるというだけではなく、変数が有効な範囲を決める新しいスコープを作っていると言えます。 スコープの仕組みを理解することは関数をより深く理解することにつながります。なぜなら関数とスコープは密接な関係を持っているからです。 この章では関数とスコープの関係を中心に、スコープとはどのような働きをしていて、スコープ内では変数の名前から取得する値がどのように決まるかを見ていきます。 JavaScriptのスコープは、ES2015において直感的に理解しやすい仕組みが整備されました。 基本的にはES2015以降の仕組みを理解していればコー

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? みなさん、Optional Chaining使ってますか？　私は先日出たTypeScript 3.7 Betaを小さいプロジェクトに導入して使ってみました。これはとても快適ですね。 例によって、Optional ChainingはECMAScriptに対するプロポーザルの一つです。つまり、もうすぐ入りそうなJavaScriptの新機能です。プロポーザルはたくさんの種類がありますが、その中でもOptional Chainingはその高い有用性からこれまで多くの注目を集めてきました。Optional Chainingは2019年6月のTC3

この記事は古くなっており、今後更新されません。新しい React 日本語ドキュメントである ja.react.dev をご利用ください。 以下の新しいドキュメントで最新の React の使い方がライブサンプル付きで学べます。 エフェクトを使って同期を行う エフェクトは必要ないかもしれない useEffect フック (hook) は React 16.8 で追加された新機能です。state などの React の機能を、クラスを書かずに使えるようになります。 副作用 (effect) フック により、関数コンポーネント内で副作用を実行することができるようになります： import React, { useState, useEffect } from 'react'; function Example() { const [count, setCount] = useState(0); /

この記事は古くなっており、今後更新されません。新しい React 日本語ドキュメントである ja.react.dev をご利用ください。 以下の新しいドキュメントでフックを用いた最新の React の使い方が学べます。 クイックスタート チュートリアル react: フック フック (hook) は React 16.8 で追加された新機能です。state などの React の機能を、クラスを書かずに使えるようになります。 フックには後方互換性があります。このページでは React 経験者向けにフックの概要を述べていきます。このページはかなり端折った概要となっています。困ったときには以下のような黄色のボックスを参照してください。 詳しくは React にフックを導入する動機については動機を参照してください。 ↑↑↑ それぞれの節の終わりに上のような黄色いボックスがあります。より詳しい説明

この記事は古くなっており、今後更新されません。新しい React 日本語ドキュメントである ja.react.dev をご利用ください。 以下の新しいドキュメントでフックを用いた最新の React の使い方が学べます。 クイックスタート チュートリアル react: フック フック (hook) は React 16.8 で追加された新機能です。state などの React の機能を、クラスを書かずに使えるようになります。 import React, { useState } from 'react'; function Example() { // Declare a new state variable, which we'll call "count" const [count, setCount] = useState(0); return ( <div> <p>You clic

【forが嫌い！可読性を上げたい！】楽するために学ぶ配列の高階関数(map, filter, reduce等)JavaScriptリーダブルコード高階関数 複雑すぎるforの処理に悩まされたことはありませんか？ プログラミング習いたての頃、forに悩まされた記憶はありませんか？ また、業務で複雑すぎるfor文を見て、これくらい理解できないとやっていけないのか…と悩んだ記憶はありませんか？ 実はそのfor…もっと読みやすい書き方が出来て、簡単に読めるとしたら楽じゃないですか？ いやいや、単にもっと楽したくありませんか？ 今回は個人的に「苦手なfor文」の書き換え(map, filter, reduce等)について、短くなるだけじゃないところを紹介したいと思います。 コードを読む事に神経をとがらせて疲弊したくない人には、オススメしています。(頭を使う労力が減ってると信じたい...) 本記事につ

Elm Meetup in Summer 2019

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

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

posted articles:JavaScript:53%TypeScript:19%関数型プログラミング:14%ECMAScript:13%Elm:12%

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

This book is a balanced, pragmatic look at FP in JavaScript. The first edition is now complete. Read here online for free, or: "Functional-Light JavaScript" explores the core principles of functional programming (FP) as they are applied to JavaScript. But what makes this book different is that we approach these principles without drowning in all the heavy terminology. We look at a subset of FP fou

関数型プログラミングを silver の bullet としてなりふり構わず振り回していましたが、 ちょっと真面目に学ぶ機会を設けてみました。 関数型プログラミング（Functional Programming）を学んだ参考書の紹介と 私の浅い見解についてまとめていきます。 参考書のご紹介 Functional-Light-JS 筆者曰く、筆者の数学的知識は一般レベル、Scheme/Clojure/Haskell は未経験。 そのため関数型本来の意味や各用語の学術的な意味合い等は記載しておらず、 実用的なアプローチと共にお送りする文書とのこと。 いわゆるボトムアップ。 functional-programming-jargon こちらは打って変わって関数型に関する jargon についてまとめています。 1 番ありきでこちらを付加資料として読むと見識が深まるかと思います。 いわゆるトップダ

関数型プログラミングの理解を深めるために、OCamlの本を読んでいます。 プログラミングの基礎 (Computer Science Library) 作者: 浅井健一 出版社/メーカー: サイエンス社 発売日: 2007/03/01 メディア: 単行本 購入: 17人 クリック: 409回 この商品を含むブログ (127件) を見る 「簡約」について調べていたら、分かりやすい説明の記事がありました。 tarao.hatenablog.com ラムダ計算は, 多くのプログラミング言語, とくに関数型言語の原形になっています. ラムダ計算について理解しておくことは, 多くのプログラミング言語の習得に役立つでしょう. ラムダ計算はチューリング完全で, 計算能力としてはふつうのプログラミング言語と同じです. ラムダ計算で計算を書く訓練をしておくことは, 任意の計算を関数のみを使って(他の制御構文を

以前書いた「ラムダ計算基礎文法最速マスター」(以下「最速マスター」)は, 予想以上に多くの人に興味を持ってもらえたようですが, 同時に難しくてわからなかったという人も多かったようです. 反響から察するに, 構文を見慣れていない(と錯覚してしまう)ことが理解の妨げになっていたように思います. ラムダ計算の構文は, 実際には全く特殊なものではありません. このことがよくわかるように, 「最速マスター」のラムダ計算の簡約の例をすべてJavaScriptの構文で書いてみました. ......という内容になるはずでしたが, 気がついたらラムダ計算のインタプリタをJavaScriptで実装していました! 実際に動かせるものは下記URLにあります. https://tarao.github.io/LambdaJS/#js 動作確認と既知の問題 Firefox 3.6 Google Chrome 4.1

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