React、yarnのインストール (create-react-app)

Reactの動作環境の構築にはいろいろなライブラリのインストールが必要ですがそれがまとめられている環境のインストールを説明します。

前回の記事でNode.jsのインストールが完了していることを前提としています。

コマンドプロンプトで上記のコマンドを実行します。

そしてインストールが終わった後に同じくコマンドプロンプトで

でバージョンが表示されれば問題なくインストールされています。

 

ついでにyarnをインストールしてみましょう。

yarnはnode.jsのパッケージマネージャであるnpmと同じようなパッケージマネージャでより信頼度のあるものです。

まあPython界隈のcondaみたいなもんですね。

が完了し

でバージョンが表示されれば問題なくインストールできています。

ちなみに-vでも–versionでも大丈夫だと思います。

 

次回は実際にReactのひな形をインストールしてローカルのブラウザ上で表示してみます。

Node.jsのインストール

reactの記事を書くためここでNode.jsのインストールについて紹介しておきます。

https://nodejs.org/ja/

でLTS(推奨版)をインストールしてください。

設定はそのままでインストールされるディレクトリを確認しといてください。

そしてコマンドプロンプトでnode -vでnodeのバージョンが表示されれば問題なくインストールできています。

 

 

以上です。

Node.js 入門①

Node.jsを使ってみたので覚書きです。

Node.jsではjavascriptでサーバーを動かすことができます。

従来のWebサービスではサーバーサイドでApacheなどのHTTPサーバーでPHPを書いてクライアントサイドと連携させる方法が主流でした。

しかし、そうなるとHTML、CSS、JavaScript、PHP、(データベースではSQL)と多くの言語での開発が必要になります。

そこで、登場したのがNode.jsでこれをサーバーにインストールすればJavaScriptでサーバーを動かすことができます。

また、Node.jsにはライブラリが充実しており、データベースを扱うMongoDBや他の様々なライブラリでサーバーサイドを便利に記述できます。

 

ということで、サーバーを起動させてみましょう。

WindowsにNode.jsのインストールをする

環境

OS:Windows10

node.jsバージョン: v.8.9.3

 

https://nodejs.org/ja/

上記URLから最新バージョンの安定版(LTS)をダウンロードし、インストールします。

インストールは標準で進めていきます。

インストールが完了したらNode.jsのコマンドプロンプトを起動させてください。

Windosの検索窓でNodeと入力すると出てくるかと思います。

Node.jsをローカルサーバーで起動させ、Hello World

Node.jsをローカルサーバーで起動させてみます。

まず、サーバーとなるJavaScriptを記述します。

 

上記をMyServer.jsとして任意の作業ディレクトリに保存します。

 

続いて、Node.jsのコマンドプロンプトを起動させcdにて作業ディレクトリに移動し

でサーバーを起動させます。

そしてブラウザで

localhost:1234

どうでしょうか。

JavaScript②変数のスコープと関数

前回

前回はJavaScriptの基本的な関数について書きました。

 

今回は変数とスコープについてです。

 

 

関数内で関数を宣言した場合も同じです。

 

 

グローバル変数は作らないようにする

上記のスクリプトの場合value1,value2,value3,value4という4つのグローバル変数が追加されています。

JavaScriptでは(昨今のオブジェクト指向言語では)こう言ったグローバル変数の汚染を嫌います。

よってこの問題をオブジェクト指向の機能によって対処します。

名前空間(オブジェクト)を作る

 

変数を作ったオブジェクトのメンバーとしてまとめる方法ですね。

これならグローバル変数として宣言されるのはvaluesオブジェクトのみです。

 

 

クロージャーを利用する

couterへの代入の仕方について注意してください。

この場合、var cnt = 0; と console.log(“cnt:” + cnt); は一度のみの実行となります。

JavaScript①関数文と関数式の書き方。

JavaScriptには基本的な関数の書き方が2種類あります。

関数文と関数式です。

二つの関数を使ってみます。

JavaScript関数の特徴

JavaScriptの関数では引数を多く、あるいは少なく渡すことが可能です。

渡していない変数を関数内で利用した場合、undefinedとなります。

それを解決するのがargumentsを使い引数をループ処理する方法です。

関数文

 

他の言語でもお馴染みの書き方ですね。

()内に変数を入れるなどの動作は同じです。

またファイル内のどの位置で宣言してもかまいません。

宣言前の行に Func1(); とし関数を実行することが可能です。

しかし、もう一度同じ関数名で宣言することはできません。エラーとなります。

関数式

関数式の場合、関数を変数に代入し利用することができます。

この書き方の場合、Func2();と書いて関数を実行しますが、Func2は変数のため、宣言前に実行することはできません。

しかし、変数なので同じ変数名に上書きすることが可能です。