どうもこたにんです。
わたしは高専出身なのです、熊本電波高専というところ。
そこの情報工学科で5年間ひたすらに自由に過ごしたのですが。
最近、自宅のPCのデータを整理していたら、高専当時の課題のデータが沢山出てきて。
ブログネタとして使えそうなのがちまちま出てきました。
その中でも今回は、高専1年生のときのコーディング演習課題を掘り出しました。
そのソースコードを、14年経った今、レビュワーとして確認させていただきましょう。
15歳のこたにんよ、今からわたしはあなたのコードをレビューします。
課題の内容
さすがにそこまでは覚えていない。
けど成果物から察するに「HTMLのお勉強として自己紹介ページを作りましょう」な感じ。
HTMLファイルを作ってみましょう、たぶんそんな感じ。
ディレクトリ構成
こうなってた。
bad.bmp good.bmp
happy.bmp jigazou.bmp omikuji.html
omikuji2.html prof.html top.html aicon217.gif crystal1.gif kabe1.gif
syuppatu.gif
なるほど。
言いたいことはたくさんあるが、今回はソースコードを見たいのでスルーする。
要は、HTMLファイルが4つあるらしい。
ということで、HTMLひとつずつにフォーカスしてコードレビューを実施しましょう。
top.html
はい、ソースコードどん！
<html>
<head>
<title>小谷のページ</title>
</head><font face=HGS創英角ﾎﾟｯﾌﾟ体>
<body>
<body background=kabe1.gif bgcolor=#88ccff text=darkslateblue>
<center>
<h1>小谷のページ</h1>
<br>
<br>ここは小谷の基礎情報のテストページです。
<br><br>
<marquee width=500 direction=right scrollamount=3 onmouseover=this.stop() onmouseout=this.start()>
<img src=aicon217.gif>
</marquee>
<br><br>今ならもれなくおみくじが引ける!!
<br><a href=omikuji.html>おみくじへGO♪</a>
<br>
<br>自己紹介もやってます。
<br><a href=prof.html>プロフィールへGO♪</a>
<hr>
<address>xxxxx@hogehoge.ac.jp</address>
</body>
</html>
やばいめちゃくちゃ香ばしいｗｗｗ
すごく昔のホームページって感じがすごい、HTML4時代なのでなんでもアリ感が。
- CSSを使いましょう（フォントとかセンタリングとかBGとか）
- 閉じタグ不要なものでも閉じスラッシュ入れましょう
- marqueeタグで画像を動かしてオンマウスで止まる遊びはやめましょう
パッと見でね、気になるね。
香ばしい、マーキーとか懐かしすぎてもう。
創英角ポップ体好きだったんだよなあ、懐かしい。
ちなみに画面はこんな感じでした、このカタツムリがオンマウスで止まるｗｗ
ほんで音符がやかましい♪
prof.html
自己紹介のページがあるみたいです。
<html>
<head>
<title>プロフィール</title>
</head>
<font face=HGS創英角ﾎﾟｯﾌﾟ体>
<body background=kabe1.gif bgcolor=#88ccff text=darkslateblue><center>
<h1>プロフィール</h1>
<img src=jigazou.bmp>
<Table Border>
<Tr><Td>名前</Td><Td>小谷</Td></Tr>
<Tr><Td>生年月日</Td><Td>1989/12/20</Td></Tr>
<Tr><Td>身長・体重</Td><Td>165cm・55㎏</Td></Tr>
<Tr><Td>血液型</Td><Td>典型的なB型</Td></Tr>
<Tr><Td>性格</Td><Td>ポジティブシンキング</Td></Tr>
<Tr><Td>趣味</Td><Td>CD収集・歌う・ライミング</Td></Tr>
<Tr><Td>特技</Td><Td>韻踏み・衝動買い</Td></Tr>
<Tr><Td>CD所持枚数</Td><Td>135枚</Td></Tr>
</Table>
<hr>
<a href=top.html>TOP</a>
</body>
</html>
ひゃあこれまた、香ばしみの高い感じ。
自己紹介をしていますね、15歳のわたし、今よりまだ身長低いね当たり前か。
違うわ、コードレビュー。
テーブルタグの練習、素敵だと思います。
大文字はじまりになっているのはおそらく、ネットから拾ったんだと思います。
画面はこう、なんだこの自画像は。。。
omikuji.html
どうやらおみくじが引けるJSを書いたのでしょうか。
<html>
<head>
<title>おみくじ</title>
<SCRIPT language="JavaScript">
<!--
// おみくじを引いてみる locationで指定されたページへ行く
function omikuji(){
alert("もう後には引けません。");
location = "omikuji2.html";
}
// 引くのにためらいを感じる おまけです(^_^)
function tamerai(){
alert("いや②、さっさと引けよ、おみくじ。");
}
//-->
</SCRIPT>
</head><font face=HGS創英角ﾎﾟｯﾌﾟ体>
<body><body background=kabe1.gif bgcolor=#88ccff text=darkslateblue>
<center>
<h1>Javaでおみくじ</h1><br>
<br>
<br>おみくじを引いてみると、私が描いた絵が表示されます。
<br>HAPPY・GOOD・BADの3種類があります。
<br>BADを引いても気分を損ねないで下さいね。
<form>
<INPUT TYPE="button" value="おみくじを引いてみる" onClick="omikuji()"><br><br>
<INPUT TYPE="button" value="引くのにためらいを感じる" onClick="tamerai()">
</form>
<hr><a href=top.html>HOMEへ戻る</a>
</center>
</body>
</html>
ひゃあすごい、言葉選びが若い、恥ずかしくないのか、あんた。
いやー、鳥肌立つね、うーん若い！香ばしい！！レビューする！！
- JavaScriptとJavaは別物ですのでタイトルを修正しましょう
- inputタグでボタンを作るのはシンプルでよいです
- 画面遷移はできればlocation.href属性へ指定しましょう
今回は特段画面は出しません、いよいよ次がおみくじ結果ページだ。
どういうロジックでおみくじしてるんだろう、わくわく。
omikuji2.html
さて、きっとランダムでおみくじしてくれるページ。
ページのコンテンツはシンプルなので、JS部分だけ抜粋します。
<SCRIPT language="JavaScript">
<!--
today = new Date();
rnd = today.getTime();
rnd = Math.abs((17*rnd - 1)%1024);
rnd = (rnd/1024)*100;
if(rnd >= 81) tag = "<img src='happy.bmp'><br><br>結果はHAPPYでした!!!<br><br>健康運･･･みるみるうちに筋肉痛が治る!!<br>金銭運･･･紙コップを3個拾う。<br>恋愛運･･･とにかく人が寄ってくる。<br><br>ラッキーアイテム･･･サランラップ"
else if(rnd >= 41) tag = "<img src='good.bmp'><br><br>結果はGOODでした!!<br><br>健康運･･･多少の腹痛には耐えられる。<br>金銭運･･･野口英世がいつの間にか夏目漱石に!!<br>恋愛運･･･犬とかになつかれる。<br><br>ラッキーアイテム･･･昭和の名曲"
else if(rnd >= 1) tag = "<img src='bad.bmp'><br><br>結果はBADでした!<br><br>健康運･･･知らない間にひざにアザが出来てる。<br>金銭運･･･ついつい友達にリプトンをおごっちゃう。<br>恋愛運･･･女友達が絵文字を使わなくなった。<br><br>ラッキーアイテム･･･玉ねぎ"
document.write(tag);
//-->
</SCRIPT>
ひゃあ、これは、どういうロジックだ！！
自作だ、乱数自作してる！！
Math.random()使えばいいのに、Math.abs()使って自作してる！！
面白い。
しかも、HTMLタグを文字列で作ってdocument.write！なんたる！レビューする！
- 変数定義は明確にしましょう
- 乱数生成にはMath.random()というのもありますので参考にしましょう
- else節を使わずにif文3つ並べると視認性があがります、ガード節でググってみましょう
いや、面白いわ15歳。
授業で乱数など習っていない中で自作しているところがエンジニアの卵って感じ。
ちなみに、ランダムで表示される画像はこいつらでした。
ペイントで書いたんだろうけど、なんだこの前衛的なアートは。
もはや逆に可愛いよ、「あいこだよ。」ってなんだよ、右下のやつ誰だよ。
総評
おそらく静的なHTMLページの課題に対して、オリジナリティを盛り込んでいたのは良き。
ただ、個性が強すぎて、コンテンツとしては暴走しかけている気がするぞ。
学校の課題に対してここまでパワーを使って表現するのは、さすがといった感じ。
コードとしてはまだまだ勉強しなければいけない部分が多いかと思います。
知ってる知識だけで解決せず、調べる力を身につけて、新たな手法を見つけましょう。
以上です。
あーはずかしかった、14年で成長したなあ。
