自分の分身を作りたい

理系の大学院生だよ

React Tutorial 終わるまでねれま10と思ったがOverviewまでで寝ます

プログラミング

経緯

  • webアプリやポートフォリオのためにフロントエンドを少しはやっておきたい
  • SPAカッコイイなあ
  • 何を血迷ったか「React ビギナーズガイド」を購入
  • 全然わからんちんなのでとりあえず公式のチュートリアルをやってみよう

注意

自分用のメモ&進むほど疲れの見える文章になっているのはご了承ください。 どしどしご指摘お願いします。

ということでReactの公式チュートリアル（英語）

reactjs.org

ここでは小さなゲーム（ Tic Tac Toe ）を作っていきながらReactで様々なアプリを作っていく上での基礎を身につけようという趣旨となっています。

流れとしては

  • Setup for the Tutorial -チュートリアルを進めていく上での事始め

  • Overview -Reactの基礎を学ぼう（components, props, state）

  • Completing the Game -React開発におけるもっとも一般的な技術を学ぼう

  • Adding Time Travel -Reactを有効に使うためのより深い理解をしよう

Before We Start the Tutorial

このチュートリアルを始める前にHTML, JavaScriptといった言語や、関数、オブジェクト、配列に関する最低限の理解はあった方が良さそう。

ちなみに僕の場合は

  • HTML タグくらいはわかるがコーディングしていく手順などはあまりわかっていない。

  • JavaScript Progateで一通り勉強した程度。jQueryも少々。

  • フロントではないがPythonを少し使ったりする。

といったところでしょうか。

Setup for the Tutorial

こちらのStarter CodeがTic Tac Toeの元となるコードです。 Code Penかローカルで編集できるようにしておきましょう。

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {/* TODO */}
      </button>
    );
  }
}

class Board extends React.Component {
  renderSquare(i) {
    return <Square />;
  }

  render() {
    const status = 'Next player: X';

    return (
      <div>
        <div className="status">{status}</div>
        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        <div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
        <div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
      </div>
    );
  }
}

class Game extends React.Component {
  render() {
    return (
      <div className="game">
        <div className="game-board">
          <Board />
        </div>
        <div className="game-info">
          <div>{/* status */}</div>
          <ol>{/* TODO */}</ol>
        </div>
      </div>
    );
  }
}

// ========================================

ReactDOM.render(
  <Game />,
  document.getElementById('root')
);

Overview

Reactってなーに？

ReactはUIを作成するためのJavaScriptのライブラリで、複雑なUIをcomponentsと呼ばれる小さな部品で効率的に組み立てていくことができます。

Reactにはいくつかの種類のcomponentsがあります。

React.Component:

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

// Example usage: <ShoppingList name="Mark" />

このようなXML風の書き方で表現するができます。 ここでのShoppingListはReact component classといいprop（propertiesの略）というパラメータを引き受け、renderメソッドでブラウザ上に表示します。

Reactとは独立した別物ですが、JSXという特殊なシンタックスを使うと、

return React.createElement('div', {className: 'shopping-list'},
  React.createElement('h1', /* ... h1 children ... */),
  React.createElement('ul', /* ... ul children ... */)
);

こんな感じで簡略化することもできます。

Inspecting the Starter Code

OXゲームで使うcomponent（UI部品）は

  • Square（マス）
  • Board（外枠）
  • Game（その他）

となっています。

Propsを使ってデータを通す

BoardクラスとSquareクラスの間でデータを通したければpropsを使おう。

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;
  }

.
.
.

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {this.props.value}
      </button>
    );
  }
}

propsを通してボードを分割したときに割り振られた値がSquareクラスに届きました。

インタラクティブなComponentを作る
class Square extends React.Component {
 render() {
   return (
     <button className="square" onClick={() => alert('click')}>
       {this.props.value}
     </button>
   );
 }
}

Squareがクリックされた時のアクションを作るにはstateを使おう。もちろんアロー関数も対応していますね。

サブクラスとしてstateを定義するconstructor()をrender()と並べます。この時必ずsuper(props);を忘れない。必ずconstructorサブクラスはsuper()で始まらないといけないらしい。

class Square extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: null,
    };
  }

  render() {
    return (
      <button className="square" onClick={() => this.setState({value: 'X'})}>
        {this.props.value}
      </button>
    );
  }
}

stateを更新するときはsetState()を使います。

Overviewまとめ

component...UIを作るパーツ constructor...stateやpropsを定義するよ props..component間で値を受け渡す state...component内の状態を更新

render...何を書き出したいのか教える

  • やっぱjQueryを先にしっかりやったほうがいいのか
  • なんか掴みそうで掴みきれない➡️JSの知識不足？

今後の予定としては、改めて本を読み直すor

React 入門チュートリアル② - Qiita

Short, instructional screencast video tutorials for web developers on @eggheadio

https://goodpatch.com/blog/react-study/

ここらを参考にしてみるか？

ロシア滞在② ニジニ・ノブゴロドに鉄道で行くときの話

研究室生活 旅

今回はモスクワ、ニジニ・ノブゴロド間の高速鉄道についての紹介と、その過程における我々の教訓を紹介します。

 


モスクワからニジニ・ノブゴルドに向かうには主に２つの交通手段があります。１つは飛行機、もう１つは高速鉄道。

 

当初我々は飛行機をつかってニジニに向かう予定だったのですが、誤算だったのがモスクワ市街-ドモジェドボ空港間の鉄道が30分に一本しかなかったこと。

 

タッチの差で電車を逃した我々は見事に飛行機も逃してしまい、仕方なく高速鉄道で向かうことに。

 

モスクワ−ニジニ・ノブゴロド間の鉄道は地下鉄環状線のKursky駅から出ています。

 

チケットは高速鉄道駅の2階で購入することができ、購入の際に名前などを登録する必要があるのでパスポートの提示が必須です。運賃は日本円で5000円くらい。

 


ただややこしいのがKursky駅は割と大きなハブ駅で色々な乗り物があるためチケットカウンターがたくさんあり、場所によって売っているものが違うということです。

 


この高速鉄道のチケットは駅の2階です。1階ではありません。1階で売られているのはよくわからない謎のチケットです。

 


 

我々がチケット売り場をなかなか見つけられず発車10分前にやっと見つけ、

そこで今度は私がパスポート見つけられず絶望し、

5分前にポケットの中にパスポートがあることに気づき（バカ）、

2分前にチケット売り場の太っちょなおばちゃんに励まされながら見送られたのは今となってはいい思い出。

 

私から言えることは、ほんと海外滞在中は時間に余裕を持って行動しましょうということです。

 

f:id:daigakukabuu:20181004035652j:image
f:id:daigakukabuu:20181004035559j:image
f:id:daigakukabuu:20181004035624j:image

 

電車の旅自体は非常にいい旅でした。

 

非常に快適で、車窓からの眺めものどかです。

 

不満点としては、車内販売のサンドウィッチお兄さんが1回しかきてくれないところでしょうか。

ロシア語でのやり取りを恐れずに勇気を出して1発で仕留めましょう。

 

車内にはwifiもありましたが、上手く繋げませんでした。

 

高速鉄道のチケットの予約はインターネットからでも可能ですが、あまり外国人にフレンドリーなサイトではなかったので、現地のチケット売り場で購入した方が案外楽かもしれません。

 

というか飛行機にちゃんと乗るのが1番無難です。

 

国内線なので乗れなかった時のその後の対応が基本ロシア語のみで、ヘルプデスクも英語をかろうじて喋れる人がいるかいないか。コールセンターもロシア語オンリーだったので、滞在先の研究員の方のヘルプがなければかなりしんどかったと思います。本当にスパシーバ（ありがとう）。

 

とまあ様々なトラブルがありましたが、なんとかニジニ・ノブゴロドに到着することができました。

 

今回の滞在に関しては、我々はモスクワにおいて本当に運に見放されていました。時間に余裕を持つことと、困ったらためらわずにコミュニケーションを挑むことが大事です。困っていれば優しく手を差し伸べてくれますし、英語を喋れるスタッフに案内してくれます。

 

 

ちなみに帰りのモスクワでは助教のスーツケースの持ち手がぶっ壊れました。

 

ほんまモスクry

ロシア滞在① 1日だけのモスクワ観光

研究室生活 旅

この記事ではロシア滞在の様子を伝えてまいりたいと思います。

 

今回のロシア派遣はニジニ・ノブゴロドという都市での滞在となるので、

成田から飛行機でモスクワに向かった後乗継の都合上一晩宿泊する必要がありました。

 

昼過ぎにロシア到着→モスクワで一泊→翌朝国内便でニジニに出発

という流れです。

 

モスクワにはいくつか空港があるのですが、国際線が多数発着していて最もメジャーな空港が今回我々の到着したドモジェドボ（Домодедово）空港になります。

 

空港探索はまあ帰りでええやろということで急行列車でモスクワ市街地に移動。

 

 


 

市街地についてしまえば地下鉄が非常に発達しているのでそこからは地下鉄だけで十分です。

 

ちなみにロシアの地下鉄プラットフォームは宮殿のような内装で非常に綺麗なので、ロシアに来たときは是非利用してみてください。

 

f:id:daigakukabuu:20181004035129j:image

f:id:daigakukabuu:20181004035109j:image

 

ここで時間があったので少し寄り道。

 

実は我々がロシアにくる2週間ほど前、我らがベガルタ仙台の西村拓真選手もCSKAモスクワというチームに移籍しました。

 

どうしても彼のユニフォームが欲しかったのでホテルチェックイン前にCSKAモスクワのホームスタジアム近辺にいってきました。

 

 


 

すごく近代的でかっこいいスタジアムだったのですが、特に試合もないのでスタジアム周辺は休業ムードユニフォームが売っているようなファンショップも空いておらず、

 

20 kgあるスーツケースを持って4 kmほど歩いた挙句手ぶらで帰るという悲しい結末を迎えてしまいました。

危うく腱鞘炎になるところでした。

 

ちなみに一緒に来ていた助教はこの裏で私以上の修羅場を迎えていたようで、後から聞いたところによると、予約したはずの宿がどこにもなく（フェイクだった）、ネット環境もない中英語もまともに通じないロシアで警察の方々に色々とお世話になっていたようです。

 

私と同期が予約したホテルは幸いなことに存在しており、1泊2人で5000円というリーズナブルさもさることながら、天井が非常に高く、エレベーターが例のシルキィ・ウトゥンドゥで有名なエレベーターのような雰囲気を醸し出しているステキなホテルでした。

 

次の日の悲劇も知らずにこのときは部屋の広さに興奮していたのが懐かしいです。

 

↓動画でも撮りましたのでよかったらみていってください。

youtu.be

 

 

 

ロシアにおります。

研究室生活 旅

突然ではあるのですが、私は現在研究滞在でロシアにきております。

ヨーロッパに訪れるのは初めてなので色々と苦労することもありましたが、楽しむときは楽しみ、充実した生活をすることができております。

 

ロシア滞在において学術面だけではなく、生活して行く中でも様々なことを学び気づいたことがあるのでそういったことを追々まとめたいと思っております（先延ばししてやるやる詐欺になりそう）。

 

私が滞在したのはロシアの中でもニジニ・ノブゴロドというロシア第五の都市で、モスクワからもそう遠くはないところに位置しております。

 

f:id:daigakukabuu:20181003191506p:image

 

f:id:daigakukabuu:20181003191638p:image

 

ヴォルガ川に面しており、川をはさんで旧市街と新市街を楽しめる非常に綺麗な街です。

 

学術的な方は色々と秘密ごともあるので動画や写真はとりませんでしたが、街並みや風景は色々と撮ってみました。

 

動画とともに振り返っていこうと思うので、もしよかったらみていってください。

 

人工知能ロボットを「NOVA DIY」でDIYしてみた

プログラミング

f:id:daigakukabuu:20180826222618j:plain

 

 

久しぶりの投稿。

 

おやおや....

 

 

 

f:id:daigakukabuu:20180826221103j:plain

 

男性諸君であれば、これをみてわくわくしない訳にはいかないだろう。

近未来感、、、メカ感、、、

 

f:id:daigakukabuu:20180826221051j:plain

かっこよい....

こちらはNOVA DIYというarduinoベースのロボットであり、イギリスのCreoqodeというメーカーから発売されている。

 

同社は他にも「2048」というゲーム機のDIYキットも発売している。

 

www.creoqode.com

 


Creoqode NOVA | DIY Artificial Intelligence Robot

動機

去年の年末頃にkickstarter（クラファン的サイト）で募集が始まっているのをたまたまTwitterで見かけた。

 

「DIY ARTIFICIAL INTELLIGENCE ROBOT」という事で、コーディングと電子工作を同時に学ぶことができるキットという謳い文句をみて、これは買うしかないと勢いでポチってしまったものだ。

 

電子工作は今まで全くやったことがなかったがこれを機に初めてみようということで。なんか頑張れば自分の分身を作れそうだしね。

 

我が家に向けて海外から発送されたものが航路の途中どこかで消失するというアクシデントに見舞われ、当初の予定より1ヶ月ほど到着が遅くなってしまったのだが、ブログに書こうと重い腰をあげるまでにさらに2ヶ月ほどかかってしまっているので何の問題もない。

f:id:daigakukabuu:20180826221108j:plain

長旅でくたびれた外装だった

仕様

ハードウェア

コンピューターはCreoqode Mini Mega Development Boardというarduinoベースのマイコンが使用されており、arduinoとは完全に互換である。

 

加えてサーボモータ制御用のシールドとジョイスティックが付属されており、こちらでNOVAを操作することもできる。

f:id:daigakukabuu:20180826221035j:plain
f:id:daigakukabuu:20180826221027j:plain
ジョイスティックとMegaMini

センサーは右目にカメラ、左目に超音波センサーがついており周囲の環境を見たり、距離を計測することができる。

 

ソフトウェア

arduinoベースのマイコンなのでコーディングはArduino Software(IDE)とProcessing(IDE)を使用する。

 

という事で付属冊子には組み立て方が、ウェブサイトにはコーディングのサンプルが紹介されているがそれ以外にも自分自身でいくらでも機能を拡張することができるというわけだ。

 

作ってみて

まずはじめにハードを組み立てたのだが、ネジの多さにめちゃくちゃ驚いた。半田ごてなしで作れるようになっているのもあり、電子工作的な部分は少しだけで、ほとんどの時間を外見の組み立てに割いた。それはそれでプラモっぽくて楽しかったがあまり電子工作のスキルがつくという感じではないかもしれない。

 

f:id:daigakukabuu:20180826221019j:plain

プラモ

f:id:daigakukabuu:20180826220957j:plain

完成。結構大きい。

コーディングに関しては、ジョイスティックで操作させたり、カメラを使って人の顔を追跡させたりというオンラインチュートリアルが、完全に英語で書かれているものの、結構よかった。ただ、Code Shareというみんなが作ったコードをシェアするサービスを用意するようだが、実際のところ発送から3ヶ月たった今でもチュートリアルページは未完成だし（人工知能的ページはまだ作成中の模様）、コードシェア的なFacebookグループを購入者が有志で作ってしまっている様子。リリースした後の動きが遅い気がする。

 

リリースして終わりとかならなければいいが...

 

今はちょっとコードをいじったりして、終始落ち着きのない動きをしたり、目の前の障害物に顔を寄せるような動きや、近づきすぎると離れようとする動きをするようになったりしている。

 

顔の認識なんかは少しかじっているとは言えるものの、人工知能ロボットという名であるが、今のところ人の形をしているロボットってだけなので、この前東京に言った時に買ってきたラズパイを使ったりしてもう少しそれっぽい感じになればなと思っている今日この頃。

 

 

ビールはしご旅in Tokyo①（SPRING VALLEY BREWERY TOKYO）

ビール

お久しぶりです。

 

最近色々な期限（インターン、レポート、研究、プログラミング等）に追われていたのでブログはまあいいや〜と思っていたのですが、お金払ってドメイン確保していることを思い出しました。書かなあかんな。

 

個人的に最近ビールにはまっていて、ビール検定の本を読んだり国内外のいろんなビールを飲み倒したりしています。齢22にして痛風にならないかと自分のことが心配になってしまいます。

続きを読む