手を動かした記録
こんにちは、しきゆらです。
今回は、electron-builderというものを触ってみます。
私は、よく使うサイトをElectronアプリとして書き出して使っています。
ビルドはelectron-packagerというものを使い、時々Electronをビルドしていました。
先日久々にビルドしていると、エラーが出て動かなくなっていました。
正直、NodeやElectronについてはにわか程度の知識しかなく、更新情報なども追えているわけではありませんでした。
調べてみると、electron-builderというものもあるということで、今回はこっちの方を使ってみました。
簡単ではありますが、記録として残しておきます。
といっても、参考サイトをほぼそのままやっただけ。
参考サイトは以下です。
electron-builderでElectronアプリのビルド
最近のフロントエンドは、様々なツールやフレームワーク、ライブラリ等を利用し、
いろいろなものを組み合わせてコーディングしているようです。
こうなってくると、細かいファイルが沢山生成されていきますね。
それぞれの管理をどうするのか、というと細かいファイルをガッチャンコとまとめてくれるツールを利用するわけですね。
今回触るparcelもがっちゃんこしてくれるツールの一つです。
公式サイト
特徴といえば、設定ファイルがないこと。
Webpackは便利で情報も多く、導入している方も多いかと思いますが、設定ファイルを作るのが、なんとも面倒。
parcelさんは、そんな面倒さをなんとかしてくれるかもしれない救世主となるのか。
ということで、今回はparcelを導入し実際に実行してみて便利さを味わっていきます。
こんにちは、しきゆらです。
台風の影響で天気が悪いですね。
それに伴い、やる気もどこかに飛んでいってしまいました。悲しい。
以前、JSで特定の要素のみを前/後ろにまとめる記事を書きました。
【JS】特定のものを前/後ろにソートする
この後、色んなサイトを眺めていると、よりきれいに書く方法を知ったのでメモしておきます。
眺めたサイトは以下。
JSのsortに渡す関数は、正負もしくは0を返すことでソートしてくれます。
これを生かして、より簡単に各方法を示してくれていました。
今までは、以下のように愚直に分岐させていました。
function(item1, item2){
if(item1 < item2) return -1;
else if(item1 > item2) return 1;
else return 0;
}しかし、比較するものを計算して、その結果を返す関数を渡しても良いとのことでした。
例えば以下のような感じ。
array = [1,2,3,4,5];
array.sort(function(item1, item2) {
return item1 - item2;
});item1とitem2にはarrayの中にある数が渡されてきます。
この2つを計算し、その結果をそのまま返してしまうのです。
パッと見はよくわかりませんが、計算の結果は以下のようになるはずです。
このようになり、きちんとソートしてくれるわけですね。
これは、目からウロコでした。
条件式で記述すると3行は使う内容ですが、引き算で表現すると1行で済んでしまいますね。
正直パっと見てわからないと思うので
可読性を取るか、記述量を取るか、という状況かな、と思います。
なお、以前の記事を今回の方法で書き換えるとするとこうなると思います。
array = [1,2,3,4,5,6,7,8,9];
array.sort((item1, item2) => {
return 3 - item1;
});
// => [3, 4, 5, 6, 7, 8, 9, 2, 1]このようにすると
となり、想定通りの動きをしてくれます。
今回はここまで。
おわり。
こんにちは、しきゆらです。
最近、怖いと思っていたライブラリやフレームワークは、使ってみると大したことないということに気づき始めました。
Reactさんもその一つです。
基本的なReactの環境構築や使い方をまとめようと思っていますが、今回はちょっとしたメモです。
Webpack、Babelを使ってES6をトランスパイルするという状況です。
Reactでstateを変更するときにお世話になる関数であるsetState。
この間、stateを変更すべくsetStateを実行していたら「Uncaught TypeError: this.setState is not a function」とエラーが・・・。
コードはこんな感じでした。
import SubComponent from './SubComponent';
class MainComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
data: props.data,
}
}
updateState(data) {
this.setState({
data,
})
}
render(){
return(
<SubComponent
updateState={this.updateState}
/>
);
}
}Mainの方のデータをSubから更新しようとしています。
このとき、上記のようなエラーが起こりました。
原因は「this.updateState」のthisがundefinedになることが問題のようです。
対策としては、classで定義する場合constructor内でbindしないと行けないようです。
constructor(){
super(props);
this.state = { data: props.data }
this.updateState = this.updateState.bind(this); // <= これが重要
}これでエラーが出ずに更新できるはずです。
わかってしまえば案外簡単ですが、そうでないと無駄に時間がかかってしまいますよね。
今回はここまで。
おわり
こんにちは、しきゆらです。
今回は、JSのソート時に特定の要素だけを前/後ろにソートする方法をメモしておきます。
・・・お前は何を言っているんだ？
と思われるかもしれませんが、たとえば以下のようにしたい、というのが今回の話。
array = [1,2,3,4,5]; //↓ array.sort() //=> [3,4,5,1,2]
特定の条件に合ったものだけを配列の前/後ろに回してほしいということです。
普通であればfilterとかで分けた後にconcatするのかもしれませんが、
今回はソートだけでなんとかしてみよう、という内容です。
こんにちは、しきゆらです。
前々回から、Raspiを使ったダッシュボードを作ろうとしています。
今回は、クライアントサイドの方で使いたいと思っているReactさんと戯れていこうと思います。
環境構築から、簡単な触り方までを見ていきます。
こんにちは、しきゆらです。
前回、Raspiを使ってダッシュボードのようなものを作りたいということで準備をしていました。
そこからかなり間が空いてしまいました。
さっくりと作ろうとしている環境をメモしつつゆっくり進めていこうと思います。
ということで、今回は開発のための環境づくりとしてフロントエンドでよく使われるWebpackを使って見ようと思います。
こんにちは、しきゆらです。
今回は、DOMの変化により発火するイベントを知ったので、使い方をメモしておきます。
DOMの数を数えて、数を表示したい。
というのも、最近のライブラリとかならば出来るんだろうけど素のJSでなんとかできないのか、と思って調べてみるとうっかりありました。
その名も、Mutation events！！
しかし、どうもこれは推奨されておらず代わりに使うものを教えてくれていますね。
今回の本題。
これをつかうと、DOMの変更を検知して特定の関数を実行する事ができます。
といっても、基本的なものはMDNさんに使い方があるのでそっちもどうぞ。
基本的には、newでインスタンスを作るだけですね。
// 監視するObserverを作る
let mutation = new MutationObserver(function(){
console.log("dom change!!");
});
// 監視対象
let target = document.getElementById("hoge");
// 監視するものを指定
let config = {
children: true,
subtree: true,
};
// 監視開始
mutation.observer(target, config);これにより、監視対象に変化があればnewした時に渡したイベントを実行してくれます。
変化の監視というのは、属性・文言・子要素等指定ができます。
必要なところを監視できますよ。
[table id=9 /]
基本的に、これらを連想配列で渡してあげればいけます。
childList、attribute、characterDataにはtrue/falseを指定するだけ。
簡単ですね。
これで、監視対象に変化があれば特定の関数を実行できるようになりました。
Reactさんの真似事が出来るかもしれませんね。
今回は、ここまで。
おわり
こんにちは、しきゆらです。
今回は、ElectronでHello Worldを作って遊びたいと思います。
前回Electronのことを書いてからすでに半年以上経っていますね。
どうしても、環境構築するだけで満足してしまう部分があります・・・。
環境構築が一番楽しいと思うのですがどうでしょうか。
さて、では作っていきます。
こんにちは、しきゆらです。
今回は、よくお世話になるであろうsetIntervalの関数に引数を渡す方法を知ったのでメモしておきます。
といっても、リファレンスをよく読めば書いてありました。
WindowOrWorkerGlobalScope.setTimeout() – MDN
https://developer.mozilla.org/ja/docs/Web/API/WindowTimers/setTimeout
MDNさんによると、setIntervalの引数は「関数オブジェクト」、「遅延させる時間」の2つだけではないようです。
ver timeoutID = scope.setTimeout(function[, delay, param1, param2,...]);
1つめのものですね。
3つ目以降の引数には、関数オブジェクトの引数として渡すものを書けばいいようです。
function hoge(arg1, arg2){
console.log(arg1, arg2);
}
setInterval(hoge, delay, "hoge", "fuga");上記のようにすれば、delayミリ秒ごとにconsoleにはhoge, fugaの2つが表示されるはずです。
これは知りませんでした。
パっと見ただけでは何をやっているのかわかりませんけど、必要な時はこれで乗り切れそうですね。
わかりやすさで言えば、無名関数を作って上げたほうが読みやすいかもしれません。
function hoge(args1){
console.log(args1);
}
setInterval(function(){
hoge("hoge");
}, 1000);
どちらにしても、こうすればsetIntervalの関数に引数を渡せるようです。
知らないことがいっぱいありますね。
今回はこのへんで。
おわり。