読者です 読者をやめる 読者になる 読者になる

manmanrai’s diary

新米フロントエンジニアの勉強記録ブログ

「能力や仕事の内容と「給料」が正比例している世の中は、地獄なのかもしれない。」という記事を読みました。

先ほど、この記事を読みました。

fujipon.hatenablog.com

この記事にはあるサイトの内容について語っています。
そしてそのサイトのタイトルはこちら:

「こういうのホントいいかげんにしてほしい。美術館勤務経験があって英仏独伊のうち2か国語以上できるスーパーエリート様がなんで時給1240円なんだよ!そんなエリート様がそんな薄給なら俺たちがそれ以上の時給もらえる訳ないじゃないか!すべての働く人の問題だぞコレって」

引用してる記事の話とはちょっと違いますが、自分はもうちょっと狭いところについて話したいです。(あくまでも自分の観点ですが)

正直、自分も似たようなショック受けたことがあります。

多言語話者、いわゆる母語以外他の言語も使える人のことです。
子供の頃、多言語話者になりたくて、海外のドラマ見て自分がドラマの中の人みたいに流暢に喋ってるシーンを妄想するのが大好きだったのです。

違う文化で育てきた方とコミュニケーション取って、交流できて、今まで知らなかった事知ったら、自分の世界もっともっと広くなるじゃないかなと思ってました。もし自分が本当にそんなことできたら、職業にも関連な仕事就けたら良いなと思って、あらゆる多言語使う職業を調べていました。

書籍翻訳、国際学会の通訳、旅行ガイド、外国語教師、免税店の販売員、ホテルの受付、CAなど。

そして、意外なこと気づきました。
自分当時の調べた結果、アルバイト、パート、副業として働いてる方は想像以上に沢山いました。そして、たいていの所の時給も一般なバイトとはそこまで変わりなかったです。(もちろんトップのトップにいる方には例外ですが。)


言語とはそんなに関係ないかもしれませんが、ただ供給と需要の問題かもしれません。当然のことですが、その領域の求人はレッドオーシャンだったら、賃金安くなる可能性もなくは無いと思います。大事なのは言語以外に何か違うもの持っているのか、と高校生だった自分そう悟ったのです。

今の自分にとって、言語は交流、コミュニケーション取るために必要なツールに過ぎないと考えています。最新の情報を集めるために英語の勉強しないとエンジニアとしての道も厳しくなるかなって最近思っております。

って言っても台湾人の私が今日本にいて、不自然な日本語喋っていて、ブログも日本語間違ってるかどうか本人には分からない状態で書いていて、日本人だらけの会社で働いている私に一言言わせてもらうなら、







あーーーー、頑張ろう。 (自分に)笑

「ソフトバンクで孫社長に学んだ夢を10倍速で実現する方法」を読みました。

アマゾン

https://www.amazon.co.jp/夢を「10倍速」で実現する方法-三木-雄信/dp/4569826113www.amazon.co.jp

メモ

  • わらしべ戦略
  • ナンバーワン戦略
  • くじ箱戦略
  • 鯉とりまあしゃん交渉術
  • マウンテンガイド理論

起業だけではなく日常の小さな目標を持っている人にも使用可能な方法が書かれています。失敗を怯えて一度も手を出さなかった自分にはくじ引くチャンス諦めていたのかもしれません。

そういう本読めば読むほど、段々以前もこういう似たような言葉聞いた事あるような気がしてきます。世間から見た成功した人たちには違う手段、違う戦略でここまでやってきましたが、コアな部分少し似ているところあるのでしょうかね。

R言語、構文から勉強します。

始める理由

Pythonの環境でもR使えそうなので、もし本当に実案件でPythonでR使いたい時あったら、事前に学んでおいた方が良いじゃないかなと思いました。
しかも、数学者が統計研究のため開発したものらしいので、数学の角度から見た方がより分かりやすくなってるじゃないかなって勝手に想像してみました。

環境

R Studio 公式サイト

RStudio – Open source and enterprise-ready professional software for R

でも、まだ勉強の段階なので、一旦オンラインでやることにしました。
R-Fiddleがおすすめです。

R-Fiddle

構文

  • 数字、簡単計算
> 1 + 1
[1] 2

> 6 * 7
[1] 42

> 100 / 3
[1] 33.33333

整数商

> 9 %/% 2
[1] 4

剰余(mod)

> 10 %% 3
[1] 1
  • テキスト
> "ABC"
[1] "ABC"
  • ロジック判断(理論判断)(TとFで短縮しても良い)
> 3 < 4
[1] TRUE

> 2 + 2 == 5
[1] FALSE

> T == TRUE
[1] TRUE
  • ベクトル

ここのCはCombine(合併)という意味で、複数の要素を一列で表示させるようにできちゃいます。

実はベクトルに関する機能(例えば要素の追加と削除とか)が色々ありますが、後ほどfunctionのところで細かく書こうかなと思います。

> c(1, 4, 5)
[1] 1 4 5

> c("a", "b", "c")
[1] "a" "b" "c"
  • 変数の指定
> x <- 42

> x / 2
[1] 21

上書きもちろん可能です。

> x <- "ABC"
> x
[1] "ABC"
> x <- TRUE
> x
[1] TRUE
> x <- c(4, 7, 9)
> x
[1] 4 7 9

最後に

実はR言語の構文チュートリアル の全コースをクリアしましたが、記録全く残らなかったのです。逆に言うと良いことかもしれませんが、没頭なれるくらい勉強できました。しかし、記憶ちゃんと定着しなかったら、、、少し心配です。笑

R言語シリーズしばらく更新することはないかもしれません。
今、フロントエンド(本業)にもう少し頑張っていきたいと思います。

「成功曲線を描こう」を読みました。

最近やたらどうすれば成功できるかみたいな本ばっか読んでますけど、社会人年数浅い自分に今すぐ何が大した成功を求めたいわけではないのですが、こういう本を読んで、将来自分がどんな人になれるの想像するだけでワクワクします。

今フォローしてるブログがありまして、ある日以前の記事を遡ってみたら、その方の誕生日の記事が出てきました。まさかその歳でもうこんなに難しい本を読んで、こんな難しい技術を研究していたのか、びっくりました。自分も頑張らないと思いました。
いつかそういう他の人に良い刺激与えられる人になれるように努めていきたいです。

はてなブログのエンジニアさんのブログ(shibayu36)

メモ

  • 本来人間には豊かな才能や能力、長所や個性が備わっている
  • しなければいけない(自分を追い込んで生きていく)←→ああなったらいいな、こういうふうになるかもしれない、こうしてみたい(ワクワクするような気分、自らを高めていく)
  • 「行動すれば次の現実」

アマゾンでレビューをチェック

Amazon CAPTCHA

Pixi.js でパララックススクローラーを作ってみる【第三回】

前回の話

前回は初回で作ったもののリニューアルです。見た目や動き自体変わりがありません。
今回はチュートリアルのpart2の続きです。今まで作ってきたものをメソード化していきます。

Building a Parallax Scroller with Pixi.js: Part 2

続き

先ほどFarとMidはPIXI.extras.TilingSprite.prototypeから引き継いだので、今の全体像はこうなってます。
f:id:manmanrai:20170429202045p:plain そしてコードの全体はこんな感じです。

var Container = PIXI.Container,
    autoDetectRenderer = PIXI.autoDetectRenderer,
    loader = PIXI.loader;

var renderer = autoDetectRenderer(512, 384, {antialiasing: true}),
    stage = new Container();
document.body.appendChild(renderer.view);

loader
    .add(['images/bg-far.png', 'images/bg-mid.png'])
    .load(setup);
var far, mid;

function setup(){
  far = new Far();
  stage.addChild(far);

  mid = new Mid();
  stage.addChild(mid);

  requestAnimationFrame(update);
}

function update(){

  far.update();
  mid.update();

  renderer.render(stage);

  requestAnimationFrame(update);
}

function Far(){
    var texture = PIXI.Texture.fromImage("images/bg-far.png");
    PIXI.extras.TilingSprite.call(this,texture, 512, 256);
    this.position.x = 0;
    this.position.y = 0;
    this.tilePosition.x = 0;
    this.tilePosition.y = 0;
}

Far.prototype = Object.create(PIXI.extras.TilingSprite.prototype);
Far.prototype.update = function(){
    this.tilePosition.x -= 0.128;
};

function Mid(){
    var texture = PIXI.Texture.fromImage("images/bg-mid.png");
    PIXI.extras.TilingSprite.call(this,texture, 512, 256);
    this.position.x = 0;
    this.position.y = 128;
    this.tilePosition.x = 0;
    this.tilePosition.y = 0;
}

Mid.prototype = Object.create(PIXI.extras.TilingSprite.prototype);
Mid.prototype.update = function(){
    this.tilePosition.x -= 0.64;
};

次はスクローラー自体をクラス化していきます。

function Scroller(stage) {
}

このクラス自体には二つの問題が存在しています。まず、rendererへに繋がってないこと、二つ目は、どのプロトタイプから引き継いでないこと。
MidとFarを利用してアウトプットできるように導入します。

function Scroller(stage) {

  this.far = new Far();
  stage.addChild(this.far);

  this.mid = new Mid();
  stage.addChild(this.mid);
}

そしてupdateもScroller functionの後に追加します。

Scroller.prototype.update = function() {
  this.far.update();
  this.mid.update();
};

前のsetup functionをこのように書き換えられます。
midとfarに対しての操作じゃなくなるってことですね。

function setup(){
  //far = new Far();
  //stage.addChild(far);

  //mid = new Mid();
  //stage.addChild(mid);
  scroller = new Scroller(stage);

  requestAnimationFrame(update);
}

同じ今までmidとfarこの二つを操作してたupdate functionもこう書き換えます。

function update(){

  //far.update();
  //mid.update();
  scroller.update();

  renderer.render(stage);

  requestAnimationFrame(update);
}

ブラウザ開くと、動作変わりがないのかもう一回確認します。問題なければ次へ進みます。

Viewport表示域

まず、ScrollerのupdateをsetViewportXに書き換えます。

function Scroller(stage) {
  this.far = new Far();
  stage.addChild(this.far);

  this.mid = new Mid();
  stage.addChild(this.mid);
}

// Scroller.prototype.update = function() {
//   this.far.update();
//   this.mid.update();
// };
Scroller.prototype.setViewportX = function(viewportX) {
  this.far.setViewportX(viewportX);
  this.mid.setViewportX(viewportX);
};

次はFarとMidのupdateも書き換えます。

function Far() {
  var texture = PIXI.Texture.fromImage("resources/bg-far.png");
  PIXI.extras.TilingSprite.call(this, texture, 512, 256);

  this.position.x = 0;
  this.position.y = 0;
  this.tilePosition.x = 0;
  this.tilePosition.y = 0;
 
  // 追加する
  this.viewportX = 0;
}

Far.prototype = Object.create(PIXI.extras.TilingSprite.prototype);

// Far.prototype.update = function() {
//   this.tilePosition.x -= 0.128;
// };

// 追加する
Far.DELTA_X = 0.128;
Far.prototype.setViewportX = function(newViewportX) {
  var distanceTravelled = newViewportX - this.viewportX;
  this.viewportX = newViewportX;
  this.tilePosition.x -= (distanceTravelled * Far.DELTA_X);
};

最後にupdate functionにも更新します。

function update() {
  // scroller.update();

  renderer.render(stage);

  requestAnimationFrame(update);
}

ブラウザを開くとアニメーション効果がなくなり、静止画面になってます。
そこでコンソール開きます。

scroller.setViewportX(50);

入れると、画像が少しずらしたこと分かります。

scroller.setViewportX(7000);

setViewportXをScrollerに任せる

先までx軸の値はMidとかFarで初期設定しましたが、今度からはscrollerで操作するように変えていきます。

function Scroller(stage) {
  this.far = new Far();
  stage.addChild(this.far);

  this.mid = new Mid();
  stage.addChild(this.mid);

  // 追加する
  this.viewportX = 0;
}

Scrollerのupdateにも

Scroller.prototype.setViewportX = function(viewportX) {
  // 追加する
  this.viewportX = viewportX;

  this.far.setViewportX(viewportX);
  this.mid.setViewportX(viewportX);
};

そして、Scrollerのprototypeもう一個追加します。

Scroller.prototype.getViewportX = function() {
  return this.viewportX;
};

次はupdate function内部で

function update(){

  // 追加する
  var newViewportX = scroller.getViewportX() + 5;
  scroller.setViewportX(newViewportX);
  // 追加する

  renderer.render(stage);
  requestAnimationFrame(update);
}

ブラウザ開くと結構早めなスピードで動いています。
最後にさっき追加したものをprototypeとしてScrollerの下に付けます。

Scroller.prototype.moveViewportXBy = function(units) {
  var newViewportX = this.viewportX + units;
  this.setViewportX(newViewportX);
};

そして、updateにそう書き換えます。

function update() {
  // var newViewportX = scroller.getViewportX() + 5;
  // scroller.setViewportX(newViewportX);
  scroller.moveViewportXBy(5);

  renderer.render(stage);

  requestAnimationFrame(update);
}

コード全体的に簡潔ように見えてきました。
part2意外に長かったのです、読むだけでも結構時間かかりました。

次はpart3向かって進みたいと思います。
ではまた次回で。