今時のjavascriptを勉強させていただく - ひまつぶし開発ブログ

このブログは、プログラマになりたい人間のクソース、ウンコード公開ブログです。ただプログラムが好きだからやってます。

技術記事というよりは自分がやったことの備忘録的なものです。

意味のわからないやり方や、古いやり方も多いと思いますので、参考にはしないでください。

ありがたく勉強させていただきます。

f:id:okumuraa1:20171226201322p:plain

とりあえずparcelでjsの環境だけ作っておく

npm init -y
npm i parcel-bundler --save-dev
touch index.html && touch index.js

index.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>js2018</title>
</head>
<body>
    <script src=index.js></script>
</body>
</html>

index.js

document.write('a')

package.json

{
  "name": "05_2018",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "parcel index.html"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "parcel-bundler": "^1.3.1"
  }
}

npm start

f:id:okumuraa1:20171226203410p:plain

これで最近のesでも動くのかな？

なるほど、.babelrcも新しい、古いの見分けかたがあるのかとりあえず今回はこれでいいや

{
  "presets": ["env"]
}

let constは知ってるから飛ばす

変数のスコープがやっぱり違うんだよな

f:id:okumuraa1:20171226204948g:plain

変数展開はphpでも似たような書き方だし、まあ、わかる

f:id:okumuraa1:20171226210642p:plain

オブジェクトのコピー

できた、かな？

const srcObj = {
    agree: ()=>{
        return 'Hello';
    }
};

const destObj = {};
Object.assign(destObj, srcObj);
console.log(destObj.agree());

f:id:okumuraa1:20171226215319p:plain

クラス宣言

reactとかもコンポーネントがクラス単位っぽいからぜひ覚えたいですね

class SmallAnimal {
    constructor() {
        this.animalType = "ポメラニアン";
    }

    say() {
        console.log(this.animalType);
    }
}

(new SmallAnimal().say());

f:id:okumuraa1:20171226220943p:plain

まあ、こんな感じで、続きはまた今度やりますか