まずはじめに

everyone outputter というコミュニティのアドベントカレンダーに参加させていただきました。しかし、仕事が大変でなおかつ引っ越しや年末行事などとかぶってしまい、期限内にブログを書くことができず、申し訳ございませんでした。はじめてのブログのため、勝手がわからず、変なことをしてしまっているかもしれませんが、生暖かい目で見てやってください。

whoami

しがないエンジニアです。普段はjavaでservletでSQLをゴリゴリ書く人です。

最近reactなどのモダンフロントエンドについて興味があり、個人で勉強してます。

普段硬いプログラムをいっぱい書いていると、フロントエンド周りのキラキラしたものに興味を持ってしまいますね！

モチベーション

とりあえずアウトプットをしていこうと思ったのはいいものの、何を書けばいいのか悩みました。

そこで、java屋さんがnpmなどモダンな環境を学ぶにあたって躓いたことを書きながら、gatsbyjsの魅力などを少しでもお伝えできればと思い、はじめての技術ブログを書きました！

書くこと

普段の業務ではNodejsやReactなどは一切触れないので、独学で勉強するにあたって躓いたことについて書いていこうと思います。ちなみに自分のレベルとしては、「普段触ってるJavaScriptには const などない... 一体何なんだ！？」というレベルでしたｗそういった本当に初歩的な部分から、自分がちょっとでも「ん？」となったことについて書きます！

書くことリスト

JavaScript (ES6) <- ここを書きます。
Nodejs
npm
React

JavaScript (ES6)

数年前までJavaScriptに関する知識はES5までで止まっていました。（未だに周囲のエンジニアはES5止まりです。業務で使用しないので、仕方のないことなのですが...）そんな数年前の自分に対して教えるつもりで書きます。

JavaScriptのバージョン

JavaScriptにもバージョンがあり、当時の自分が知っていたJavaScriptはES5と呼ばれるものでした。ざっくりとした自分の理解ですが、ECMAScript2015という仕様があり、それ以降のバージョンをまとめてES6と呼ぶイメージです。つまり2015年以降に出てきたJSのバージョンというイメージです。矢文やマサカリが怖いですが、間違っていたらご指摘をお願いいたします。

ES6の変数宣言

まず、変数宣言に関してですが、ES5では、varしか存在しませんでした。varがvariableから来ていることも知りませんでしたｗ ES6でもvarは使用できますが、基本的に使用するのはconstとletになります。というのも、JSのvarで宣言した変数はグローバルとして宣言されたものになってしまうため、ちゃんとスコープが効いた形で使用できるのがconstとletのメリットです。即時実行関数とかは使用しなくて良くなります！

const

定数宣言。constで宣言した変数を変更しようとしてもできなくなります。

const hensu = 123;
hensu = 456; // <- エラー

最近のモダンな言語ではこのような記述ができることが増えてきましたね！プログラマが変数を追う際に、「今この変数に何が入っているんだ？」といったことをしなくて良くなるので、保守性が上がります。このように、最代入ができない不変のものを、「イミュータブル○○」とよく言います。イミュータブルオブジェクトとか、イミュータブル変数とか。英語の強ければ簡単に意味が理解できますが、普段のしごとでは全く聞き慣れない言葉なので一応ご紹介しておきます。

let

変数宣言。letで宣言した変数は再代入が可能です。スコープのついたvarと思っていただければOKだと思います。上記のconstが「イミュータブル」だったのに対して、「ミュータブル」といいます。

基本的にconstで宣言できるものはできるだけconstで宣言して、それができないときにだけletを使うようにしましょう！

ES6でよく使用する無名関数

自分が普段使用しているJavaScriptでは、関数の宣言をする際は、下記のように宣言していました。

function sampleFunction(){
    // ここに処理を書く
}

また、下記のような場面も多々ありました。

function sampleFunction(){
    say('hello world!');
}
function say(message){
    alert(message);
}

それが、色々なサイトを見ていると、下記のように関数名を指定しないで使用できることを知りました。

function sampleFunction() {
    function(message){
        alert(message);
    }
}

確かに、その瞬間その場でしか使わない関数に名前をつけようとしても名前は思いつかないものですｗそんなことに対して考える時間がもったいない！ということで、無名関数便利だ！と思いました。ただ、ここまではES5の世界です。ES6では下記のように記述することができます。

const sampleFunction = () => {
    (message) => {
        alert(message);
    }
}

なんか一気にモダンになりましたね！まず、用語として、=>のことを「ファットアロー」と読みます。イコールがファットなので、->は「アロー」です。なので、無名関数のことを、「アロー関数」ということもあります。

// 1
function(){}

// 2
() => {}

1と2は同じ意味になります。そして、普段Javaを使用している人からすると、イメージしづらいのが下記の記述だと思います。

const sampleFunction = () => {}

単純に関数を変数に代入して使用するイメージです。このように変数に関数を代入することをクロージャといいます。ここで、関数とメソッドの違いについて若干記述します。

関数とメソッド

あくまでも私の認識の話をします。

関数は第一級オブジェクトとして扱うことができ、メソッドは第一級オブジェクトとは限らないこと。
メソッドには副作用があり、関数では副作用を持たないこと。

ここで気になる、第一級オブジェクトとは？副作用とは？ということに関しても記述させていただきます。

副作用とは？

まず、副作用とは、「状態をもつこと」や「状態（state）に対して影響を与えること」を指す言葉だと思っています。では、「状態」とは？簡単な例で言うと、Javaでいうフィールドを持ち、そのフィールドの値によって振る舞いが異なる場合です。この場合は、フィールドに依存しているため状態を持っていることになるので、そのメソッドを使用する場所やタイミングによって戻り値や状態が変わります。中学校や高校で習っていた数式y = f(x)ってありましたよね？この場合f(x)が関数になり、その関数の戻り値がyになります。このとき、xの値によってyの値が決まりますが、xの値が一定であるならば、この世界のどこでも、どのタイミングで実行してもyの値は変わらないですよね？つまり、副作用を持っていないのです。

これが、関数とメソッドの大きな違いだと自分は思っています。

第一級オブジェクトとは？

第一級オブジェクト（ファーストクラスオブジェクト、first-class object）は、あるプログラミング言語において、たとえば生成、代入、演算、（引数・戻り値としての）受け渡しといったその言語における基本的な操作を制限なしに使用できる対象のことである。(参考：wikipedia)

この記述ですべてを表しているかと思います。

おわりに

眠い目をこすりながら少しずつ書いたので誤字脱字はあるかと思いますが、自分なりに頑張って書きました。また、間違った記述があると行けないと思いますので、もし間違った記述があればご指摘をお願いいたします。

...今度からはちゃんと守れる期限で参加したいと思います。

今後はNodejsやnpmなどについても記述していければと思っております。

最後まで読んでいただいた方がもしいましたら、感謝申し上げます。ありがとうございました。

jakelizziのブログ

jakelizziの日常時々Techなブログです

レガシーjavaエンジニアが最近のweb技術に触れたときに調べたいろいろなこと