【理系大学生】yomiakiのラクガキ

徒然なるままによみあき

【映画】実話ベース?!「アルゴ」観た

この前、ベン・アフレック監督兼主演の映画「アルゴ」を観ました。

観た感想を薄口でダラダラと書いていこうと思いますー

www.youtube.com

 

 

どんな映画?

『アルゴ』(ARGO)は、1979年から1980年にかけて発生した在イランアメリカ大使館人質事件を題材とした、ベン・アフレック監督・製作・主演による2012年のアメリカ映画である。第85回アカデミー賞作品賞受賞作品。

Wikipedia

 

 

あらすじ

イラン革命により、1979年2月にルーホッラー・ホメイニー率いる反体制勢力がモハンマド・レザー・パフラヴィー国王をイランから放逐したものの、その後国外に亡命したパフラヴィー元国王をアメリカが受け入れたことに反発したイスラム法学校の生徒を中心とした反米デモ隊が、同年11月にテヘランアメリカ大使館を占拠し、52人のアメリカ人外交官が人質に取られた。

だが、大使館が占拠される直前に6人のアメリカ人大使館員が大使館から脱出し、近くにあるカナダ大使公邸に匿われる。しかし6人が脱出したことを新政府(イスラーム革命評議会)は気づいていなかった。これを受けてCIA秘密工作本部作戦支援部のトニー・メンデス()は6人をイランから救出するため、『アルゴ』という架空のSF映画をでっち上げて、6人をそのロケハンのスタッフに身分偽変させ秘密裏にテヘランから脱出させるという作戦をたてる。

Wikipedia

とあるように、偽映画作戦で外交官を救出すると言う映画です。

 

 

※イランとアメリカのどっちが善で悪かとか歴史的背景とかは置いといて、この映画の感想について述べます。

(ネタバレちょいあり)

 

 

実話ベースという緊張感

まず、この映画が実際あった事件をベースにしているということを念頭にみたので、常に緊張感が感じられました。

 

特に序盤の、アメリカ大使館が占拠される場面の緊張感がすごかった。

暴徒の圧倒的な数と、怒りの感じ。

 

カナダ大使館に逃げ込んだ外交官のいつ見つかるかわからない緊張感...

偽映画作戦の偽ロケハン中での緊張感...

出国間際の緊張感...


などなどのドキドキ要素がいっぱいでした。

 

 

魅力的な登場人物

主人公のトニー・メンデス(ベン・アフレック)をはじめ、その協力者達がすごいかっこよかった

 

トニーの上司のジャック・オドネル (ブライアン・クランストン)の頼れる男って感じが最高によかった。作戦中止となっていたが、なんだかんだで作戦を実行する!ってなった時に、飛行機のチケットの手配とか諦めずに対応しているとことか、いい上司だなと思った。

 

その他にも、偽映画作戦に協力した映画監督のレスター・シーゲル(アラン・アーキン)や、

リスクを背負いながら6人の外交官を匿ったカナダ大使館ケネス・D・テイラー(ヴィクター・ガーバー)
 など、カッコええな〜ってなりました。

 

 

観終わった後、満足感ありです!

感情移入して作戦成功の喜びを追体験できると思います!

是非みてみてくださいー

 

 

 

よみあきでした。

 

アルゴ<エクステンデッド・バージョン>【Blu-ray】 [ ブライアン・クランストン ]

価格:1,100円
(2021/8/15 13:00時点)
感想(3件)

アルゴ [ ベン・アフレック ]

価格:1,100円
(2021/8/15 13:00時点)
感想(0件)

 

 

 

 

 

 

【映画】温かい友情ドラマ「グリーンブック」観た

Amazonプライムの見放題に前々から観たい!と思っていたグリーンブックが追加されていたので、観ちゃいました

【公式】『グリーンブック』3.1(金)公開/本予告 《本年度アカデミー賞作品賞含む3部門受賞!》 - YouTubeyoutu.be

 

 

題名「グリーンブック」って?

黒人ドライバーのためのグリーン・ブック (The Negro Motorist Green Book または The Negro Traveler's Green Book) は、アメリカ合衆国が人種隔離政策時代の1930年代から1960年代に、自動車で旅行するアフリカ系アメリカ人を対象として発行されていた旅行ガイドブックである。書名は創刊者であるヴィクター・H・グリーンに由来し、「グリーンによる黒人ドライバーのためのガイドブック」というほどの意味になる。通常は単に Green Book と呼ばれた。

(黒人ドライバーのためのグリーン・ブック - Wikipediaより)

 

とあるように、アメリカの人種隔離政策時代の黒人向けの旅行ガイドブックのことを示します。

テーマ的には結構重い感じですね。

 

 

どんな映画?(ちょいネタバレ含む)

ニューヨークの高級クラブで用心棒として働いていたトニー・リップ(ビゴ・モーテンセン)が、黒人天才ジャズピアニストのドクター・シャーリー(マハーシャラ・アリ)にドライバーとして雇われ、2人が旅を続け、友情を深めていくというものです。(ざっくり)

 

トニーは、友達が多く、家族との仲が良く、周りから頼りにされている、元気なおっちゃんです。

対して、ドクター・シャーリーは、知的な雰囲気で、夜ひとりでウイスキーを飲むようなダンディーな感じな男です。

 

対照的な2人ですが、旅を続け、いろいろなアクシデントを乗り越えて、お互いに信頼を深めていくのがすごい心にくるんですよ。

 

ドクター・シャーリーはいく先々で、ひどい仕打ちを受けますが、これが一昔前に実際にあったことだと考えると、苦しいものです。

ピアノを弾くということで、歓迎されつつも、トイレは別、レストランは入れないなど、さまざま...

そういう、キツい状況になったときに用心棒のトニーが「おかしいだろ!」と言わんばかりに、ぶっ壊してくれるところにスッキリする。

ツライ時にそばにいてくれるようなトニーの存在感、安心感。そこにシビれる!あこがれるゥ!

 

ドクター・シャーリーもやられっぱなしではなく、自分の信念を持って、ピアノを弾いており、物語の終盤、「は?そんな差別するならピアノ弾かんぞ!」(とは言ってない)となって元々演奏する予定だった場所から去り、黒人の集まるバーで楽しそうにピアノを弾くシーンはなんだか笑顔になった。

 

ドクター・シャーリーの、ツライ状況になるということがわかっているが、やる価値がある、やらなければならないと思ったことを貫くという精神がシンプルにカッコいい。

 

 

そんな2人の男がみれる映画「グリーンブック」、是非観てみてください。

観終わった後、あったかい気持ちになれるかも...?!

 

グリーンブック [ ヴィゴ・モーテンセン ]

価格:3,573円
(2021/8/9 21:03時点)
感想(3件)

グリーンブック【Blu-ray】 [ ヴィゴ・モーテンセン ]

価格:4,224円
(2021/8/9 21:04時点)
感想(5件)

よみあきでした。

【プログラミング】JavaScript勉強記 ep5 ~素数を数えろ~

<a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a>勉強記 ep5 ~<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C1%C7%BF%F4">素数</a>を数えろ~

JavaScript勉強記 ep5 ~素数を数えろ~

youtu.be

素数が次々と表示されるというものを作りました。

落ち着けるかもしれません。

快眠の手助けとなるかもです。(多分…。)

 

素数(Prime Number)って?

2,3,5,7,11,13...のように「1と自分自身以外に約数を持たない数」のことをいいます。

しかし、1は例外で素数ではありません。これは、もし1が素数だと素因数分解したときの一意性が保てなくなるからです(…って数学ガールに書いてありました…。)

(例えば、12を素因数分解すると、12=(2^2)*3 ですが、もし1が素数となると、12=(1^2)*(2^2)*3 と表せられたり、12=(1^3)*(2^2)*3 と表せられたり, いろんなパターンが存在してしまうのでアカンというわけです。)

1のことも考えてあげると、素数は「約数の個数が2つのみの数」と言い換えられます。

 

コード

コードは次のようになっています。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>素数を数えて落ち着くんだ</title>
<style>
body {
	background-color: #000;
	padding: 0px;
	margin: 0px;
	position:relative;
	width: 100vw;
	height:100vh;
}
#opening {
	color: #fff;
	font-size: 1em;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
#prime {
	display : block;
	color: #fff;
	text-shadow: 0 0 30px #fff;
	background-color: #000;
	font-size: 1000%;
	opacity:1;
	position: absolute;
	top: 50%;
	left: 50%;
	transform-origin: center;
	transform: translate(-50%, -50%);
}
#button {
	display : none;
	border-radius : 5%;          /* 角丸       */
	font-size : 18pt;        /* 文字サイズ */
	text-align : center;      /* 文字位置   */
	cursor : pointer;     /* カーソル   */
	padding : 15px 35px;   /* 余白       */
	background : #000000;     /* 背景色     */
	color : #ffffff;     /* 文字色     */
	line-height : 1em;         /* 1行の高さ  */
	transition : .3s;         /* なめらか変化 */
	border : 2px solid #000000;    /* 枠の指定 */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
	z-index: 1;
}
</style>
</head>

<body>
<div id="prime"></div>
<div id="opening">素数を数えて落ち着くんだ - プッチ神父</div>
<form>
<input type="button" value="素数を数える" id="button" onclick="myStart()">
</form>
</body>
<script>
//アニメーションのための要素の取得
const prime=document.querySelector("#prime");
const openig=document.querySelector("#opening");
const button=document.querySelector("#button");

//初期値定義
j=2;

//オープニングの動き
function myOpening(){
	//アニメーション
	opening.animate(
	[	{opacity:0},
		{opacity:1},
	 	{opacity:1},
		{opacity:1},
	 	{opacity:0}
	 ],
	{
		duration:3000,
		fill:"forwards",
	}
	);
	//アニメーション後の動き
	setTimeout(function(){
		document.getElementById("button").style.display= "block";
		button.animate(
	[	{opacity:0},
		{opacity:1}
	 ],
	{
		duration:3000,
		fill:"forwards",
	}
	);	
	},3500);
};	

//素数判定の関数
function primeNumberDetection(n) {
 if (n === 2) return true;
 for (let i = 2; i < n; i++) {
   if (n % i === 0) return false;
 }
 return true;
}

//カウントスタート
function myStart(){
	//スタートボタン無効化
	document.getElementById("button").disabled = true;
	
	//スタートボタンのアニメーション
	button.animate(
	[	{opacity:1},
		{opacity:0}
	 ],
	{
		duration:3000,
		fill:"forwards",
	}
	);
	
	//アニメーション後の動き
	setTimeout(mySet, 3500);
}	

//素数の代入
function mySet(){
	while(primeNumberDetection(j)==false){
		j++;
	};
	if(primeNumberDetection(j)==true){
	    document.getElementById("prime").innerHTML=j;
		j++;
	    fade();
	   };
	};

//素数のフェードインフェードアウト	
function fade(){
	//アニメーション
	prime.animate(
	[	{opacity:0,},
		{opacity:1,},
	 	{opacity:1,},
		{opacity:1,},
	 	{opacity:0,}
	 ],
	{
		duration:3000,
		fill:"forwards",
	}
	);
	
	//次の素数代入へ
	setTimeout(mySet, 3500);
	};

//開いたときに動かす
myOpening();
	
</script>
</html>

 

CSS

スタイルを最初のhead内に書いておきます。

position: absolute;
top: 50%;
left: 50%;
transform-origin: center;
transform: translate(-50%, -50%);

それぞれの要素が画面のど真ん中に来るように設定します。

buttonのCSSsubmitボタンをデザインするを用いてコピペしました。

 

HTML

空のprimeというidと「素数を数えて落ち着くんだ - プッチ神父」という名台詞(ジョジョまだ観てないから観たい…)をopeningのidに定めます。

スタートボタンのフォームをクリック時にmyStartが動くように作っておきます。

 

JavaScript

const prime=document.querySelector("#prime");
const openig=document.querySelector("#opening");
const button=document.querySelector("#button");

ここで最初に後々アニメーションをするために、それぞれの要素を取得しておきます。

j=2;

素数が代入される変数をjとして、最初の素数2を初期値としておきます。

 

関数myOpeningについて

ここでオープニングの動きを記述します。

opening.animate(
[ {opacity:0},
{opacity:1},
{opacity:1},
{opacity:1},
{opacity:0}
],
{
duration:3000,
fill:"forwards",
}
);

ここでopenigのテキストのフェードインフェードアウトをアニメーションします。

setTimeout(function(){
document.getElementById("button").style.display= "block" ;
button.animate(
[ {opacity:0},
{opacity:1}
],
{
duration:3000,
fill:"forwards",
}
);
},3500);

ここでアニメーション後の動きをsetTimeout関数を使って決めています。

document.getElementById("button").style.display= "block";

ここでスタートボタンを有効にします。

 

関数primeNumberDetection(n)について

ここで素数の判定を行います。

ある数nを判定しようとしたら、forループで2からn-1までの数で割っていって、割り切れるものがなければ、nは素数となるという仕組みです。

素数だとtrueを返して、素数でないとfalseを返します。

 

関数myStartについて

スタートボタンを押した後の動きを記述します。

document.getElementById("button").disabled = true;

ここでスタートボタンのクリックが無効化されます。

button.animate(
[ {opacity:1},
{opacity:0}
],
{
duration:3000,
fill:"forwards",
}
);

ここでスタートボタンがフェードアウトのアニメーションを記述しています。

setTimeout(mySet, 3500);

最後にアニメーションが終わった後の動きを記述します。

 

関数mySetについて

ここでは変数jに素数を代入する動きを記述してあります。jを2から増やしていって素数だったらinnerHTML関数でprimeを書き換え、次にfadeを動かします。

 

関数fadeについて

ほぼmyOpeningと同じことが書かれています。アニメーションが終わったときに、mySetを動かして、次の素数を表示するようにしています。

 

最後にページを開いたときにmyOpeningが実行されるように、

myOpening();

と記述しておきます。

 

やってみて

  • CSSJavaScriptの連携を実際に動かして確かめることができた。アニメーションなどjQuery勉強してもうちょい簡単に書いて実装できるようにしたい。
  • CSSの配置方法がわかるようになってきた。中央配置とかアンカーポイントがどことかでごっちゃになりそうだが、うまいことtransformのtranslateで対応できた。
  • 素数判定のアルゴリズムがわかった。大学2年の時のテストで急に素数判定のプログラム書けっていうのが出題されて、当時解けなかったが、いまならぶっ倒せる。

よみあきでした。

【プログラミング】JavaScript勉強記 ep4 ~シン・バスドラムメトロノーム~

JavaScript勉強記 ep4 ~シン・バスドラムメトロノーム

youtu.be

この前「バスドラムメトロノーム(仮)」を作ってみて、挙動がかなり怪しかったので、いろいろと改良を加え、この度「シン・バスドラムメトローム」(庵野秀明監督風)が完成しました!

しっかり動作します!なんと音も出ます!



コード

コードは次のようになっています。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>バスドラム</title>
</head>

<body>
<script type="text/javascript">
myImage=new Array(
"pedal0.png",
"pedal1.png",
"pedal1.png",
"pedal1.png"
);

var id=0;
var myTemp=0
var myInterval=0;

function mySet(){
	myNowCnt=0;
	myInterval=0;
	myTemp=document.getElementById("myFormTemp").value;
	myInterval=eval(250*(60/Number(myTemp)));
}
	
function mySound(){
	document.getElementById("sound-file").currentTime=0;
	document.getElementById("sound-file").play()
}	
	
function myChange(){
	if(myNowCnt==myImage.length-1){
		myNowCnt=0;
		mySound();
	}else{
		myNowCnt++;
	}
	document.sshow.src=myImage[myNowCnt];
}
	
	
function myStart(){
	clearInterval(id);
	mySet();
	if(myTemp==0 || isNaN(myTemp)){
	document.getElementById( "caution" ).innerHTML="0以外の数字を入力してください";
	}
	else{
		document.getElementById( "caution" ).innerHTML=""
		id=setInterval("myChange()",myInterval);
	}
}
	

</script>
<form name="myForm">
テンポを入力してください BPM=
<input type="text" size="2" id="myFormTemp">
<input type="button" value="OK" onclick="myStart()">
</form>
<div id="caution"></div>
<img src="pedal0.png", width="500", height="500", name="sshow">
<audio id="sound-file" preload="auto">
	<source src="和太鼓でドン.mp3" type="audio/mp3">
</audio>
</body>
</html>

関数mySetについて

(仮)ではmyTempの変数が定義されていなかったので、関数の外でグローバル変数として定義しました。

あと最後のreturn冗長だったので消しました。

myTemp=document.getElementById("myFormTemp").value;

(仮)の感じではうまいことフォームに入力した値を変数に入れることができていなかったため、上のようにgetElementByIdを使った書き方にしました。

関数mySoundについて

この関数はHTMLで読み込んだ音声ファイルを再生するものとなっています。

document.getElementById("sound-file").currentTime=0;

これで音声ファイルの再生位置をmySoundが実行されるたびに、最初の位置に巻き戻せるようになっています。

document.getElementById("sound-file").play();

これで音声ファイルを再生します。

参考:クリックすると音が鳴るボタンの作り方

関数myChangeについて

if文でpedal0の画像(ハンマーがドラムにあたる画像)が表示されるタイミングで、上で定義したmySoundが実行されるようになっています。

関数myStartについて

フォームのOKボタンを押したらいろいろと実行されます。

clearInterval(id);

これでOKボタンを押す前に動いていた場合、タイマーを止めます。

if(myTemp==0 || isNaN(myTemp)){
document.getElementById( "caution" ).innerHTML="0以外の数字を入力してください";
}

これでテンポ入力フォームで0か数字でないものが入力されたとき、「0以外の数字を入力してください」と注意が表示されるようになっています。

else{
document.getElementById( "caution" ).innerHTML=""
id=setInterval("myChange()",myInterval);
}

これで0以外の数字が入力されたときに、前に注意が表示されている場合はそれを消して、入力したテンポに基づいてsetIntervalでmyChangeが実行されます。

やってみて

  • ローカル変数、グローバル変数が原因での不具合結構ありそうだなと思った。
  • タイマーは動かしたら、次動かすときにしっかり前のタイマーを止めなければめちゃくちゃになることが分かった。
  • 音が出せたとき素直にうれしかった。注意の文表示できたのもよかった。

 

まだまだ勉強は続きます…。

 

よみあきでした。

【プログラミング】JavaScript勉強記 ep3 〜ナイツ塙風変換機〜

無題ドキュメント

JavaScript勉強記 ep3 ~ナイツ塙風変換機~

とりあえず、自分でどんどんサンプル見るなりで何かしら作っていくのがいいかなと思ったので、今回は「ナイツ塙風変換機」を作ってみました。

どういうもの?

お笑いコンビのナイツさんの言い間違いのネタで、「クリリン」を「クソソソ」と言うというものがあります。

ここでは文章入力すると「リ」と「ン」を検出して、どちらとも「ソ」に置換して、表示するというもの作ります。

 



コード

次のようなコードになっています。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>

<body>
<script>
function myTrans(){
	myComp="";
    myMsg=document.getElementById("myForm").value;
	for(i=0;i<myMsg.length;i++){
		mySplit=myMsg.substring(i,i+1);
		if((mySplit=="リ" )||(mySplit=="ン" )){
			mySplit="ソ";
		}
		myComp=myComp+mySplit;
		}
	document.getElementById( "trans" ).innerHTML = myComp;
	}
	
</script>
<form name="myForm">
<textarea type="text" cols="100" rows="10" id="myForm"></textarea>
<input type="button" value="変換" onclick="myTrans()">
<div id="trans"></div>
</form>
</body>
</html>

myTransという関数を作って、myCompという空の文字列を作っておきます。

次にmyMsgにフォームに入力した文章が入るようにします。

それをfor文とsubstringメソッドで一文字ずつチェックし、一旦mySplitという変数に入れ、もし「リ」または「ン」だったら、「ソ」に置換して、myCompに入れていきます。

「リ」か「ン」以外だったら、そのままmyCompに入れます。

最終的にmyCompには入力した文章の「リ」と「ン」が「ソ」に置換されたものが入っているので、innerHTMLメソッドで表示するというようになっています。

この一連の関数myTransがボタンフォームの変換ボタンを押すことで実行されます。

 

埋め込んでおきます!遊んでみてください!

 

 

 

使用例

マリリン・マンソン脱退の記事を入力

 

 

 

やってみて

  • フォームに文字列を入力して、その入力したものをJavaScriptの方へ持っていくという手法が学べた。
  • 文字列を一文字ずつ切り出して考えるという手法を学べた。簡単なif文、for文も使ってみることができた。
  • 複数行入力できるフォームの作り方が分かった。


まだまだ勉強は続きます…。


よみあきでした。

【プログラミング】JavaScript勉強記 ep2 〜バスドラムメトロノーム(仮)〜

JavaScript勉強記 ep2 バスドラムメトロノーム(仮)

youtu.be

今回、勉強中であるJavaScriptを使って、何か作ってみよう!ということで、「バスドラムメトロノーム(仮)」となるものを作ってみました!

(仮)というのは試しに作ってみたからという感じです。後でわかりますが、めっちゃ不安定なできとなっております…。(笑)

 

どういうもの?

画像の素材としては、いらすとやさんのドラムペダルのイラスト大太鼓のイラスト姿勢の良い・姿勢の悪い椅子に座る男の子のイラストの3つを組み合わせて、以下の2つの画像を作りました。(Photoshopのパペットワープめっちゃ便利…。)

ペダルを踏んでいる画像とペダルを踏んでいない画像の2つです。

この2つの画像が自分の決めたBPMでパラパラ漫画のように動くというものです。

 



コード

イヌでもわかるJavaScript講座のStep.65 - 定期的に画像を変更する(スライドショー)を参考にさせていただきました。

以下のようなコードになっています。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>バスドラム</title>
</head>

<body>
</body>
<script type="text/javascript">
myImage=new Array(
"pedal0.png",
"pedal1.png",
"pedal1.png",
"pedal1.png"
);
myNowCnt=0;
myInterval=0;

function mySet(){
	var myTemp=eval(document.myForm.myFormTemp.value);
	var myInterval=eval(250*(60/Number("myTemp")));
	return myInterval;
}
	
	
function myChange(){
	if(myNowCnt==myImage.length-1){
		myNowCnt=0;
	}else{
		myNowCnt++;
	}
	document.sshow.src=myImage[myNowCnt];
	
	setTimeout("myChange()","mySet()");
}
	
function myStart(){
	mySet();
	myChange();
}
</script>
<form name="myForm">
テンポを入力してください BPM=
<input type="text" size="2" name="myFormTemp">
<input type="button" value="OK" onclick="myStart()">
</form>
<img src="pedal0.png", width="500" height="500" name="sshow">

</html>

 

 

setTimeout関数(メソッド)を再帰的に呼び出して、一定の周期で画像が切り替わります。

周期はフォームから自分で入力できるようになっています。BPMなので、1分間に何回バスドラムを叩かくか決められます。

テンポを決めて、フォームのOKボタンを押すと、アニメーションが動き始めます。

テンポを決める関数(myTemp)とパラパラ漫画が動かす関数(myChange)がOKボタンを押すと、myTemp→myChangeの順で開始されるという感じです。

 

ただ動画でもわかるように、テンポを決めるフォームに何も打ち込まなくても動いてしまったり、何回も押したら、トリッキーなリズムを刻むようになったり…(苦笑)

もしかするとsetTimeout関数がごっちゃになって、何重にも実行されてしまっているのかもしれないです。

 

まだまだ修行は続きそうです…。

よみあきでした。

【プログラミング】JavaScript勉強記 ep1

 

JavaScript勉強記 ep1

なんでJavaScript

今までAfterEffectsやBlenderなどで動画制作はちょいちょい行ってきましたが、それは作ってしまったら、もうみるだけとなってしまいます。

みる人が自分で動かして遊べるような作品を作りたいな…と思うようになりました。

つまり、昔みなさんが楽しんだであろうFlashのコンテンツのようなおもしろいWebサイトで動くようなものが作りたくなったというわけです。

しかし、Flashはついこの前にサポートを終了してしまいました…。

ここでFlashに代わるものとして、HTML5が登場!(今はHTML Living Standardになったらしい)

このHTML5を操るためにはJavaScriptの知識が必要!となったわけです。

 

 

最初は何から?

HTMLの知識は多少あったので、「とほほのJavaScriptリファレンス」というサイトをザーッと読み進めていって、そもそもjavaScriptって何?どういう記述ができるの?というところから攻めていきました。

「基本編」「基本オブジェクト編」を読み終わったところで、まあそんな感じなんか~とずっと知識のインプットばかりになってしまったので、やっぱり実際書いて動かそう!と思い立ち、次のサイトへ…

 

 

サンプルを動かして学ぶ

勉強するときは教科書を読んだだけでは、問題は解けません。

ということでゴリゴリにサンプルを書いていこう!となりました。

そこで行きついたのが、「JavaScript入門&サンプル集」というサイトです。

JavaScript入門」「サンプル集〔基本編〕」「サンプル集〔インタラクティブ編〕」「HomePageTips」という4つ章があり、とりあえず「JavaScript入門」から進めてみました。

変数や繰り返し処理、条件分岐などの基本的なことから、ウィンドウの制御、フォームの制御などをサンプルを作って徐々に理解していくことができました。そしてサンプル一つ一つの開設がすごく丁寧!

入門を一通り終えたら、次は「サンプル集〔基本編〕」へと移り、おもしろそうなものを数個やってみました。

そして、なかなか魅力的なサンプルがたくさん載っている「サンプル集〔インタラクティブ編〕」へ!

ところがここに入ると急に、レベルが上がったように感じ、何を書いていることやら…

やっぱり僕はまだ基礎力がないな…となったので、もっとサンプルを作ろうと、次のサイトへ…

 

 

サンプルを動かして学ぶ Part2

次に訪れたサイトは「イヌでもわかるJavaScript講座」というものです。

これもドンドンとサンプルを作っていくサイトで、丁寧な解説付きです!そしてStep102まであって、豊富な練習量!

現時点では、このサイトを進めているという感じです。長い道のりになりそうです…

 

 

まとめ

この文ってどういう時に使うんだっけ?どういうパラメーターがあるんだっけ?と思ったときに帰ってきたい辞書的なところ。

JavaScript入門」の説明めっちゃ丁寧。

もうちょっとわかるようになったら帰ってきたい。「サンプル集〔インタラクティブ編〕」は魅力的なサンプル多し!

サンプル数めっちゃ多い!手を動かしながらの勉強にもってこいの場所。

 

 

まだまだ勉強は続きます。

よみあきでした。