日記

こんにちは、しきゆらです。

これまで使っていたサーバから別のサーバへ変えてきました。

なんとも、WordPressを使うと簡単でとても楽ちんでした。

当分はこのサーバを使ってみて、なんともなければこちらへ本格移動しようかと思います。

 

今回はここまで。

後ほど、移行の流れをメモしておきます。

 

おわり。

JavaScript

こんにちは、しきゆらです。

台風の影響で天気が悪いですね。

それに伴い、やる気もどこかに飛んでいってしまいました。悲しい。

 

以前、JSで特定の要素のみを前/後ろにまとめる記事を書きました。

【JS】特定のものを前/後ろにソートする

https://wp.me/p6IU5Y-cm

この後、色んなサイトを眺めていると、よりきれいに書く方法を知ったのでメモしておきます。

 

眺めたサイトは以下。

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つを計算し、その結果をそのまま返してしまうのです。

パッと見はよくわかりませんが、計算の結果は以下のようになるはずです。

  • item1 < item2 のとき、item1 – item2 < 0
  • item1 = item2 のとき、item1 – item2 = 0
  • item1 > item2 のとき、item1 – item2 > 0

このようになり、きちんとソートしてくれるわけですね。

 

これは、目からウロコでした。

条件式で記述すると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]

このようにすると

  • item1 < 3 のとき、 3 – item1 > 0
  • item1 = 3 のとき、 3 – item1 = 0
  • item1 > 3 のとき、 3 – item1 < 0

となり、想定通りの動きをしてくれます。

 

今回はここまで。

おわり。

JavaScript,React

こんにちは、しきゆらです。

最近、怖いと思っていたライブラリやフレームワークは、使ってみると大したことないということに気づき始めました。

Reactさんもその一つです。

基本的なReactの環境構築や使い方をまとめようと思っていますが、今回はちょっとしたメモです。

 

環境

Webpack、Babelを使ってES6をトランスパイルするという状況です。

 

Uncaught TypeError: this.setState is not a function

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); // <= これが重要
}

これでエラーが出ずに更新できるはずです。

わかってしまえば案外簡単ですが、そうでないと無駄に時間がかかってしまいますよね。

 

今回はここまで。

おわり

JavaScript

こんにちは、しきゆらです。

今回は、JSのソート時に特定の要素だけを前/後ろにソートする方法をメモしておきます。

 

・・・お前は何を言っているんだ？

と思われるかもしれませんが、たとえば以下のようにしたい、というのが今回の話。

array = [1,2,3,4,5];
//↓
array.sort() //=> [3,4,5,1,2]

特定の条件に合ったものだけを配列の前/後ろに回してほしいということです。

普通であればfilterとかで分けた後にconcatするのかもしれませんが、

今回はソートだけでなんとかしてみよう、という内容です。

 

Ruby

こんにちは、しきゆらです。

最近はRailsと戯れています。

今回は、タイトルの通りRailsの仕組みを使いながら、CSSをページごとに切り替えたいときの方法をメモしていきます。

 

Railsさんは、たくさんあるJSやCSSをガッチャンコして一塊にまとめる、という機能を持っています。

application.js/cssあたりがそのもととなるファイルです。

確かに、１回のリクエストでデータをもらえる上にキャッシュしておけば何度も取得しなくても良くなります。

 

しかし、JSもCSSもページごとに分けてほしい場合もありますよね。

例えば、ページごとに同じクラス名を割り当てている場合やwindow.onloadなどです。

これらをまとめられてしまうと、意図しない挙動をしてしまいます。

これをページごとに切り替える方法をまとめていきます。

今回は、CSS編です。

JS編は次回です。

 

Mac,Ruby,環境構築

こんにちは、しきゆらです。

 

Railsアプリをデプロイする時は、Capistranoというツールを使うのが一般的なようです。

これは、gitにRailsアプリを公開しておくと、それをもとにしてデプロイ作業をやってくれる便利なものです。

早速、使い方を見ていきます。

 

 

JavaScript,React

こんにちは、しきゆらです。

前々回から、Raspiを使ったダッシュボードを作ろうとしています。

 

今回は、クライアントサイドの方で使いたいと思っているReactさんと戯れていこうと思います。

環境構築から、簡単な触り方までを見ていきます。

JavaScript,Mac,環境構築

こんにちは、しきゆらです。

前回、Raspiを使ってダッシュボードのようなものを作りたいということで準備をしていました。

 

そこからかなり間が空いてしまいました。

さっくりと作ろうとしている環境をメモしつつゆっくり進めていこうと思います。

ということで、今回は開発のための環境づくりとしてフロントエンドでよく使われるWebpackを使って見ようと思います。

 

Linux,Raspberry Pi,環境構築

こんにちは、しきゆらです。

Raspberry Piネタは、これまでずっとインストールする系のものばかりですが、今回もそれです。

 

これまで、Raspbian => CentOS7 とインストールしてきました。

前回のCentOSでは、GUIは不要ということでEmacsをコンパイルしたりしましたが

やはりGUIが欲しい。

というか、自分用のサイネージとして利用しようと思った次第です。

[amazonjs asin="B01GZXMIUU" locale="JP" title="Kuman 7インチ Raspberry Pi用ディスプレイ LCD 800*480解像度 タッチスクリーン TFTモニタ 7インチタッチパネル+タッチペン+スクリューパック+CD資料 Raspberry Pi 3 2 Model B B+ A A+ 用ディスプレイ ラズベリーパイ SC7B"]

 

ということでGUI付きでインストールしてみます。

これまでと同じものをインストールしても面白くないということで

Raspberry Piでも動くというFedoraを入れてみました。

 

詳しくは、続きからどうぞ。

 

日記

こんにちは、しきゆらです。

少し時間が空いてしまいましたが、前回に引き続きMANABIYAというイベントに参加してきたのでメモしておきます。

 

公式サイト

https://manabiya.tech/