• プログラミングで遊ぼう~秋の紅葉編~

    プログラミングで遊ぼう~秋の紅葉編~

    こんにちは!GeekGirlLaboスタッフの山下です。

    寒い日が続き、いよいよ本格的な冬になってきましたね!

    あれ、今年の11月って存在していたっけ..?と思う程度には毎日が一瞬で過ぎ去っていっていますが..

    みなさまはいかがお過ごしでしょうか?

    今年の秋は全然秋らしいことをしなかったな~

    紅葉とか、まだ間に合うかなー?などと個人的には思っている次第ですが・・

    というわけで、突然ですが、プログラミングで紅葉を作ってみたいと思います(え?)

    紅葉といえば、「山」ですね。

    というわけで、まず山をつくることにします。phpで。

    for文を使って、こんなふうにします。

    <html>
    	<body>
    	<?php
    		$counter_space = 10;
    		$counter_mountain = 1;
    
    		// 外側のループ
    		for($outside = 1; $outside <= 10; $outside++) {
    
    			// 内側のループ① →これで余白をつくります
    			for($inside1 = 1; $inside1 <= $counter_space; $inside1++) {
    				echo " ";
    			}
    
    			// 内側のループ② →これで三角形をつくります
    			for($inside2 = 1; $inside2 <= $counter_mountain; $inside2++) {
    				echo "■";
    			}
    
    			$counter_space--;
    			$counter_mountain += 2;
    			echo "<br>";
    		}
    	?>
    	</body>
    </html>
    

    表示させると、こんなふうになります↓

    やったー!山ができたー!

    さて、これだけですと、ただの山なので、色をつけてあげることにします。

    先ほどのコードの、10行目あたりに以下を追加します。

    グラデーションっぽくしたいので、2列ごとに色が変わるようにします。

    			/* 色を設定 */
    			if ($outside <= 2) {
    				echo "<span style='color:#007655'>";	// 深緑
    			} else if ($outside <= 4) {
    				echo "<span style='color:#9fbb00'>";	// 強い黄緑色
    			} else if ($outside <= 6) {
    				echo "<span style='color:#f6e920'>";	// イチョウの色
    			} else if ($outside <= 8) {
    				echo "<span style='color:#eb6101'>";	// くすんだ赤色
    			} else {
    				echo "<span style='color:#cc2f3a'>";	// もみじいろ
    			}
    

    こんなかんじですね。

    そして、22行目あたりに、spanタグの閉じタグを入れてあげます。

    echo "</span>";
    

    コード全体では、以下のようになります。

    <html>
    	<body>
    	<?php
    		$counter_space = 10;
    		$counter_mountain = 1;
    
    		// 外側のループ
    		for($outside = 1; $outside <= 10; $outside++) {
    
    			/* 色を設定 */
    			if ($outside <= 2) {
    				echo "<span style='color:#007655'>";	// 深緑
    			} else if ($outside <= 4) {
    				echo "<span style='color:#9fbb00'>";	// 強い黄緑色
    			} else if ($outside <= 6) {
    				echo "<span style='color:#f6e920'>";	// イチョウの色
    			} else if ($outside <= 8) {
    				echo "<span style='color:#eb6101'>";	// くすんだ赤色
    			} else {
    				echo "<span style='color:#cc2f3a'>";	// もみじいろ
    			}
    
    			// 内側のループ① →これで余白をつくります
    			for($inside1 = 1; $inside1 <= $counter_space; $inside1++) {
    				echo " ";
    			}
    
    			// 内側のループ② →これで三角形をつくります
    			for($inside2 = 1; $inside2 <= $counter_mountain; $inside2++) {
    				echo "■";
    			}
    
    			$counter_space--;
    			$counter_mountain += 2;
    			echo "<br>";
    			echo "</span>";
    		}
    	?>
    	</body>
    </html>
    

    さて、表示させてみましょう。

    このようになります↓

    できたー!紅葉の山だー!

    (よかった..思ったより紅葉っぽい!)

    というわけで、何が言いたいかというと、このような具合でプログラミングで遊んでみるのも楽しいですよね!ということです。

    プログラミングを始めたけれど文法書をはじめから読んでいると眠くなってしまう・・とか、

    プログラミングの学習をしていて行き詰まりを感じる方は、

    こんなふうに、遊びながら基礎学習をしてみるのも良いのではないかなと思います。

    ここではphpを使ってしまいましたが、他の言語や、他の書き方で試してみるのもよいかもしれませんね。

    ぜひお試しください!

    The following two tabs change content below.
    山下 芽実

    山下 芽実

    2児の母。GeekGirlLaboのエンジニアコースで学習後、下の子が幼稚園に入園したタイミングで、2018年4月~在宅ワークをしています。いくつかの開発案件を経て、現在はGeekGirlLaboのJavascriptコースでチューターを担当させていただいたり、教材改善の業務を担当したりしています。好きなことはインターネット・プログラミング・音楽・読書・妄想・人の思考の流れをいろいろ想像すること。
Comments are closed.