Web初心者がいきなりHyperのプラグインを書いてみた-v0.1.0

この記事はシリーズもののような形で更新します。~~定期とは言ってない~~
また、ど素人なので**間違いだらけですのでお気をつけてください。**わかる人は修正等いただけるとありがたいです
作成中のレポジトリはこちら: [Cj-bc/hyper-puchi-mirei](https://github.com/Cj-bc/hyper-puchi-mirei )

関連記事:

* [Web初心者がいきなりHyperのプラグインを書いてみた(前書き)](https://qiita.com/Cj-bc/items/105f489c62e345692f0e)
* →[Web初心者がいきなりHyperのプラグインを書いてみた-v0.1.0](https://qiita.com/Cj-bc/items/7bac09ee4513a3898938)

---

# v0.1.0内容

* 美玲をHyper上に描画する

#　参考URL

 * @vimyumさんの[Hyperターミナルのプラグインを作ってみよう！
](https://qiita.com/vimyum/items/569280135ee5d4da33bd)

# 1. 上記参考記事を読みながら雛形を作る

まず、`decorateTerm`というもの？をオーバーライドする必要があるみたいです。
オーバーライドというか、pythonのデコレータ的に考えればいいのかな？
~~ほぼ丸ごと使わせていただいていますが~~完成したのは以下のコードです。

```react:完成したコード
styles = { 
  img: {
    zIndex: 20, 
    position: "absolute",
    bottom: "0em",
    right: "1em",
  },  
}


exports.decorateTerm = (Term, { React, notify }) => {
    return class extends React.Component {  // React.Componentを継承したクラスを返す
        render () {
            const children = [ 
                 React.createElement("img", {style: styles.img, src: "/path/to/img/puch-mirei.png"}), //フルパスなので省略
                 React.createElement(Term, this.props),  //元のElementをそのまま返す
            ];  
            return React.createElement("div", {style: { width: '100%', height: '100%', position: 'relative' }}, children);                                                                                  
        }   
    }   
}
```

`decorateTerm`に、再定義した関数を代入しているのですね。
そのために、内部で元々の`decorateTerm`の中身も足しています。

```react

React.createElement(Term, this.props),
```

元のElementに加え、画像のElementを書き足して

```react

React.createElement("img", {src: "/path/to/img/puch-mirei.png"}),
```

それらすべてを'div'で囲んで返しています

```react

return React.createElement("div", {style: { width: '100%', height: '100%', position: 'relative' }}, children);                                                                                  
```

divで囲むのは、ReactのDOMが一つのコンポーネントしか扱わないからとかなんとかみたことがありますがわかっておりませぬ~~どなたか教えてください...~~

また、この時点でのスクリーンショット:

<img width="1439" alt="スクリーンショット 2018-07-18 9.32.12.png" src="https://qiita-image-store.s3.amazonaws.com/0/222594/c04ce3b8-565e-b706-841a-911087b92572.png">


個人的につまづいた&大事だなと思ったところを書いていきます。


## 1.1 構文について

まずJSに慣れていない身なので、独特な構文に戸惑いました。
それが、

```javascript

a = ( val1, val2 ) => {
  ...
}
```

という形の、**アロー関数**です。
他の言語にもあるのかもしれませんが、少なくともshellscriptにはありません。
これに関しては、 @dondoko-susumu さんの[ES6アロー関数](https://qiita.com/dondoko-susumu/items/c4ad525cbdb91b7dc641)がとても分かり易かったです。
曰く、
> functionキーワード、ブロックの{}、returnの省略

これをshellscripterとして解釈する...のはちょっと無理がある(できなくはない気はするが、変数に関数の代入はしない)のですが、他の言語ではよくある関数を代入する式ですね。
つまり、上記の場合、

```
val1とval2を引数にとる無名関数{...}をaに代入する
```
ということです。
これ、わかってしまえばわかりやすいけど最初は戸惑った...

## 1.2 画像のパスについて

~~これがいまだに謎なのですが、自分の環境では、画像にはフルパスを指定してやらないとうまく表示されませんでした...
相対パスだけでなく、`~/`や`$HOME`も使えませんでした（こっちは当たり前かも？）
何か悪い点などあれば教えていただきたいです >_<~~

### 7/20　追記

コメントにて、 @vimyum さんに`__dirname`変数を教えていただきました！
>画像のフルパス問題については、__dirnameを使うとindex.jsがあるところのパスを参照できます。
>ですので、ソースコードを下記のようにすればうまくいくのではないかと思います。
>
>{style: styles.img, src: __dirname + "/img/puch-mirei.png"}

実際にこう書き換えたところ、きちんと画像が表示されましたありがとうございます！！

## 1.3 render内の`return`での返り値について

これが一番つまづきっぱでした！
元の参考記事では

```react

 return React.createElement("div", null, children);  
```

となっていました。
が、これだと **Hyperの上半分くらいまでしかターミナルとして使えませんでした**
こんな感じ↓
<img width="1440" alt="スクリーンショット 2018-07-18 11.13.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/222594/d94dfe7f-c7df-4a90-650b-5d714e3e23ec.png">


記事の作者さんの[gistの87行目](https://gist.github.com/vimyum/d575935a53edc13925058495281b14fc#file-index-js-L87)を参考にして、`React.createElement`の二つ目の引数を`{style: { width: '100%', height: '100%', position: 'relative' }}`このように変えてみました


```react

 return React.createElement("div", {style: { width: '100%', height: '100%', position: 'relative' }}, children);  
```

するとっ！！

<img width="1439" alt="スクリーンショット 2018-07-18 9.32.12.png" src="https://qiita-image-store.s3.amazonaws.com/0/222594/c04ce3b8-565e-b706-841a-911087b92572.png">

**全画面使えるようになったZE**


というわけで、美玲を表示することができるようになりました。わーい。

---

# ...で終わると思ったか

上記のコードの中で一切触れられていない部分ありましたね。
そうですここです

```react
styles = { 
  img: {
    zIndex: 20, 
    position: "absolute",
    bottom: "0em",
    right: "1em",
  },  
}
```

スタイルの宣言してるところですよ。
おそらく、CSS関連なのかな？？と無知ながら思っております。
これも、例のごとく[gist](https://gist.github.com/vimyum/d575935a53edc13925058495281b14fc0)から借りてきたものになります。

このようにして宣言しておけば、

```
styles.img
```

といった感じで呼び出せるんですね。
それで、これを画像に適用させているのがこちら

```react

React.createElement("img", {style: styles.img, src: "/path/to/img/puch-mirei.png"}),
```

`createElement`の引数として、`{style: styles.img}`と書くことで埋め込んでるわけです。


ここで一旦Reactのお話

## `React.createElement`

この関数は、新たなHTML要素を生成する...ものだと思っています（素人考え）

```react

React.createElement("<タグ名>", {<属性名>: <属性の値>}),
```
といったように書くことができ、

```react

React.createElement("img", {src: "path/to/img"})
```

なら

```html

<img src="path/to/img">
```

といった感じです。



---

# あとがき
というところで本当のおしまいです。
とても軽い内容ですし、ソースコードを書き始めてきちんと動いて楽しくなっちゃってヒャッハー！！な気分でそのまま書いているのでみやすさなどもありませんし最早正確さがログアウトしております...
ですが、思ったよりも簡単に作れることがわかったのでとても良かったです。
もちろん、しっかりとしたプラグインを作成するためにはWeb知識をもっと知る必要があるし、Reactもしっかりと使いこなせるようになる必要があるとは思います。
ですが、画像の表示くらいなら意外とあっさり作れることがわかり、感動しているなうです。
web初心者の方も是非！やってみて！！って思った()