モチベーションに頼ってしまう
「モチベーションの作り方」
「モチベーションなんてない、習慣化するべき」
「作業興奮を活用しよう」
インターネットでさまよっていると、ときどきこんなテーマを目にする。
もしくは、朝から何もやる気が出ないときにもそんな内容を調べることがある。
「やる気」「モチベ」のようなものについて考えることは、人生において何度かあると思う。
学校のテスト、受験、資格試験、就活、などなどのイベントが発生するようなタイミングだろうか。
自分自身について考えると、最近は何かしらの作業に関連して考える機会が発生しているなと気づいた。
どんな時にモチベーションがあるのか。
これがわからない。
一定の期間、とあるものにひたすら執着する時期がある。
閃いたアプリケーションの実装を土日、毎晩の時間を消費して進めたり。
電子工作で作りたいものの回路図に長時間使ってみたり。
歯磨きをするときは毎回英語の文法を学んでみたり。
ダイエット目的で細かいカロリーまであすけんに登録してみたり。
これらの行動が、意図的に行えているものなら納得がいく。
しかしそうではない。どこかで飽きてやらなくなるし、一度飽きると手につかない。
頭のどこかで進捗を作りたいなと思うが、PCの前に座っても頭が働かない。
自分が過去に書いたコードを読んでもよく分からないような感覚。
求める成果に対しての集中力というか、「作業してやるぞ」というスイッチが入らないのだ。
これまでの人生、全ての成果物を突発的なモチベーションでなんとかしてきたような気がする。これが自分の中の理想と反する。
どれだけやる気がなくとも、時間を費やすものには集中して取り掛かりたい。そうでなければやらないほうがましだと思うからだ。
出したい成果があって、とりたい資格があって、身に着けたい知識があって、そのために机に向かうのであればその時間で少しでも成果を出したいし、1ページでも教材を進めたいし、1単語だけでも覚えたい。
でもそれができない。
無理やり行動した場合、明らかに集中力がない。
1行も文字が読めないし、書けないこともある。やりたくないのだ。
そしてたいてい別の物事にモチベーションが出る。
本来進捗を出したい開発を無視して、そこまで重要ではないが読みたかった本に意識が向くような、そんな感覚。
心理学的な何かで名前がついていそうな気がする。何なのだろうか。
この課題が解決できればだいぶ生きやすくなりそうだと直感的に思っている。
人間について学ぼうかなぁ。
道徳力あふれるプリキュアの世界
まえがき
12月22日（に投稿される予定だった）アドベントカレンダーです。
https://adventar.org/calendars/6732
Twitterでネタ募集したら技術以外になりました。
— りゃま (@RyumaRyama) December 10, 2021
困ったりゃまはプリキュアネタに走るのであった……。
（※タイトル準拠で書いておりますので内容は皆無です。）
概要
皆さんご存知プリキュアシリーズ。
主人公をはじめとして、その世界は道徳で満ちています。
りゃまが履修した作品に触れつつ、その世界を少しだけ感じていただきましょう。
ネタバレは極力避ける方針ですが、一部説明のための外部リンクがあるのでお気をつけて。
伝説の道徳心プリキュア
目覚めよ、その魂
伝説の戦士であるプリキュアの方々はその心も伝説級。
家族関係、友人関係ともに素晴らしいものです。
しかし、道徳は一日にして成らず。彼女らは物語の中で成長していくのです。
まだ伝説ではなかった時代
人間性が完成されており、成績は良くスポーツも得意、そして容姿端麗である。なんて人間はいないのです。それは伝説の戦士も同じでした。
「友達でもなんでもない」「他に友達いないの？」と仲間を罵るなど、相手を傷つけることもあります。*1
他に人がいないから嫌々仕方なく。そんな投げやりな思いでプリキュアの世界に入門しかけることも。
そう、決して優しさに満ちた完璧人間の集いではないのです。
成長を支える環境
最終的に伝説級の心を手に入れるキュアの方々。物語を通して成長するのですが、その要因は一体何なのか。
そこには生活環境が大きく関わっていると考えます。
家族、学校、妖精など。彼女らの周囲には伝説的な心を支える伝説的なサポーターが存在するのです。
休日にキャンプへと連れて行き、自然の怖さを教えてくれる父親。将来への不安に適切な言葉をかける教師。常に大切な仲間として対等に接してくれる相棒の妖精。その存在が心を育む環境となるのではないでしょうか。
そして伝説へ
最終話になるとキュアの方々は大いなる希望の力で邪悪な心を打ち砕き、阿漕な真似をやめさせます。
その表情は物語の冒頭に比べるとまるで別人のようで、心強さを感じます。
人生様々なことがございます。その壁ひとつひとつと向き合い、信念を持って破壊する完成された道徳がそこにはあるでしょう。
そんな姿が女児先輩、そして大きなお友達の背中を力強く押しているのです。
とある2つの特徴
数多いキュア作品
2021年12月現在、18作品のプリキュアが放送されています。
各キュアで人数も異なれば性格も異なり、日朝王道でありながら常に新しい楽しさがあります。
それぞれの特徴を分類するための視点はそれだけ多くありますが、りゃま視点で感じたものをここで書かせていただければと思います。
なお、『ふたりはプリキュア』から『Yes！プリキュア５GoGo！』、『ハートキャッチプリキュア！』のみの履修を元に記事を作成しています。
「このキュアもこの部分あるぞ！！」などがあれば、そっとDMでおすすめしていただけると盛り上がりますのでよろしくお願いいたします。
2年キュアと1年キュア
毎年新たなプリキュアが放送されていることは皆さんご存知のことだと思います。
ですが、多くの方の記憶にこのようなものがあるでしょう。
「あれ？ふたりはプリキュアって2, 3種類なかった？」
その通りです。
『ふたりはプリキュア』、『Yes！プリキュア5』の2作品は2年続いて放送されていました。
正確には以下のように同じ登場人物が活躍する別作品として放送されています。
ここではこの2年に渡って放送された作品とその他の作品という観点からお話いたします。
※『ふたりはプリキュア Splash☆Star』は他2作品と登場人物が異なります。こちらも非常におすすめです。
美しき余白
伝説の道徳心プリキュアで触れました通り、このシリーズは成長の物語となります。
1年間の放送を通して成長した時、2年目が存在する場合どうなるのか。そこに良さがあるのです。
それは「十分に道徳が出来上がったキャラたちを楽しめる」ということ。
1年目で大喧嘩したコンビは2年目で決して喧嘩しないし、1年目で勇気をもらったキュアは2年目から登場した新キャラに勇気を与えます。
完成されたキュアの振る舞いをまるまる1年間楽しむことができるのです。
これはその他1年キュアではあり得ないことで、最後の十数話でほんのり楽しめるかどうかというところでしょう。
もはや2年目を楽しむための伏線として1年目があったのだと、そのように捉えても良いのかもしれません。
まとめ
以上、タイトルからでっちあげた道徳で語るプリキュアでした。
何はともあれ履修しましょう。話はそれからです。
dアニメストアへgogo〜〜。
もう少しで見られなくなりますが、クリスマス企画で歴代キュアのクリスマス回がYouTubeで見られるそうです。（2021/12/25 23:59まで）（おわりました）
React Tutorial やってみた
これは 琉大 Advent Calendar 2020 13日目の記事です。
概要
こんにちは、りゃまです。
今回は React Tutorial を雑にやってみたので実況プレイ的な感じで書いていきます。
やること
React Tutorial を通してみるだけなのでへんなことはしません。
ゴールとしては
「ほぇ〜〜こういうやつね、完全に理解したね」
と言えること。
フロント知識皆無で大人気 React くんのことも名前しか知らない程度なので指摘コメント大募集です。
この記事の記述内容は次のようにする予定です。
- 公式が詳しく説明してるところは流したりします。
- 動作的に関わらないところも説明しない箇所があります。
取り組む方は公式読みながらやってみてください。
取り組み方
- 参考：React Tutorial
- 環境：Docker for Mac
React Tutorialに沿って取り組みます。
ブラウザで実行できる環境も提供されていましたが、今後手元で React 環境使って行きたかったので雑に Docker にします。
最終的に動いたものは一応githubにありますが、公式でもコード見られるのでこっち見る必要なさそうです。
React Tutorial 開始
どうやらマルバツゲームを作る内容になっているようです。
環境構築からゲーム基盤づくり、細かな機能追加の流れでやっていきましょう。
環境構築
やるぞ！となって最初にぶつかる環境構築の壁。今回も一番時間かかった気がするような。 こういうところもちゃんと勉強しないとなぁ。
Docker書き書き
まずは Docker まわりを書きます。
今回は React 単体で良いですが、今後どこかとつなぎたいので docker-compose も一緒に書いていきます。
（知識がなさすぎて不足部大量にあると思うので誰か教えて下さい）
目指すディレクトリ構成はこんな感じ。app の下に React app が配置されるイメージです。
ReactTutorial ├── app ├── docker-compose.yml └── dockerfile
node の image を使って、お気持ち程度に Working directory を設定してあげました。
FROM node:15.3.0-alpine3.12 WORKDIR /app
素晴らしき Docker、これで node 環境は多分オーケー。
続いて docker-compose.yml を。
version: '3' services: app: build: . volumes: - ./app:/app ports: - 3000:3000 command: sh -c "yarn install && yarn start"
これで最低限の環境ができたはず。
今後サーバーサイドいい感じに追加していけば、docker-compose でまとめて管理できるでしょう。
build から create-react-app
Docker まわり書き終えたので、続いて build。
> docker-compose build
それっぽく build されます。
ここから React のファイルを作っていきます。
公式が用意してるセットアップ説明に沿ってやっていきましょう。
こちらで公式がいい感じに説明してくれてますが、どうやら create-react-app というもので生成できるらしいです。
node のパッケージ管理は多分今回何でも良いんですが、なんとなく yarn 使ってみます。
> docker-compose run --rm app yarn create react-app .
これでコンテナの /app に react app が生成され、volume でつながってるローカルの app directory にも反映されました。
これで React が立ち上がるはず……！
> docker-compose up
localhost:3000 にアクセス……
完璧ですね。
まぁ今回は Tutorial ように用意されているコードに置き換えるので、説明に沿って src の下を全削除、サンプルコードを配置します。
ここまでできれば準備完了。 こんな画面が表示されて Tutorial を進めていけそうな予感がします。
コード確認
サンプルで与えられたコードの中身を見ておきましょう。
先程用意した src/index.js を確認。どうやら3つの class で構成されているようです。
React では Component というものを用意して、それを呼び出すことで描画するみたいです。
Component は関数や class で用意することができ、class を Component にするには React.Component を継承させるようです。
そして今回すべての class が React.Component を継承していています。
- Square class
- マス1つ分
- 現状 button を描画するようになっている
- Board class
- おそらくマス目全体の class
- 9個の Square を呼び出してあのマス目を描画するっぽい
- Game class
- 一番上
- Board を呼び出したりするっぽい
Game を呼び出すとマルバツゲームが表示されるようになるみたいですね。
ゲーム基板づくり
まずはボードをクリックするとそこにXが置かれるようなところから作っていくようです。
とりあえず描画
まずは四角の中に数値が表示されるようにしてみましょう。
Props とやらを使うことで Component に値を渡すことができるそうです。引数みたいなものかな。
公式に従って Board にコードを追記。
// 変更前 <Square /> // 変更後 <Square value={i} />
なるほど、こうやると Square 内で value の中身を取り出せるんですね。これが props か。
早速取り出す側も書いてみましょう。Square に追記。
// 変更前 <button className="square"> </button> // 変更後 <button className="square"> {this.props.value} </button>
ほぇ〜、this.props.valueでさっきのやつが取り出せると。
class が props を持っていて、Component の呼び出し時に書いたものが入るのかな。
これで数値が描画できました。
クリックで描画
マルバツゲームなので選んだ場所に印をつけられるようにしたいです。
そこで button に onClick を記述し、関数を渡すようです。 更に何やら state というものを使っていくみたいです。
とりあえず公式に従って Square に追記。
// constructor を作成 constructor(props) { super(props); this.state = { value: null, }; }
// onClick を追加して表示も state を使用 <button className="square" onClick={() => this.setState({value: 'X'})} > {this.state.value} </button>
描画する値を props から state に変更し、onClick によって state の値が変化することで表示内容が変わるという仕組みでしょう。
これでクリックした場所に X がつけられるようになりました。 最低限の動きが整い、ゲーム基板の完成です。
ゲーム完成まで
現状だと X しか置くことができません。 これを O X 交互におけるようにして、勝敗判定をすることでゲーム完成となります。
盤面情報の管理
今の設計だと勝敗判定がやりづらいでしょう。 なんたって何が表示されているかは9個の Square 単体がそれぞれ管理してしまっています。
そこで state の値を Board で管理するようにします。この子から親への管理移行をリフトアップというみたいですね。
先程 Square に作成した constructor を Board に移します。 そして Board は9個分の情報を管理したいので、先程の value は必然的に Array で管理することになりました。
class Board extends React.Component { constructor(props) { super(props); this.state = { squares: Array(9).fill(null), }; } // 以下略
そして Square を描画するときにこの squares からデータを引っ張り出すようにすれば完璧です。
renderSquare(i) { // 変更前 return <Square value={i} />; // 変更後 return <Square value={this.state.squares[i]} />; }
このままだと Square から Board の情報を更新できないのでクリックしてもだめですね。 そこで Square に定義した関数を呼び出せるように props で渡しておきます。
// Boardで <Square value={this.state.squares[i]} onClick={() => this.handleClick(i)} /> // Square で <button className="square" onClick={() => this.props.onClick()} >
これでこれから Board で定義する handleClick() を Square のクリックで呼び出せるようになりました。
handleClick()はこんな感じになります。
handleClick(i) { const squares = this.state.squares.slice(); squares[i] = 'X'; // X で固定されてる状態 this.setState({squares: squares}); }
現状クリックされたら X が入るようになってますね。
動作は先程と変わりませんが、盤面情報を完全に Board で管理できるようになりました。 リフトアップ完了です。
マルバツ交互に
のこりは O X 交互にする部分。
単純な実装で行きましょう。boolean で True なら X、False なら O、一回置くごとに反転してしまえばいいです。
state に情報を追記します。
this.state = { squares: Array(9).fill(null), xIsNext: true, // こいつ追加 };
そして先程のhandleClick()で毎回反転させます。O X は三項演算子でまとめてます。これぐらいだと便利ですね。
handleClick(i) { const squares = this.state.squares.slice(); squares[i] = this.state.xIsNext ? 'X' : 'O'; // スマート、これで X 固定じゃないね this.setState({ squares: squares, xIsNext: !this.state.xIsNext, // not にしてて毎回反転されるね }); }
これで O X 交互に置くことができるようになってます。 ついでに Board で誰の手番なのかも出しておきます。
const status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
完成
あとは勝敗判定ができれば完成です。
まぁマルバツゲームの勝敗判定は筋肉で縦横斜めの8パターン揃っている箇所がないかを判定してしまえばわかるので、公式のやつをコピペするなりして実装します。
ただ今のままだと相手の印の上に上書きできたり勝敗付いてるのに続けられちゃったりと色々すごいのでそこの処理まで実装。
印をつける処理はhandleClick()となっているので、そちらでわちゃもちゃします。
勝敗がついているか、もしくはすでに印がある場合は return してしまえば解決しますね。
handleClick(i) { const squares = this.state.squares.slice(); // calculateWinner() は勝者がいなければ null を返すので、その場合 false // squares には O、X、null が入ってるので、何もなければ false if (calculateWinner(squares) || squares[i]) { return; }
これで完成。楽しくマルバツゲームで遊ぶことができます。
おわり
ほぇ〜〜こういうやつね、完全に理解したね。
サクッと React を体験しながらマルバツゲームを作成しました。
Component の扱い、props・state を用いたデータのやり取りなどの空気感を感じることができた気がします。
実はこの Tutorial 続きがあってもう少し機能追加したんですが、思ったより記事が膨らみそうなので書くのはやめておきます。
React あたりの技術が使えればロードのないヌメヌメ更新されるかっこいいもだんなやつが作りやすそうなので、次は何かしら作ってみます。
ie生観察日記
さよなら学生，こんにちは社会
とうとう今日で学生が終わってしまい，明日から社会人らしいです。ほんとかなぁ（ほんとです
というわけで記念に大学四年間で見てきた学生の生態だったり思いつくことを書いてみようかと思います。
ie生とは
うちの学科に所属する学生の総称です。Twitterに住んでる人が多い印象でしたが，住まない人はアカウント作るだけで一切出てこないので観測できないのであって，現実世界には実在するそうです。
なんと我々の代で情報工学科が終わってしまったので，１個下からは工学科のち脳情報コースらしいです。詳しくはホームページ見てください。名前は変わってもリンクはieでした。
ie生の生態
なんとなくこんなだったなーということをまとめます。本編です。
自習室勢とその他
学年に一部屋（だったのは過去のお話，今は1年次の部屋，2年3年次共用の部屋）割り当てられる自習室ですが，そこに毎日来る人と3年間で数回しか来ない人に分かれるような気がします。
来るからどうだ，来ないからどうだという話ではないですが，学年が上がるごとに全員必修の授業が減ってくるので全く会えない人が何人もいたように思えます。気づいたら学科，学校が変わってた，そもそも学生やめて自分の夢を頑張っていた，という人も少なくない印象でした。
聞いた話によると自習室に来ないメンバーは図書館だったりで勉強していたらしく，大学の使い方は様々だなと感じます。
朝起きられない
ie生に限らず人間朝には弱いものです。1限なんて拷問レベル，遅刻欠席により単位を落としていく者たちを何人も見てきたような気がします。
授業を取るときの指標の一つとして朝の授業でないかどうかは重要なもので，1限だと気合はいるから起きられるけど2限だと無理といったジンクスもあったようななかったような。
これは一生の課題となりそうです。
グループワークガチャ
グループで作業を行う講義がいくつかあり，そのメンバーが事前アンケートによって決まるものがいくつかありました。そうやって作られたグループの中にはメンバーの数人しか動かない，ひどいときには1人で頑張っていた環境があったそうです。怖い話ですね。
上で述べたように事前アンケートによって決まるので，グループメンバーの分布はある程度一定になるようにしていたそうです。 例えば，
- 出席をしっかりする
- 意見を言う
- コードが書ける
といったものです。 これは憶測ですが，きっとマイナス方向の評価もあったのでしょう。
- 出席があやしい
- 意見を言うタイプではない
- あまりコーディングが得意ではない
つまり一人で頑張った方は優秀すぎてグループに必要な要素が一人で足りるのでプラス面の割り振りが終了，それどころかこいつらも面倒見てくれ〜と余った枠に心配な方々を入れられたのでしょう。教授の愛ですね。幸い平和なグループだったので助かりましたが辛かったところ，ほんとにお疲れさまでした。
ゲームたのしい
学科柄というのか，ゲーム好きが多かった気がします。
格ゲー，音ゲー，パズルゲー，シューティングゲー……といった様々なジャンルが好きでやり込んでいる方々がいて，ゲームが苦手（嫌いじゃなくて弱すぎる）な身としてはぽかーんとみているしかない世界でした。
多少マナーだったりで問題になる場面もありましたが，現在はどうなっているのやら。ゲームをやってる人もやってない人も楽しめるような環境を作って楽しんでもらえると良いですね。
GPA戦争
主に研究室を決めるときに武器となるGPAで争いが勃発した覚えがあります。 あれだけ仲良く話していた友達とも関係がギスギスし，一切口を聞かなくなった……といったことはなく学年担当の教授が数値を規準に一発で出してくれました。平和でした。
この戦争を知ってか知らずか入学当初は雑に講義を取り，出席したせいで戦争時に後悔する者，また慎重に講義を取り続け，Bをもらってもへこむ者と人それぞれ個性が出るものだったと思います。
Bの時点で優れている判定のはず，それどころかCでも良い判定な規準でしたが，気づくとちゃんとやればAもらえるよねみたいな世界観になっていたのが怖かったです。GPA4で卒業するひとを見てみたい。
ちなみに学内GPA平均は2.6ぐらいらしいですね。
OS
この2文字を見るだけで震え上がるものもいると噂されているとか。
課題の量が割と多くて無限にやることがあったように思えます。内容は様々で多すぎるので書きませんし書けと言われても書けませんが，興味深いものが多かったのではないかなという印象です。
基礎の技術からいま出てきているものまでとりあえず手を動かしてみて！という気持ちが全体を通して伝わってきて，まずは手を動かす，調べるという考え方を身につける場としてよかったのかなと思います。
LT文化
何かとLTが開かれていたような気がします。 高校生，1年次から院生，技術職員の方まで多くの人たちが気軽に参加できる場で，何かをアウトプットするという挑戦の入門編として楽しめる良い場だったのかなと思います。
内容も様々で大学についてを1年次に教えるような真面目な内容もあれば，好きなゲームの紹介，最近作ったもの，このアニメ，アーティストを推せなどなど，どれも楽しめるものばかりでした。
今年はコロナが出てるので新入生歓迎LT大会は難しいのかもしれませんが，Twitterであったように動画配信して行ってみても楽しいのかなと思います。タイミング合えばみたいです。
おわり
雑に思い出して書きました。多分こんなもんでしょう（？）
やりたいことを全てできたかと言われるとそうでもないんでしょうが，少なくとも楽しめた4年間だったんじゃないかなと思っています。これ大事。
多分どんなことも後から見れば改善点が見えるもので，今は大学生活についてそれが発見できる時期なのだと思います。こんな思い出振り返りを考えながら心のなかで社会人生活について考えることができたので頑張っていきたいです。
