物事を敏感に感じる「HSP」の方へ、この本を読んでみてください。
ちょうど今、この本を読み終えました。
泣きそうです。
どんな感情か、自分でもわからない。
でも、思ったことをありのまま書きたい。
そんな衝動のまま、感想を書いていきます。
0.「HSP」とは？
実は以前にもHSPについての記事を書いています。
だいぶ最初の方で、書き方もまだ慣れていない頃なのでちょっと読みづらくて申し訳ないですが…
HSPの定義は以下の通りです。
産まれたときから幼少期に渡り説明のつかない体験を繰り返し、HSPではなく生まれた人より五感が鋭く、精密な中枢神経系を持ち、良い刺激にも、悪い刺激にも強く反応する感受性の強い人達
――Wikipedia『ハイリー・センシティブ・パーソン』より引用
具体例を出しましょう。
- 横で不機嫌な人がいると、自分が何かしてしまったんじゃないかと『明らかに違う』場合でも考えてしまう
- 救急車やパトカーなどの大きいサイレン音がとても不快に感じる
- 近くで怒られている人がいると、まるで自分が怒られているかのように感じる
- などなど…
このようなことに心あたりがある方、もしかしたらHSPかもしれません。
でも、このHSPはいわゆる精神的な病気ではなく、その人の気質、生まれ持った性質なのです。
1.本の内容
この本では「HSPの方は、普段は無意識に我慢を繰り返しており、精神的に疲れやすい」ということを実例とともに1章で紹介しています。
そして、
- 普通以上に受けた刺激を軽減する、回復するための方法
- 特に影響を受けやすい『人間関係』に着目した対処法
- 『疲れ』を減らし、のびのびと働く方法
- HSPの『長所』を活かすための方法
がそれぞれ1章ずつに分けて解説されています。
2.私は無理しすぎていたらしい
最初にも書きましたが、読み終わった時、なんなら読んでる途中で込み上げてくるものがありました。
上の方に載せた以前の記事にも書いたのですが、私も恐らくHSPです。
で、1章目を読んで当てはまる部分が非常に多く、やっぱそうなんだなー程度に思ってました。
ここまではそんな感じでした。まあそもそも「HSPとは」の説明部分なので当然と言えば当然ですね。
で、読み進めている間に1回、完全に手が止まりました。2章の終わりです。
ちょっと本からその部分を引用させていただきます。
もし「なんでこんなに疲れちゃうんだろう」「もっとがんばらないといけないのに！」と自分を鞭打つ声が聞こえてきたら、心をゆるめるサインです。
疲れた自分を責めるのではなく、「疲れている今の状態」に目を向けてください。
疲れたということは、自分に負荷をかけてがんばったということ。「ここまでよくがんばった、偉い！」と自分をねぎらって、充分に休ませてあげてくださいね。
――『「気がつきすぎて疲れる」が驚くほどなくなる「繊細さん」の本』より引用
この箇所を読んだとき、まるで今の私の状態を見透かされているような感覚でした。
私は現在、うつ病で休職しています。
正直「こんなブログ書いてる間にも、他のみんなは頑張ってるのに…」とか、ずっと思ってました。
JavaScript講座を自分で勉強しながらやっているのも、最近色々な本を読んでいるのも、この思いのせいで「何かしなきゃいけない」という感覚があったからです。
でも、どうやら無理しすぎていたようです。
この本を読んで思いましたが、恐らく私がうつになったのも、仕事で無意識に『普通の人が溜め込まない』ストレスを溜め込んでしまったのが要因の一つでしょう。
それを治すために休んでいるのに、更に負荷をかけてしまっていました。
一応今のところは毎日、最低1記事は書いています。
でも、実際は半日以上寝込んでいたり、夜も眠りにつくまでに数時間単位で時間がかかったりと、回復しているとは言えない状態です。
もうちょっと、ゆっくりしてもいいんだ。
そんなことを思った瞬間、本当に泣きそうになりました。
まとめ
本当に筆者の方が伝えたいところは別かもしれません。
でも、私は上で引用した部分が一番刺さりました。
心当たりのある方は、「本当の自分」の声を少しでも聞いてあげてください。
私もこれからは、もうちょっとだけ「本当の自分」の声に、耳を傾けてみようと思います。
それでは。
今回紹介した本：
あとがき
喫茶店でいきなり泣き出したら変人に思われるかもとか思って必死に我慢してます、シノです。
いや、まさか本当にこんな状態になるとは思ってなかったんです。
これは家で読むべきだった…
さて…上では無理しすぎたとか書きましたが、JavaScript講座とか本読んだりとかそもそもこのブログ書いたりとかも、実際やりたいことでもあるのは事実です。
なので、継続はしていきますよ。
ただ、慣れてきて「いろいろやってみたい」という気持ちが強すぎて疲れてしまっていたみたいなので、そこらへんはちょっとスピードを落とそうかなと。
今後も、無理のない範囲で取り入れていきますので、お楽しみに。
あ、Twitterもやってます。よかったら覗いてみてください。
それでは、最後までご覧いただき、ありがとうございました。
第49回：雑記「人の言うこと」
どうも、シノです。
ちょっと今自分に起こってることをそのまま書きます。
Twitterで、私に見事当てはまる指摘ツイートを見つけたんですよ。
そのツイートをした方はフォロー数がかなり多く、多分私のツイートなんか速攻で流れて下手したら存在さえ認知されてないんじゃないかほどです。
なので、私のことを言ってない…とは思うんですが。
めっちゃ気にしちゃうんですよ。
しかも、結構グサッとくる内容で。
さらに、タイミングもばっちりというオマケつき。
簡単に書いてしまうと、プログラミングできるならこうした方がいいんじゃない？的なものです。
言い方も決して責めるようなものではなく、提案のような感じでした。
で、自分なりに考えがあって、反論もできる状態なのですが…
それでも、そういうたくさんの人に支持されている方の言うことが正しいんじゃないか、と考え続けてしまっています。
よく、「そんなの気にするな」と言われるんですよ。
多分、ここまで読んで同じことを思った方もいらっしゃると思います。
決して、気にするなと言うあなたに怒りを覚えているわけではない。
むしろ、そんなふうに気にすることを意図的に操れるあなたのようになりたい。
だから、一つお聞きしたい。
どうやったら気にせずに済むのでしょうか？
なんて、他力本願ではだめですね。
恐らく、原因は以前書いたHSPのような気がしています。
その記事で読むと言っていた本がまだ読めていないので、買って読んでみます。
とりあえず、不安や心配は書きだすといいと聞いたことがあったので、書き殴った次第です。
それでは。
第48回：JavaScript講座予告編「数独を自動で解くプログラム」
どうも、シノです。
えー、すみません、今回は予告編となります。
次回やる内容が決定いたしました！！！
次回は、「再帰」という考え方を扱いたいと思います。
気になる方は自分で先に調べてください。いや、私の記事更新なんて待つ必要ないです。
で、これだけというのもアレなので、ちょっとサンプルプログラムの結果だけ載せておきます。
今回サンプルとして用意したのは、「数独を自動で解いてくれる」プログラムです。
元々入っているものは、「世界一難しい」と言われる問題です。
上が問題の入力部分、「解く」ボタンを押すと、答えが見つかれば下のグレーのところに答えが出力されます。見つからないと何も出力されません。
一応、「クリア」ボタンも用意しました。これを押すと答えの欄が空欄になります。
もちろん、問題の入力部分は変えれるようにしてあるので、どうしても答えが見たい問題がある方は、入力して解いてみてください。
あ、とりあえず動いたなくらいの確認しかできてないです。
見直し、テスト等一切なしで載せてるので、変な動作したらごめんなさい…
今回本編の書けなかった原因なんですが、まず一つはこのプログラムを組むだけで3時間くらいかかってること。
そしてもう一つが、この再帰の中で、私が予想していたものと異なる動きをした部分があったんです。
で、そこの理解がまだ追い付いてなく…申し訳ないですがちょっとお待ちください(´・ω・｀)
更新情報はTwitterで垂れ流しています。よかったらチェックしてみてください。
それでは、次回をお楽しみに！
一応、サンプルのソースコードも載せておきます。
上にも書いたのですが、まだとりあえず動くくらいの確認しかしてないので、変な動作しても責任は負えません(´・ω・｀)
ご了承の上、ご覧ください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>数独解析</title>
<style type="text/css">
table{
margin-left: auto;
margin-right: auto;
border-collapse: collapse;
}
table *{
font-size: 1.5rem;
text-align: center;
}
input{
text-align: center;
width: 2rem;
}
td.verticalline{
border-right: 2px solid #000000;
}
tr.horizonline{
border-bottom: 2px solid #000000;
}
.button{
width: 3rem;
height: 3rem;
}
*{
text-align: center;
}
</style>
</head>
<body>
<script>
function inputNumber(){
document.getElementById("prob[0][2]").value = 5;
document.getElementById("prob[0][3]").value = 3;
document.getElementById("prob[1][0]").value = 8;
document.getElementById("prob[1][7]").value = 2;
document.getElementById("prob[2][1]").value = 7;
document.getElementById("prob[2][4]").value = 1;
document.getElementById("prob[2][6]").value = 5;
document.getElementById("prob[3][0]").value = 4;
document.getElementById("prob[3][5]").value = 5;
document.getElementById("prob[3][6]").value = 3;
document.getElementById("prob[4][1]").value = 1;
document.getElementById("prob[4][4]").value = 7;
document.getElementById("prob[4][8]").value = 6;
document.getElementById("prob[5][2]").value = 3;
document.getElementById("prob[5][3]").value = 2;
document.getElementById("prob[5][7]").value = 8;
document.getElementById("prob[6][1]").value = 6;
document.getElementById("prob[6][3]").value = 5;
document.getElementById("prob[6][8]").value = 9;
document.getElementById("prob[7][2]").value = 4;
document.getElementById("prob[7][7]").value = 3;
document.getElementById("prob[8][5]").value = 9;
document.getElementById("prob[8][6]").value = 7;
}
function getNumber(){
var result = new Array(9);
for(var i = 0; i < 9; i++){
result[i] = new Array(9);
for(var j = 0; j < 9; j++){
var input = document.getElementById("prob[" + i + "][" + j + "]").value;
if(input == ""){
result[i][j] = 0;
}else{
result[i][j] = parseInt(input);
}
}
}
return result;
}
function checkVH(prob, i, j, num){
for(var k = 0; k < 9; k++){
if(i != k && prob[k][j] == num){
return false;
}
if(j != k && prob[i][k] == num){
return false;
}
}
return true;
}
function checkSQ(prob, i, j, num){
for(var k = parseInt(i / 3) * 3; k < parseInt(i / 3) * 3 + 3; k++){
for(var l = parseInt(j / 3) * 3; l < parseInt(j / 3) * 3 + 3; l++){
if((k != i || l != j) && prob[k][l] == num){
return false;
}
}
}
return true;
}
function checkNum(prob, i, j, num){
return checkVH(prob, i, j, num) && checkSQ(prob, i, j, num);
}
function inputResult(result){
for(var i = 0; i < 9; i++){
for(var j = 0; j < 9; j++){
document.getElementById("result[" + i + "][" + j + "]").value = result[i][j];
}
}
}
function solveMain(prob, i, j){
if(i == 9){
inputResult(prob);
return true;
}
var next_i = i;
if(j == 8){
next_i += 1;
}
var next_j = (j + 1) % 9;
if(prob[i][j] > 0){
solveMain(prob, next_i, next_j);
}else{
for(var k = 1; k <= 9; k++){
if(!checkNum(prob, i, j, k)){
continue;
}
prob[i][j] = k;
if(solveMain(prob, next_i, next_j)){
return true;
}
prob[i][j] = 0;
}
}
return false;
}
function solve(){
var prob = getNumber();
solveMain(prob, 0, 0);
}
function clr(){
for(var i = 0; i < 9; i++){
for(var j = 0; j < 9; j++){
document.getElementById("result[" + i + "][" + j + "]").value = "";
}
}
}
</script>
<div>
<p>解きたい問題</p>
<script>
document.write('<table border="1">');
for(var i = 0; i < 9; i++){
document.write('<tr class="');
if(i % 3 == 2 && i < 8){
document.write('horizonline');
}
document.write('">');
for(var j = 0; j < 9; j++){
document.write('<td class="');
if(j % 3 == 2 && j < 8){
document.write('verticalline');
}
document.write('"><input type="number" id="prob[' + i + '][' + j + ']" name="prob" min="1" max="9"></td>');
}
document.write('</td>');
}
document.write('</table>');
inputNumber();
</script>
<br />
<input class="button" type="submit" id="solve" name="solve" value="解く" onclick="solve()">
<input class="button" type="submit" id="clear" name="clear" value="クリア" onclick="clr()">
<p>解答</p>
<script>
document.write('<table border="1">');
for(var i = 0; i < 9; i++){
document.write('<tr class="');
if(i % 3 == 2 && i < 8){
document.write('horizonline');
}
document.write('">');
for(var j = 0; j < 9; j++){
document.write('<td class="');
if(j % 3 == 2 && j < 8){
document.write('verticalline');
}
document.write('"><input type="number" id="result[' + i + '][' + j + ']" name="result" disabled></td>');
}
document.write('</td>');
}
document.write('</table>');
</script>
</div>
</body>
</html>
第47回：雑記「個人的オススメ曲3選」
どうも、シノです。
えー、たまには考え方じゃなくてこういう趣味に振り切ったこと書いてもいいよね。
ということで…
今回は、私が人生で聴いた中で、特に好きでオススメしたい曲3選を紹介したいと思います！！！
前置きなんていいですね。早速目次です。
- 0.私の音楽の選び方
- 1.音楽ゲーム「beatmaniaIIDX」より『冥』(Amuro vs Killer)
- 2.「アイドルマスターシンデレラガールズ」より『こいかぜ』(高垣楓(CV.早見沙織))
- 3.『world.execute(me);』(Mili)
- まとめ
0.私の音楽の選び方
私は、特定のアーティストで曲を選ぶようなことはしてないです。
これは、自分でも好きな曲の傾向がイマイチわかっていないことが原因です（笑）
なので、これから紹介する3曲も系統が全く違うと思いますが、ご了承ください。
1.音楽ゲーム「beatmaniaIIDX」より『冥』(Amuro vs Killer)
えーすみません、YouTubeに公式の動画なかったので貼るのは控えます。検索するといっぱい出てくるので聞いてみたい方はよかったらどうぞ。Amazon貼りましたがサムネがDDR…
一つ目は、私が昔やっていた音楽ゲーム「beatmaniaIIDX」より、永遠の皆伝ボス『冥』です。
初出は12作目の「HAPPY SKY」。なんと2005年の作品です。もう15年も前なのか…
これは、私が音楽ゲームを始めたきっかけの曲であり、初めて聞いたときに「こんな曲もあるのか」と、新しい世界が開いた曲でもあります。
今ではもうやってないのですが、それでもたまに聴きたくなってしまいます。
ちなみに、ゲームの方の難易度はやばいです。クリアマーク付けるだけなら加速地帯抜けた後頑張ればいいので十段～中伝でも大丈夫だと思いますが、ハードはまず間違いなく皆伝必須。というか条件緩い段位認定で通らなきゃハードなんて無理だろって話。乱で当たり来たとしても、正規で段位抜ける程度の地力なきゃ圧倒的物量でゲージ蒸発するのがオチです。目安としてはまずノマゲは安定させて、ミスカウントが60切ってくらいからこの曲を乱ノックでやること。加速地帯以外は余裕くらいじゃないとハードは遠い。そうじゃないと全然クリアできずにモチベ下がるだけじゃなくて苦手意識ついてまず間違いなく抜けられなくなる。その前に他の曲でしっかり認識力とそれに合う地力をつけること。またノーツ数も2000とかなり多いので事前に体力もしっかりつけておくのが大事。AA(A)くらいでへばってるようじゃきつい。天空の夜明け(A)が最後までしっかり叩き切れるくらいがいいんじゃないかな。ICARUS(L)がわりと近い譜面らしいのでそっち乱でやるのもいいかもだけどそっちの方がやばい(黒イカHard≒冥EXH)そうなのでそっちが全然できなくてもめげないこと。あと繰り返しになるけど、特に段位では粘着ダメ、ゼッタイ。
あ、ちなみに私は皆伝取得直後にやめちゃってハードはしてないです。
そして、音ゲーマー以外は上の長い文章読まなくて大丈夫です。とりあえずこの曲やばい。
2.「アイドルマスターシンデレラガールズ」より『こいかぜ』(高垣楓(CV.早見沙織))
一曲目と同じく、公式動画がYouTubeになかった…(´・ω・｀)
こっちは検索してもフルは出てこない気がします。
二つ目は、ゲーム？アニメ？「アイドルマスターシンデレラガールズ」より、高垣楓(CV.早見沙織)で『こいかぜ』です。
最初に聴いたときに思ったことは「これ、アイドルソングなのか…？」でした。
風格というかなんというか、もう曲調がいい意味で普通じゃない。全身に鳥肌が立つような感覚でした。そしてその曲調に負けない早見さんの歌唱力。
私がこういった二次元アイドルコンテンツに対して抱いていた「なんかいかにもオタクを狙ってそう」という偏見がきれいさっぱり消え去った瞬間でした。
これをきっかけにデレステを始めたり、スクフェスも一時期やってました。これで再び鳥肌立たせたり。
3.『world.execute(me);』(Mili)
はい、今までにもちょろっと出していた曲です（笑）やっとYouTube公式動画あった
三つ目は、音楽グループMiliによる、『world.execute(me);』です。
全英歌詞です。
Miliの曲ですと、他にも『RTRT』や、『Nine Point Eight』、アニメ「ゴブリンスレイヤー」の主題歌にもなった『Rightfully』などなど、まだまだ推したい曲がいっぱいあるのですが、今回はこれだけで。
この曲に限らずですが、Miliが手掛ける楽曲は独特の雰囲気があり、自然と惹きつけられてしまうような、そんな魅力があります。
特に、VocalのCassie Weiさんの透明感溢れる中にも力強さを感じる声がとても美しいです。
また、もう一つ、そんなMiliの楽曲の中でもこの曲を選んだ理由なんですが…
上の動画を再生してもらうとわかりますが、文字が下から流れてきていますね。
これ、プログラミング言語のJavaなんです。知ってる人はタイトルでわかるかもですね。
私自身、Javaは結構書いていたので、その分親しみがあって惹かれたのかもしれません。
Amazonリンクも貼っておきます。よかったら。
ちなみにですが、この曲が気に入ったら是非他のMiliの曲も聴いてみてください。
気に入る曲が多いはずです。
英語は難易度高いし…なんて方は、「YUBIKIRI-GENMAN」や、「TOKYO NEON」、「幾年月」あたりが日本語でオススメなのでよかったら。
まとめ
いかがだったでしょうか。
統一感の欠片もない曲たちですが、今回紹介したものはほんとにオススメです。
気になったものがあれば、是非聴いてみてください。
普段はTwitterでも色々呟いてます。よかったら下のボタンからどうぞ。
それでは。
あとがき
Miliを広めたくて書き始めただけです←
どうも、シノです。
最近ちょっと本気で色々考える系が多かったので、たまにはと思って軽い紹介をしてみました。
お堅い文章だけでは疲れますよね、たまには息抜き大事。
さて、私事ですが、このブログを書き始めてから色々な考え方の本を読むようになりました。
その紹介なんかもどっかのタイミングでやろうかなーなんて考えてたりします。
もしよければ、そっちも見てくれると嬉しいです。
それでは、最後までご覧いただき、ありがとうございました。
第46回：JavaScript講座本編6「配列」
どうも、シノです。
ほんとに前書きで書くことなくなったので、講座外の記事宣伝でも入れておきます（笑）
興味があれば読んでみてください。
さて、今回はJavaScript講座本編第6回です！
今回は、「配列」というものを見ていきます。
「あれ、前回リストやるって言ってなかったっけ？」という方、ご安心ください。
JavaScriptでは、この配列とリストは同じものを指します。
というわけで、ここからは配列と呼ぶことにします。
今回の目次です。
0.前回の復習
前回は、HTMLから情報を持ってきたり、逆に情報を入れてあげたりする方法を解説しました。
あ、前回最後の問題はどうだったでしょうか。
以下に、それぞれの解答例を貼っておきます。
分からなかった人も、これを見て再チャレンジしてみてください。
問題1
<table>
<tbody>
<tr>
<td>数字：</td>
<td><input id="num1" name="num1" type="number" /></td>
</tr>
<tr>
<td style="text-align: center;" colspan="2"><input id="sumButton" name="sumButton" type="submit" value="計算" onclick="sum()"/></td>
</tr>
<tr>
<td>答え：</td>
<td><input id="result" name="result" type="number" /></td>
</tr>
</tbody>
</table>
<script>
function sum(){
var num1 = document.getElementById("num1").value;
var result = 0;
for(var i = 1; i <= num1; i++){
result = result + i;
}
document.getElementById("result").value = result;
}
</script>
問題2
<table>
<tbody>
<tr>
<td>数字：</td>
<td><input id="num1" name="num1" type="number" /></td>
</tr>
<tr>
<td style="text-align: center;" colspan="2"><input id="sumButton" name="sumButton" type="submit" value="計算" onclick="sum()"/></td>
</tr>
<tr>
<td>答え：</td>
<td><input id="result" name="result" type="number" /></td>
</tr>
</tbody>
</table>
<script>
function sum(){
var num1 = document.getElementById("num1").value;
var result = 0;
for(var i = 1; i <= num1; i++){
if(i % 2 == 0){
continue;
}
result = result + i;
}
document.getElementById("result").value = result;
}
</script>
1.「配列」って何？
さて、今回の内容に入りましょうか。
まずは、そもそもの配列の説明からです。
配列とは、簡単に言ってしまうと「0個以上の変数を一つにまとめたもの」です。
例えば、数字を100個使いたいとしましょう。
そのとき、100個の変数を別々に定義するのってめちゃくちゃ大変ですよね…
そんなときに、この配列が使えるんです。
2.「配列」の宣言
配列の宣言は以下の2通りです。
- var 変数名 = new Array(配列の中身1, 配列の中身2,...);
- var 変数名 = [配列の中身1, 配列の中身2,...];
どちらでも、同じ結果になります。
が、1つ注意点があります。
数字1つを指定した場合ですね。
- var 変数名 = new Array(3);
- var 変数名 = [3];
としたとき、結果が変わります。
上のnew Array()を使った場合は、中身が入っていない3つの要素を持つ配列が出来上がります。
それに対して、下の大括弧を使った場合は、「3」という要素1つを持つ配列が出来上がります。
この違いに注意しましょう。
3.「配列」の使い方
さて、実際に使ってみましょう。
こちらは、具体例で見ていきます。
var a = [3, 1, 4];
document.write(a[0]);
document.write(a[1]);
document.write(a[2]);
配列を定義して、その要素を表示しています。
このように、配列の要素を1つ持ってくるときは、0から数え始めて何番目か、という指定のしかたをします。
それを、大括弧で囲って、配列が入っている変数の後ろにつけてあげるんですね。
これを実行した結果は以下の通りになります。
これだけだとあまり便利さを感じないですね…
この配列が真価を発揮するのは、繰り返し処理です。
例えば、極端な例ですが、以下の配列の要素全てを足したいとしましょう。
var pi = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5, 8, 9, 7, 9, 3, 2, 3, 8, 4, 6, 2, 6, 4, 3, 3, 8, 3, 2, 7, 9, 5, 0, 2, 8, 8, 4, 1, 9, 7, 1, 6, 9, 3, 9, 9, 3, 7, 5, 1, 0, 5, 8, 2, 0, 9, 7, 4, 9, 4, 4, 5, 9, 2, 3, 0, 7, 8, 1, 6, 4, 0, 6, 2, 8, 6, 2, 0, 8, 9, 9, 8, 6, 2, 8, 0, 3, 4, 8, 2, 5, 3, 4, 2, 1, 1, 7, 0, 6, 7];円周率を100桁書いてみました。
あ、円周率をある程度覚えておくと、一部分切り取ってパスワードとかに使えるので便利ですよ。
私は一部切り取ったものにさらにちょっと手を加えてよく使ってたりします。
なんて話はどうでもいいです。
で、これを全部足すのって、そのまま書くと相当骨が折れますよね。
なので、for文を使いましょう。
そんなときに、配列には以下の変数が用意されています。
length：その配列の要素数が格納されている。
というわけで、これを使ってfor文を書いてみます。
あ、配列piは上で書いたものを宣言したとしてください。
var result = 0;
for(var i = 0; i < pi.length; i++){
result += pi[i];
}
document.write(result);
これを実行すると…の前に、for文の中身、緑太字の部分がまたおかしなことになってますね。
実はこれ、「result = result + pi[i];」と同じです。変数に値を足し算するときは省略できるんですね。
もちろん、引き算、掛け算、割り算でも同じことができます。
さて、改めて実行結果を見てみましょう。
471ってなったと思います。
これで、配列のすごさがわかっていただけたでしょうか。
まとめ
いかがだったでしょうか。
今回は、「配列」について解説しました。
複数の要素を一気に扱える便利な方法なので、よかったら使ってみてください。
ちなみに、配列の要素としてさらに配列を入れることもできます。
いわゆる二次元配列ってやつですね。
これはちょっと複雑になってくるので、余力のある人は調べてみてください。
さて、次回ですが…何しようかって迷ってます。
というのも、実は私が勉強した内容はこれで全部書き切ってしまったんですよ。
だから、新しい内容を私も勉強しなきゃいけないんですが…どこに進もうか迷っていて。
なにか「これ解説して！」って内容あれば是非教えてください。勉強します。
更新情報はTwitterでも呟いてますので、よかったらどうぞ。
次回：予告編「数独を自動で解くプログラム」(2020/1/21投稿しました！！！)
それでは。
全ての曲は『スルメ曲』？『認知的不協和』とは？心理学素人が本気で考察してみた
さあ、タイトルからぶっ込んでいきました（笑）
昨日、喫茶店から帰ってるときに、いつも通り好きな曲を聴いていたんです。
で、ふと「この曲、最初は微妙だと思ってたんだけどな…」ってなって。
最近読んでるメンタリストDaiGoさんの本(これとかこれとかこれ)の内容がふっと出てきて。
あれ、『スルメ曲』って言うけど、全部の曲がスルメ曲なんじゃね？
とか思いついてしまったんですよ。
冗談でも何でもなく、本気で考察していきます。
あ、私は音楽も心理学も素人です。
特に心理学は、最近本を軽く読んでる程度です。大学で研究とかも一切していません。
なので、変なこと言ってたらコメントで突っ込んでください。
お願いします何でもはしないけど。
1.そもそも『スルメ曲』って？
スルメ曲の定義は以下の通りだそうです。
聞けば聞くほどに味の出る楽曲
まあそのままですが、繰り返し聞くことで、だんだんと好きになっていく曲ですね。
皆さんも、「この曲がそうだなぁ」とか感じる曲があるのではないでしょうか？
2.「認知的不協和」とは
心理学の用語で、『認知的不協和』(にんちてきふきょうわ)ってご存じでしょうか？
調べると、以下のような定義が出てきました。
人が自分の中で矛盾する「新しい事実」を突きつけられた時に感じる不快感
この定義そのままだと難しいですね、例を出しましょう。
例えば、あなたが歩いているとき、ポケットから財布が落ちたとしましょう。
そのとき、すれ違った人に「落としましたよ」と声を掛けられました。
あなたは「ありがたい、何かお礼をしたい」と感じるはずです。
このとき、心の中でどういうことが起こっているかというと…
- 相手にやさしくされた(事実1)
- でも、自分は相手に何もしてない(事実2)
- そこに差(矛盾)が発生し、モヤモヤする(不快感)
簡単に言ってしまうとこんな感じです。
しかも、無意識にこう考えてしまうので、自分の意識としては最後の「モヤモヤする」部分しかわからないのです。
更に、これを解消しようとする心理の働きもあります。
それが、『認知的不協和の解消』です。
人は認知的不協和を覚えた場合、これを解消するために、自身の中にある矛盾を正当化するほどの新たな認知が必要になります
これによって、上の例の続きは下のどちらかのパターンに分かれるでしょう。
- 余計なお世話だ、と思う
→特に何もしてもらわなかったことになり、事実1がなくなるのでモヤモヤが解消！ - 実際にお礼をする(「ありがとう」と言う、ジュースをおごる等)
→自分もしてあげたため、事実2がなくなるのでモヤモヤが解消！
…余計なお世話とか思うのはかなり極端な例ですが、このように自分の考えを変えることで、この認知的不協和を解消しようともしています。
もちろん、これも無意識に行われています。
これ、色々な物事に応用できる考え方なので、知っておくと得かもしれません。
3.全ての曲が『スルメ曲』ってどういうこと？
さて、本題です。
スルメ曲は、何回も聴くことで好きになっていく曲、でしたね。
ところで、あなたは好きな曲、1回しか聴かないですか？
もちろん、何回も聴きますよね。
ということは、『認知的不協和』の考えでいくと…
- 好きな曲は何回も聴く
- つまり、何回も聴いている曲は好きなはずだ
- スルメ曲は何回も聴く
- あれ、でもこのスルメ曲はもともとそんなに好きじゃなかったはず…
- なんかおかしい、モヤモヤする…(2と4で差があり、『認知的不協和』発生！)
- …違う、私はこの曲が好きなんだ！(『認知的不協和の解消』発生！)
という流れが、「無意識に」行われているのです！
まとめ
いかがだったでしょうか。
まとめると、「心理学的にはどんな曲もスルメ曲になり得る」という結論に至ってしまいました。
ほんとに素人が欠片しかない知識で書いてるので、信じるかどうかはお任せします（笑）
こんなことを考えている変人のTwitterアカウントは以下になります。
暇だったらちょっと覗いていってください。
それでは。
あとがき
いや、ほんとに思いついた瞬間「これは書くしかない」とか血迷っちゃったよ、シノです。
思いついた瞬間は「なんか面白い発想キター！！！」とか思ってたのですが、今ここを書いている段階では落ち着いてしまい、なんか間違ってるんじゃないかとか考えてます。
でも、自分の知識では否定できなかったので、思いついた瞬間のことを思い出しながら書いてしまいました（笑）
言われてみれば、聴いてる間に好きになるって当たり前に感じませんか？
それを、それっぽく解説しただけです←
これからも、こんな思いついたことを書き綴っていくこともあると思います。
見てくれるとうれしいです。
それでは、最後までご覧いただき、ありがとうございました。
第44回：JavaScript講座本編5「HTMLとの連携」
どうも、シノです。
欲しい本があったのですが、まさかの品切れで悲しくなりました(´・ω・｀)
漫画版があったので買ったのですが、恐らく元の本も買うと思います…
そういった本のまとめとかも需要あるのかな？
さて、今回はJavaScript講座本編第5回です！
ついに、HTMLから情報を持ってきたり、逆に狙ったところへ情報を埋め込むことをしていきます。
これができるようになると、ここで紹介した内容が書けるようになります。
というか、そこで紹介した内容を実装するためにどうすればいいかを書いていきます。
実際の例を見た方が分かりやすいですからね。
目次です。
0.前回の復習
前回は、関数をやりました。
処理をまとめるときに、どうまとめるか、情報の受け渡しなんかも解説しました。
今回は、この内容をガンガン使っていきます。
1.情報を受け取る・渡すための準備
さて、いきなり受け取ったり渡したりすることもできるのですが、まずはわかりやすいように準備をしていきます。
まず、枠だけ作っちゃいましょう。
そのときに使うHTMLタグを紹介します。
テーブルに関するHTMLタグ
- <table>～</table>：テーブルを書くことを表す。
- <th>～</th>：テーブルの1行を書くことを表す。
- <td>～</td>：テーブルの1つの欄を書く。オプションにcolspan="数字"と入れると、その数分の欄を繋げることができる。
情報入力・出力に関するHTMLタグ
- <input type="(入力の種類)" value="(表示する内容)" />：各種入力項目を表す。
今回使用する入力の種類は以下の通り。
- number：数字入力
- submit：決定ボタン
これらを使って、入力欄とボタン、表示欄を作っていきます。
以下のソースコードを実行してみてください。
<table>
<tbody>
<tr>
<td>数字1：</td>
<td><input id="num1" name="num1" type="number" /></td>
</tr>
<tr>
<td>数字2：</td>
<td><input id="num2" name="num2" type="number" /></td>
</tr>
<tr>
<td style="text-align: center;" colspan="2"><input id="sumButton" name="sumButton" type="submit" value="計算" /></td>
</tr>
<tr>
<td>合計：</td>
<td><input id="result" name="result" type="number" /></td>
</tr>
</tbody>
</table>
かなり長いですが、頑張って写してください。
これを実行すると、以下のようになります。
はい、まずは表示までできたかと思います。
では、ちょっと詳しく見てみましょう。
まず、全体を<table>タグで囲っています。
そして、それぞれの行を<tr>タグで囲っているのがわかるでしょうか。
更に、1行目、2行目、4行目は二つの<td>で囲まれた部分、3行目は<td>にcolspanオプションで2を指定してるので、2つ分の場所を使って表示しています。
colspanの前のstyleオプションは、ボタンを中央に表示するためのCSSです。わからない人はCSSの解説を見てみましょう。
で、各行に<input>タグがありますね。これが、入力項目を作っています。
種類を決定しているのは、それぞれのtypeオプション。numberが数字、submitが決定ボタンを表しています。
ボタンには「計算」という文字を表示するため、valueオプションに「計算」という文字を指定しています。
ここまで、よろしいでしょうか。
さて、それぞれのinputに二つ、なんか見たことないオプションがついていると思います。
idオプションとnameオプションです。
- idオプション：そのタグを参照するための名前をつける。同一HTML内で重複不可
- nameオプション：そのタグを参照するための名前をつける。同一HTML内で重複可
今回は簡単に書きましたが、これらは用途も違います。
ですが、そこに突っ込むとPHPとかも出てきてしまうので、それはまた今度…やるのか？
まあ、今は重複して同じものを設定できるかどうかで考えておきましょう。
ちなみにnameオプションは、その値を受け渡しする部分でまだ解説していない内容を使います。
で、説明に「そのタグを参照するための名前をつける」と書いたのですが、ここの名前を使ってJavaScriptで値を持ってきたり、渡したりするんですね。
2.JavaScriptで値を受け取ってみよう
さあ、こっからが本番です。
JavaScript側で、この値を持ってきたいと思います。
そのためには、documentというものの中に定義されている、以下の関数を使用します。
- getElementById(ID)：idオプションにIDが指定されたものを取得する。
- getElementsByName(Name)：nameオプションにNameが指定されたものをNodeListとして取得する。
- 両者ともに、中の要素はこれらのvalueに格納されている。
なんか難しいことが書いてありますね。
具体例を見ながら、一つずつ見ていきましょう。
var num1 = document.getElementById("num1").value;
var num2 = document.getElementsByName("num2")[0].value;
document.write("num1の値は" + num1 + "です。");
document.write("num2の値は" + num2 + "です。");
このように書くと、num1には、表の「数字1：」の右に入力された値を、num2には、「数字2：」の右に入力された値を持ってこれるようになります。
ただし、現時点では思ったように動かないと思いますが仕様です。
これをそのまま書いても、ページを表示した瞬間しか持ってこれないのです。
つまり、空欄を持ってきていることになるので、数字が表示されないんですね。
ちなみに、文字列のリテラルで足し算をしていますね。
これは、文字列をくっつける意味になります。非常に使えるので覚えておきましょう。
さて、細かく見ていきます。
1行目、イコールの右を持ってきてみましょう。
document.getElementById("num1").value;
まず、値を持ってくるために、そもそもこのHTML文章のデータにアクセスしなければいけません。
そのため、documentというものを持ってきましょう。
document
次に、その中に定義されている関数「getElementById()」を使いたいです。
中に定義されているものを使う場合、ドットでつなぎます。
document.getElementById()
今持ってきたいものは、一つ目の入力欄の情報です。
そこでは、「num1」というidオプションをつけているので、引数にそれを渡してあげましょう。
document.getElementById("num1")
これで、一つ目の入力欄を持ってくることができました。
が、これで終わりではありません。
ここまでで、入力形式などを含めた入力欄全部の情報を持ってきています。
なので、そこから入力された値を抜き出す必要があります。
それが、この中の「value」という要素に入っているんですね。
つまり、この「value」をドットとともにくっつけてあげることで、やっと情報を持ってこれます。
document.getElementById("num1").value
これで、入力欄に入力された値を持ってくることができました。
getElementsByName()も同じ考え方ですが、ちょっと違う部分がありますね。
これは、リストという普通のリテラルとは違う形で持ってきているからです。
ここは、また別の機会に解説しましょう。
とりあえず例ではこう書きましたが、次の例からはnum1の方と同じようにgetElementById()を使っていきます。
どうでしょうか。ここまででかなりの長さになってしまいましたが、実はまだ半分くらいです…
休憩しながら、ゆっくりいきましょう。
3.ボタンを押したタイミングで値を持ってこれるようにしよう
さて、上で、「ページが表示されたタイミングで読み込む」と書きました。
次は、これを「ボタンを押したタイミングで読み込む」ようにしましょう。
ここで、関数の考え方が出てきます。
関数は、処理をまとめたもの。
それを、ボタンを押すことによって呼び出してあげよう、ということです。
というわけで、まずはHTMLの修正です。以下のように直してあげましょう。
<table>
<tbody>
<tr>
<td>数字1：</td>
<td><input id="num1" name="num1" type="number" /></td>
</tr>
<tr>
<td>数字2：</td>
<td><input id="num2" name="num2" type="number" /></td>
</tr>
<tr>
<td style="text-align: center;" colspan="2"><input id="sumButton" name="sumButton" type="submit" value="計算" onclick="sum()" /></td>
</tr>
<tr>
<td>合計：</td>
<td><input id="result" name="result" type="number" /></td>
</tr>
</tbody>
</table>
赤太字の部分を追加しました。新しいオプションですね。
onclickオプション：ボタンが押されたときに呼び出すJavaScriptの関数を指定する。括弧も必須。
こうすることで、ボタンが押されると、JavaScriptで定義した「sum()」という関数を呼び出すようになります。
ということは…はい、その関数も定義してあげましょう。
さっきの処理を、そのまま関数にしてしまいましょうか。あ、num2のNameもIdに直してます。
function sum(){
var num1 = document.getElementById("num1").value;
var num2 = document.getElementById("num2").value;
document.write("num1の値は" + num1 + "です。");
document.write("num2の値は" + num2 + "です。");
}
今度は、ボタンを押すと表示が変わるはずです。
でも、一度ボタンを押すと表示が切り替わってしまって、もう一度入力したいのに…となりますね。
なので、元々あるものの中に情報を埋め込んであげましょう。
4.値をHTMLに埋め込もう
さて、最後の項目です。
JavaScriptに書いたsum関数を、以下のように直してあげてください。
function sum(){
var num1 = document.getElementById("num1").value;
var num2 = document.getElementById("num2").value;
var result = num1 + num2;
document.getElementById("result").value = result;
}
document.writeの部分を消して、代わりに計算と、埋め込む部分を書きました。
この中で、さっきは値を取得してきたvalueに値を代入してますね。
実は、これだけで値を埋め込むことができます！
さて、これを実行してみましょう。
以下のようになるはずです。
…どうでしょう？
ボタンを押して、二つの数字が、合計されるのではなく、二つ並んで表示されれば正解です。
あ、ごめんなさいちょっと待って、これも原因があるんです。
実は、取得してきた値なんですが、「文字列」として認識されちゃってるんですよ。
で、上で解説した通り、文字列+文字列は文字列をくっつける働きをします。
だから、二つの数字が並んで表示される、というわけですね。
じゃあどうするか、というと…
数字に直してあげればいいんです。
数字に直すには、以下の関数を使います。
parseInt(文字列)：文字列で表現された数字を、整数に変換する。
見た目は変わらないのでちょっとわかりづらいかもしれませんが、これをやってあげる必要があります。
というわけで、取得してきた文字列を、そのまま数字に直しちゃいましょう。
sum関数を、以下のように直してあげてください。
function sum(){
var num1 = parseInt(document.getElementById("num1").value);
var num2 = parseInt(document.getElementById("num2").value);
var result = num1 + num2;
document.getElementById("result").value = result;
}
これで、持ってきた値を数字に直してから、変数に代入することができました。
さあ、もう一度実行してみましょう。すると…
今度こそ、思った通りの動きをしてくれると思います。
まとめ
いかがだったでしょうか。
とても長くなってしまいましたが、やっとHTMLとの連携ができました。
ここまでの内容で、行動を選択する戦闘くらいは実装できるようになります。
興味があれば、是非作ってみてください！
次回ですが、解説を先延ばしにしていたリストを取り扱おうかなと思います。
これは、繰り返し処理と相性がよく、非常に使える内容になります。
是非、使いこなせるようになりましょう。
更新情報はTwitterでも呟いてますので、よかったらどうぞ。
次回：配列(2020/1/20投稿しました！！！)
最後に、またしても問題です。
問題1：数字を一つ入力して、1からその数字までの合計を表示してみましょう。
例えば、4を入力したら10を表示、5を入力したら15と表示、などです。
問題2：問題1ができたら、今度は1からその数字までの奇数の合計を表示してみましょう。
例えば、4を入力したら1,3が奇数なので4と表示、5を入力したら1,3,5が奇数なので9と表示、6を入力しても1,3,5が奇数なので9と表示、といった感じですね。
あ、両方とも数列の公式使って求めることもできますが、練習のためそれはNGとします。
何か、使えるものがありましたね…？
それぞれの表示例を下に出しておきます。
問題1
問題2
今までの知識を総動員して、どうやったらできるか色々と試してみてください。
それでは。
