すべてのカテゴリ

Javascript の変数の話Javascript に限らず、プログラミング言語には変数という概念があります。プログラムで扱うデータを入れる場所です。最新の Javascript では３種類の変数を利用する事ができます。＊　const＊　let＊　var　です。constとletは後から導入された物ですが、基本的にはこの２つを利用することが推奨されています。理由は、なるべくバグを出さないようにするためというのが大きいと思います。どうして、constやletを使うとバグを生み出し易いのかご存知ですか？この記事では Javascript での変数について書いてみました。varだけでプログラムは書けます！当たり前ですが、varだけでもプログラムは書けます。慎重にコードを書けば別にvarを使う事自体は問題ないのですが、少し大きなプログラム、特に後から手直ししたりする場合にバグの原因になるのでconstやletを使うことが推奨されています。幾つか理由がありますが、var の問題は大きいものが２点です同じ名前の変数を複数宣言できる変数の宣言前の参照も許されている（値はundefined）ESLint などプログラムをチェックするプログラムを使えば、「危ない」コードは見つけてくれます。そうした仕組みを上手く利用する場合は、大きな問題ではないのですが、こうした、仕組みを利用しない場合バグの原因になり易いので、letやconstが導入されました。それでも、verが残されているのは、互換性のためなので、新しくプログラムを書く際には基本的には「var」は使わないのがいちばんです！バグの少ないプログ

Reactのステートは注意が必要です！Reactを利用してフロントエンドのUI（ユーザーインターフェース）を作ると、変更があった部分だけを書き換えてくれるので便利です。これに関連して、前回投稿した変数の扱いでReactのステートを使う場合には注意する必要があるという話を書きました。これに関しては、ご質問が多かったのでもう少し詳しく書いて行く事にします。この機能を利用するには「ステート（state）」で変数を管理して、ステートの変化のイベントを検出する必要があります。ところが、配列やオブジェクトはReactのステートではイミュータブルではないので、正しく実装しないと意図した動作をしない事があります。入力した文字列を配列に追加するアプリ少し具体的な例で説明をします。 シンプルなあぷりとして、文字列を入力する「input」とボタンのシンプルなフォームでボタンが押されたら、入力された文字列を配列に追加するアプリを考えます。これを、Reactのクラスコンポーネントで書くとimport React from "react";import { produce } from "immer";import "bootswatch/dist/spacelab/bootstrap.min.css";import "./App.css";interface IProps {}interface IState {  samples: Array<string>;}class App extends React.Component<IProps, IState> {  privat