Javascriptを使ってアプリを作成しました

Uncategorized

つくったもの

JavaScriptを使って、クイズアプリのようななにかを作りました。

なにか との遭遇

ストップウォッチだったり、スライダーだったり、ドラッグアンドドロップだったり、思いついたものを実装した魑魅魍りょ・・多様性に富んだアプリになっています。
何か作りたいと思いつきで始めたので、一から何を作るか考えるところからスタートしました。

そこから土日の丸々二日かけ今の形になりました。

ブラッシュアップの余地は大いにありますが、とりあえず完成できて感慨深いです。

作成手順

作成の手順としては以下の通りでした。

  1. JavaScriptのコードレシピ集をざっと一通り見る。
  2. 作りたいものを考える、思いつかなければ①に戻るか、サイトでサンプルを探してみる。
  3. 作りたいものが決まったら、実現するためのコードをネット検索し、そのコードをコピペする。
  4. 自分好みにコードを編集しつつ、プログラムを理解していく。あとはトライアンドエラーの繰り返し。

つくる上で注意したこと気付いたことなど

今までにHTML,CSS,JavaScriptの本はそれぞれすでに二、三冊さらにJQueryの本は一冊読んでいたので、コードを読んでわからないことがあっても調べたらなんとなく理解することはできましたが、自分で作ろうとすると何を書けばよいのかわからず、ほぼコピペで対応しました。

大枠をコピペした後、自分好みにマイナーチェンジしていったのですが、エラーの連続で一時間くらい手が止まることはざらにありました。

勉強がてらなるべくエラーを見つけるようにしていましたが、時間をかけすぎると完成が遠のきそうなので、割り切ってコード自体を変更することもありました。エラーの原因はいずれ解明したいと思います。

レイアウトはほとんど気にしていません。こちらも手を付け始めると多くの選択肢が出てきて迷いそうだったので、見たいものが見れる状態になることを一番に考えました(一部は隠れてしまっているので、甘口判定です)。

作れば作るほど重くなる処理。今後の課題になりそうです。効率的なコードだったり関数の理解が必要になりそうなので、多くの実践と勉強が必要な気がしています。

入れ子のifやfunctionでどこのコードを書いているか迷子になりました。コードを書いていけばいくほど何を書いているのかわからなくなったので、今後は書き始めから正しくインデントを使用するように意識したいと思います。

コメントアウトの正しい使いどころも今後学んでいきたいです。ある程度自分のコードの書き方を知ってから学んでいきたいと思います。

つくってみた感想

今回の経験を通じて、自分の考えを形にする難しさだったり、それを乗り越えて形にした時のうれしさを実感しました。
それとなにより日々コードを書かれている方への尊敬と憧れの気持ちが強くなりました。

自分もこれからいろいろなものを作って、成長していきたいです。

ここから先はこのページで使ったJavaScriptのコード

続きを読む

なにかとの遭遇

window.onload = function() {
canvas = document.getElementById(“fukidashi”);
ctx = canvas.getContext(“2d”);
image = new Image();
image.src = “https://itikusei.com/wp-content/uploads/2020/12/-e1606805722873.png”
image.onload = function(){
//画像を枠線に収めるため、キャンパスのサイズは画像サイズの一回り大きくとる。
imageWidth = image.width;
imageHeight = image.height;
canvas.width = imageWidth+40;
canvas.height = imageHeight+40;

ctx.beginPath();
ctx.moveTo(0,20);
ctx.lineTo(20,0);
ctx.lineTo(40,20);
ctx.lineTo(imageWidth+40,20);
ctx.lineTo(imageWidth+40, imageHeight+40);
ctx.lineTo(0, imageHeight+40);
ctx.closePath();
ctx.strokeStyle = ‘green’;
ctx.stroke();
}
}

//なにかとの遭遇のマウスオーバー時の処理
function showup(){
var sx = 0;
var sy = 0;
var sw = 0;
var sh = 0;
var dw = 0;
var dh = 0;

//画像を左から右に徐々に表示する関数。setIntervalで画像が表示される幅を徐々に増やす。
var byouga = function (imageHeight, imageWidth){
sh = imageHeight;
dh = imageHeight;
sw += 5;
dw += 5;
var dx = 30;
var dy = 30;
ctx.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);
//表示した幅が画像の幅以上になったら、描画処理を止める
if(dw>=imageHeight){
clearInterval(timerId);
}
}
timerId = setInterval(byouga.bind(imageHeight,imageWidth), 1000/60);
}

「続きを読む」の実装

こちらのサイトからコードを拝借しました
//CSSとの合わせ技です
function showMore(btn) {
var targetId = btn.getAttribute(“href”).slice(1); // 表示対象のid名をhref属性値から得る
document.getElementById(targetId).style.display = “block”; // 表示対象の非表示状態を解除
btn.parentNode.style.display = “none”; // 続きを読むボタンを消す
return false; // リンクとして機能しないようfalseを返す
}

コメント

タイトルとURLをコピーしました