nikumaro2’s blog

webエンジニアです。HTML、CSS、Javascript、React.jsの開発についてまとめます。また、初心者英語TOEIC350点。音楽(ベース)、ゴルフなどもたまに、、

【React】unstatedとunstated-nextの違い

javaScript プログラミング

reactでの状態管理について、Reduxが有名だが、以下の問題点がある。


　 * 学習コストが高い
　 * コード量が増えてしまう
　 * 大規模で堅牢なシステム構築などには向いているが、react-nativeなどを使う場面は、開発スピードが求められる場合が多いと考えられるのでReduxは向いていない
　

Reduxを使おうとしたが、上の理由で挫折したので、他の状態管理方法を模索中。　

そこでunstatedがおすすめされていることを発見。

次の状態管理はReduxをやめてunstatedにする理由 - Qiita


unstated-nextというのもあるらしい。どちらがいいのか



僕の場合、React Hooksがわからないので、学習コストを考えるとunstatedの方が良さそう。。

　

【HTML　×　CSS　×　 JavaScriptの関係性】Visual Studio Codeを使ったHellow world

javaScript プログラミング

HTMLとCSSとjavascriptの関係性についてまとめる。

以下のコードをコピペして、実行してみると上の関係性が理解できると思います。

最初に

まず空のフォルダを作成

以下のようなファルダを作成する。各ファイルは空のファイルで良いので拡張子は以下のようにする。


    index.html
    css
    └ sample.css
    js
    └ sample.js


このフォルダをvscodeで開く。

次に

以下をコピペして各ファイルに張り付ける。 (コピペした後読みやすいように、説明はコードの中にコメントで記述。)


index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8' />
  
  <!-- cssファイルを読み込む -->
  <!-- cssフォルダの下にsample.cssファイルを配置していることに注意 -->
  <link rel="stylesheet" href="css/sample.css"> 
 
</head>

<body class='position'>
  <div id='messeage1' class='position'>HTMLとCSSとJavascriptの基本です</div>
  <button id='button1' class='position'>推してください。</button>
　
  <!-- jsフォルダの下にsample.jsファイルを配置していることに注意 -->
  <script src='js/sample.js'></script>
</body>

</html>


sample.css

/* htmlファイルで'class'と指定した要素は、cssでは.***で指定する */
/* htmlファイルで'id'と指定した要素は、cssでは#***で指定する */
.position{
    position: absolute;
}

#messeage1{
    top: 20px;
    width: 300px;
    height: 200px;
    color: red;
}

#button1{
    top: 40px;
    width: 250px;
    height: 200px;
}


sample.js

//htmlファイルで作った'button1'のエレメントを取得する。
let button1Element = document.getElementById("button1");
　
//取得した'button'エレメントにclickされたときの処理を割り当てておく
button1Element.onclick = function() {

    //クリックされたら、ここに来る
    //以下、実行される
    alert('ありがとうございます。')
  };


ここまでできたら、vscodeでデバッグできるように設定する。

まず、vscodeにDebugger for Chromeをインストールする

f:id:nikumaro2:20191202202420p:plain
①


次に、launch.jsonを自動作成する

f:id:nikumaro2:20191202202628p:plain
②


launch.jsonを以下のように書き換える

launch.json

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome Debugger",
            "file": "${workspaceFolder}/index.html"
        }
    ]
}


最後にブレークポイントを設定して処理を実行してみる

f:id:nikumaro2:20191202203806p:plain
③


以上で、HTMLとCSSとjavascriptの関係性がわかるはず。。。

【React】Electron で開発中(webpackでビルド) __dirnameでフォルダパスが取れない問題

javaScript プログラミング

Electron と Reactでwebpackでbabelしていたら、__dirnameでフォルダのパスが取得できるはずが、'/'になってしまっていた。

以下のようにwebpackで指定したら、無事に取得できました。

node: {
    __dirname: false
  }

以下、参考に

__dirname returns '/' when js file is built with webpack · Issue #1599 · webpack/webpack · GitHub

来世に持っていきたい曲100

音楽

人が死んだら、死後の世界の入り口に閻魔大王がいて、生きているときの行ないを裁き、”天国"or”地獄”　を決めるらしい。
その審判の際に、このような質問が聞かれるかもしれない。

　"好きな曲100個まで記憶に残しておいてあげるから、この紙に曲名書いといてー"

ということで、 来世でも聞きたい曲をここに記録しておこうと思う。 いい曲があったら随時更新。



①　Sunday Morning / Maroon5

f:id:nikumaro2:20190724000307p:plain
Songs About Jane

曲名はMorningだが、雨の日の夜に染みる曲。 Sunday Morningが入っているアルバムSongs About Jane（名盤）は夜に聞きたくなる曲が多い。
このアルバムはMaroon5のファーストアルバムで、発売当初2002年は、全くヒットせず、発売から2年以上たった後にBillboard chartのTOP10入りを果たした。
最も長い時間をかけてTOP10入りしたアルバムらしい。そして全世界で1000万枚を突破した。
宣伝ではなく、純粋な音楽を評価されたのだろう。
これは、来世でも聞きたい曲に入れておこう!!

【node.js】Reactを使うメリット

javaScript プログラミング

  • Virtual DOMでパフォーマンス向上

　通常は、HTMLのDOMを書き換ると、DOM全体を書き換える。しかし、Virtual DOMのおかげで、一部だけを差分更新することで、画面更新速度が高速になる。

また、Virtual DOMはReactを使ってDOMを書き換えるだけで、適応されるので、簡単。

　ReactDOM.render(element,  document.getElementById("id") )

 

  • オリジナルのHTML部品を作れる

　通常、<button type="button" value="a">などのように、ボタンを作成することができる。

Reactでは、コンポーネントという機能があり、オリジナルのHTML部品を作成できる。

　　const dom = <div>

              <Original  image="image1"  label="写真.jpg" />

      </div>

   

      function Original(property){

         const url = property.imege

         const label = property.label

  

         return <div>

          <img src={url} />

          <span> {label} </span>

          </div>

      }

　　

 　　クロスコンパイルできる機能があり、一度コードを書けば、それぞれの環境で動作するようにコンパイルすることができる。

　個人開発者にとって、それぞれ別々に開発するのは、時間がかかりすぎるので、これは最大のメリットになると思う。

 

 

もっとメリットあると思うが、まだReact初心者なのでこのくらいで、、

 

 

【node.js】electronでpython-shell require できない

javaScript プログラミング

main.jsで以下のようにしたらrequireできた。セキュリティ的にあまりよくないらしいが、、、

 webPreferences: {
      nodeIntegration: true
    }

以下、参考に nikumaro2.hatenablog.com

【Electorn】require できない (require is not defined)

javaScript プログラミング

Electron 5以降から、nodeIntegrationのデフォルトがtrueからfalseに変更になったらしい。 falseだとrequireができない。


main.jsで以下のように変更することでrequireが使用できるようになる 　

app.on('ready', () => {
    mainWindow = new BrowserWindow({
        webPreferences: {
            nodeIntegration: true
        }
    });
});

上記でrequireは使用できるようになるが、完全にローカルのみで動作するアプリケーションを作成するときは良いが、 セキュリティ的にnodeIntegratio: trueは非推奨らしい。

Security, Native Capabilities, and Your Responsibility | Electron



公式ページによると以下のように書いてあるがやったことはない

// Bad
const mainWindow = new BrowserWindow({
  webPreferences: {
    nodeIntegration: true,
    nodeIntegrationInWorker: true
  }
})

mainWindow.loadURL('https://example.com')

// Good
const mainWindow = new BrowserWindow({
  webPreferences: {
    preload: path.join(app.getAppPath(), 'preload.js')
  }
})

mainWindow.loadURL('https://example.com')

<!-- Bad -->
<webview nodeIntegration src="page.html"></webview>

<!-- Good -->
<webview src="page.html"></webview>



それか以下のようにtargetをwebにするとrequireできた。('node'と'webの'違いがよくわからない、、、)

module.exports = {
 //target: 'node'
target: 'web'
}



雑ですが参考程度に