学習内容をまとめたポートフォリオ

はじめに

自己紹介

はじめまして、こんにちは。現在プログラミングの職業訓練を受けながらITエンジニアを目指して転職活動をしているひびきと言います。よろしくお願いします！
今回転職活動にあたってポートフォリオの必要性に気付いたものの急遽短時間で作り上げることとなったため、今までの訓練で書いたコードをまとめる形で書いていきたいと思います。

本ページの構成について

添付リンクのGitHub上に全てのコードは上げてありますがそれだけでは動きがわかりませんので、GIF画像をはさみ説明をしつつ紹介していきたいと思います。
私のGitHubのリンク

私が受けている職業訓練では言語、教科書ごとに

• 教科書を講師の先生が読み上げる
• 教科書に掲載されたコードを書く、動かす
• 教科書を読み終わったら自由に作品を制作する

という過程を繰り返しました。
習った言語と訓練で使わせていただいた教科書を習った順番通り以下に列挙します。

1. HTML/CSS
   「スラスラわかるHTML&CSSのきほん」第3版
   著者：狩野祐東　発行：SBクリエイティブ株式会社
2. JavaScript
   「スラスラわかるJavaScript」新版
   著者：桜庭洋之、望月幸太郎　発行：株式会社　翔泳社
3. PHP
   「よくわかるPHPの教科書」PHP7対応版
   著者：たにぐち　まこと　発行：株式会社　マイナビ出版
4. Python
   「スッキリわかるPython入門」第2版
   著者：国本大悟、須藤秋良　発行：株式会社　インプレス
   「シゴトがはかどるPython自動処理の教科書」
   著者：クジラ飛行机　発行：株式会社　マイナビ出版
5. SQL
   「スッキリわかるSQL入門」第4版　ドリル256問付き！
   著者：中山清喬、飯田理恵子　発行：株式会社インプレス
6. Java
   「スッキリわかるJava入門」第4版
   著者：中山清喬、国本大悟　発行：株式会社インプレス
   「スッキリわかるサーブレット＆JSP入門」第4版
   著者：国本大悟　発行：株式会社インプレス

実際に書いたコード、作ったサイト、Webアプリ

それではここから各教科書、単元で作ったサイト、Webアプリや自由制作の時間に自分で作った成果物を、教科書、単元ごとに紹介していきます。上の言語名をクリックすると該当の章へ飛べます。

1. HTML/CSS

教科書通り作ったページ

授業で使った参考書「スラスラわかるJavaScript」新版では架空のカフェのホームページを作成しました。

ホーム、お知らせ、店舗情報の三つのページ内リンクがあるトップページ

トップメニューから飛べるアクセス、メニュー、お問い合わせの3つのページ

お問い合わせページでは実際に問い合わせ内容を入力してその内容が確認できるページもあります

自由制作で作ったページ

HTML/CSSの自由制作課題はHTMLファイルCSSファイル最低一個ずつで自分の好きなものを紹介するページを三日で作るというものでした。
私は自分の趣味であるギターの愛用機材を紹介するページを作りました。

一応レスポンシブ対応するようにスマホ等では二列表示になるようにしました。

2. JavaScript

授業で習ったこと

JavaScriptの授業では何かページを作ることを目指すわけではなくひたすらに基本構文を勉強しました。その中で訓練校の先生が問題を出してくれたりしたのでそれを解いたものを上げておきます。

ボタンをクッリクすると押した回数がカウントされるコード

buttun.html

<button type="button">ボタン</button>
<div>0</div>

となっているHTMLに対して

count.js

function countup () {
            count++;
            document.querySelector('div').textContent = count;
        }

        let count = 0;
        document.querySelector('button').addEventListener('click',countup);

countup関数を定義してクッリクイベントの度にdiv要素が書き換えられるようにしました。

カーソルが乗っている場所で表示画像が変化する

image.html

<img src="item1.jpg" alt="" class="main">
<!-- id= -->
<hr>
<img src="item1.jpg" alt="コーヒー" class="image">
<img src="item4.jpg" alt="ドーナッツ" class="image">
<img src="item5.jpg" alt="タルト" class="image">

このHTMLに対して次のようにjsを書くことで

hover.js

const images = document.querySelectorAll('.image');
const main = document.querySelector('.main');
        
for (let image of images) {
    image.addEventListener('mouseover',(event)=>{
        main.src = event.currentTarget.src;
    });
}

images属性のついた下の3つの画像にマウスポインターが乗る度にメイン属性のついた上の画像のsrc属性の中身が書き換わって、上のメイン画像が変わる仕組みになっています。

なべあつコード

筆者が小学生の頃の懐かしのギャグ。3の倍数と3のつく数字のときだけ赤になるコードです。

CSSにredクラスを赤色にすると指定しておいて

red.css

 .red{
            color: red;
        }

nabeatsu.js

 for (let i = 1; i <= 100; i++) {
        const char = `${i}`;
        if(i % 3 ==0) {
            document.write(`<p class=red>${i}</p>`);
        } else if (i <=39 && i>=30) {
            document.write(`<p class=red>${i}</p>`);
        } else if (char=='13'||char=='23'||char=='43'||char=='53'||char=='63'||char=='73'||char=='83'||char=='93') {
            document.write(`<p class=red>${i}</p>`);
        } else {
            document.write(`<p>${i}</p>`);
        }
    }

我ながらかなり無理やりなコードです。3の倍数はいいとして十の位が3の時、一の位が3の時の条件指定がスマートじゃないですね。(Math.floor(i/10)==3)や(i%10==3)とすれば綺麗にまとまります。

九九表

プログラミング初学者に出される定番の問題ですね。九九表をfor文を使って効率的に表示する問題です。

kuku.js

 for (let i = 1; i < 10; i++) {
    document.write(`<tr>`);
    for (let j = 1; j < 10; j++) {
        document.write(`<td>${i * j}</td>`)
    }
    document.write(`</tr>`);
}

この問題は職業訓練のクラスの中で出題されて一番早く回答できたので自信につながりました。

自由制作で作ったページ

JavaScriptの単元の自由制作課題では、HTML/CSSの自由制作で作ったサイトにjsで動きをつけることが課題となりました。授業では基本構文を中心に習ったのに制作ではライブラリを導入してのページ制作ということで内容ががらりと変わり困惑しました。AIを使いつつ体裁の崩れないライブラリを探してなんとか要件をクリアしました。ここまで単元が進んだところで、自分が得意なのは見た目、デザインを整えることではなく、知識を組み合わせて問題を解決するコードを考えることだと気づきました。

ページ構成等は特に変更せず、アイテムがスライドするようにjsを導入しました。

画像をクリックするとアイテムごとにそれぞれ違った説明が出ます。

トップ画面以外にもアイテムのジャンルごとに3ページ設けました。

3. PHP

PHPの単元ではjs同様に基本構文を学んだあとSQLを簡単に学び、データベースを使ったWebページの制作方法を勉強しました。

授業で習ったこと

phpの単元もjs同様に基本構文を学びながらたまに先生の問題を解くことがあったのでそれを掲載しておきます。

じゃんけん

自分が選んだ手とランダムに選ばれるコンピューターの手でじゃんけんをするページです。フォーム部分のHTMLが以下のようになっており

jankenForm.html

<form action="janken.php" method="post">
    <input type="radio" name="mine" value="0">ぐー<br>
    <input type="radio" name="mine" value="1">ちょき<br>
    <input type="radio" name="mine" value="2">ぱー<br>
    <input type="submit" value="送信する">
</form>

自分が選んだ手を数字で取得し、phpファイルのほうで変数mineに格納しています。

janken.php

あなた：<?php 
$janken = ['ぐー','ちょき','ぱー'];
$mine = htmlspecialchars($_POST['mine'],ENT_QUOTES);
print($janken[$mine]); ?>
<br>
コンピューター：<?php $num = rand(0,2);
print($janken[$num]);
?><br>
<?php
$result = [
    '00'=>'あいこ',
    '01'=>'あなたの勝ち',
    '02'=>'あなたの負け',
    '10'=>'あなたの負け',
    '11'=>'あいこ',
    '12'=>'あなたの勝ち',
    '20'=>'あなたの勝ち',
    '21'=>'あなたの負け',
    '22'=>'あいこ'
];
//連想配列は後でprintを使う場合、右側(値)を表示する文言に
print($result[$mine.$num]); ?>です。

<?php
if ($mine == $num) {
    print('あいこです');
} else if (($mine==0&&$num==1)||($mine==1&&$num==2)||($mine==2&&$num==20)) {
    print('あなたの勝ち');
} else {
    print('あなたの負け');
}
?>です。
<br>
<a href="index.html">再戦</a>
<hr>

じゃんけんの手を配列jankenに定義し、コンピューターの手を決めるための0～2のランダムな数をnumに格納する。配列jankenの添え字としてmineとnumを使うことでそれぞれの手を表示する。連想配列resultにじゃんけんの手と勝敗を全て列挙し、連想配列resultの添え字にmineとnumを結合した文字列を使うことで、じゃんけんの結果を表示する。if文を使ったやり方もついでに書きました。

簡易掲示板

thread.html

<form action="work1.php" method="get">
    <label for="coment">一言どうぞ：</label>
    <input type="text" name="coment" id="coment" size="35" maxlength="255" value="" />
    <input type="submit" value="送信" />
</form>

フォームで文章を受け取りphpファイルに送ります。postを習う前だったのでgetで文字を受け付けてしまっています。投稿内容がURLに載ってしまっていますね。

work1.php

$doc = file_get_contents('./new.txt');
$coment = htmlspecialchars($_GET['coment'],ENT_QUOTES);
$doc = $coment.'<br>'.date('G時 i分 s秒').'<hr>'.$doc;
file_put_contents('./new.txt',$doc);
readfile('./new.txt');

データベースを使わずにテキストファイルの先頭に書き込まれた内容を挿入していって、そのテキストファイルを読み込むことで掲示板を表示しています。

自由制作で作ったWebアプリ

PHPの自由制作課題はXのようなSNSページを作ることでした。教科書「よくわかるPHPの教科書」PHP7対応版の最終章に掲載されたSNSを作る参考コードをもとに一から自分たちのページを作りました。PHPの単元からは自由制作をチームで行いました。自分の所属したチームは癖が強く、だいぶ色の濃いページが出来上がりました。

つぶやきを区別するにはユーザーの区別が必要となるのでログイン、会員登録をする機能がまずあります。ここが最初からいきなり難関でした。教科書通りにコードを書き上げても画面一杯にエラーコードが表示されて一向にうまくいきませんでした。このログインページの以下のような部分があるのですが

login.php

<input type="text" name="email" size="35" maxlength="255" value="<?= htmlspecialchars($_POST['email'] ?? '', ENT_QUOTES) ?>">
<?php if ($error['login'] === 'blank'): ?>
    <p class="error">※ メールアドレスとパスワードを入力してください</p>
<?php elseif ($error['login'] === 'failed'): ?>
    <p class="error">※ ログインに失敗しました。正しくご記入ください</p>
<?php endif; ?>

教科書通りにコードを丸写しすると

$error['login'] === 'blank'

の部分で、連想配列である変数errorには一切の要素がないため、キー'login'が存在しないとしてエラーが出てしまっていたのです。そこで

$error = ['login' => ''];

と必ず変数errorの評価の前で初期化するようにしていくと徐々にエラーを消していくことができました。
エラー文とにらめっこして手作業でエラーを消すことができてコードの理解がさらに深まったような体験でした。

会員登録、ログインをするとタイムラインが表示されます。私たちのチームのSNSは「ぞす系」と呼ばれるとある事業者を元ネタとする体育会系のノリとそれと正反対に位置するような「ちいかわ」を組み合わせたサイトを作り上げました。当時はこうやって公開することなど何も考えていなかったので完全に著作権的にアウトなものが出来上がってしまいました。残念ですがちいかわが映った部分は塗りつぶします。

トップページの一左上にチームメイトそれぞれが作った機能が並んでいます。この中で自分が作ったのがbotアカウント機能です。botの項目をクリックすると100個の投稿リストからランダムに一つを投稿します。jsで10秒に一度ページがリロードされるようにしてあるので、botページから離れるまで10秒ごとにbotの投稿が行われます。

4. Python

Pythonの単元は教科書が二冊あり、最初の教科書で基本構文を、二冊目でExcel等の具体的なソフトの効率化等を学びました。

number.py

import random as rnd #インポート
print('数当てゲームを始めます。３桁の数を当ててください！')
answer = list()#答え格納用空のリスト
for i in range(3):#当たりをランダムで取得
    answer.append(rnd.randint(0,9))
#print(answer)#確認用

game_counter = 0#何回目の繰り返しか数えます。

while True:#無限ループ
    game_counter+=1#繰り返し回数加算
    print(f'-+-+-{game_counter}回目の予想-+-+-')
    prediction = list()#入力受付用リスト
    hit=0#当たりの数
    ball=0#あるけどはずれのやつ
    for i in range(3):#３回入力受付しながら判定
        prediction.append(int(input(f'{i+1}桁目の予想を入力')))
        if answer[i] == prediction[i]:#あったらhit加算
            hit+=1
        else:#なかったら他にないか探す
            for j in range(3):#他の場所にあったらball加算
                if answer[j]==prediction[i]:
                    ball+=1

    print(f'Hit:{hit} Ball{ball}')#結果表示
    if hit==3:#正解なら
        print('正解です！')
        break
    else:#不正解なら
        continue_game = int(input('続けますか？1:続ける2:終了 >> '))
        if continue_game == 2:#終了処理
            print(f'正解は:{answer}')
            break

基本構文の方で学んだ成果としてこのコードを挙げます。これはターミナル上で3桁の数あてゲームをするプログラムです。ランダムに生成した３桁の数字に対して桁と数字が一致するとHit、桁は外れているが数字が一致するとBallとして入力した数値の評価をしてくれます。それをもとに予想を繰り返してランダム生成された数値を当てるゲームです。

後半の教科書でExcelをPythonで自動化したコードとして和暦西暦対応表を挙げます。

wareki.py

import openpyxl as xl

wareki_table = [
    {"name":"弘化","start":1845,"end":1848},
    {"name":"嘉永","start":1848,"end":1855},
    {"name":"安政","start":1855,"end":1860},
    {"name":"万延","start":1860,"end":1861},
    {"name":"文久","start":1861,"end":1864},
    {"name":"元治","start":1864,"end":1865},
    {"name":"慶応","start":1865,"end":1868},
    {"name":"明治","start":1868,"end":1912},
    {"name":"大正","start":1912,"end":1926},
    {"name":"昭和","start":1926,"end":1989},
    {"name":"平成","start":1989,"end":2019},
    {"name":"令和","start":2019,"end":9999}
]

def seireki_wareki(year):
    for w in wareki_table:
        if w["start"] <= year < w["end"]:
            y = str(year - w["start"] + 1) + "年"
            if y == "1年":y = "元年"
            return w["name"] + y
    return "不明"

book = xl.Workbook()
sheet = book.active

sheet["a1"] = "西暦"
sheet["b1"] = "和暦"

start_y = 1845
for i in range(200):
    sei = start_y + i
    wa = seireki_wareki(sei)
    sheet.cell(row=(2+i),column=1,value=str(sei)+"年")
    sheet.cell(row=(2+i),column=2,value=wa)
    print(sei,"=",wa)

book.save("wareki.xlsx")

和暦の開始年と終了年をwareki_tableに入力していけば西暦との対応表をExcelで出力してくれるというものです。

5. SQL

SQLの単元ではPHPの単元で軽く学んだ時より更に深くSQLを勉強しました。WHERE句のAND,ORによる複数条件、LIKEによる文字列比較、INやBETWEENによる絞り込み、式や関数を用いるSQL文、副問い合わせ、JOINによるテーブルの結合等、PHPの単元よりかなり複雑なSQL文が書けるようになりました。

教科書の練習問題でかなり難しく感じたものをここでは挙げておきます。

牛の情報を管理している上のような個体識別テーブルに対して次の二つの検索結果を返すようなSQL文を書く問題でした

cow.sql

-- 1
INSERT INTO '頭数集計' 
SELECT '飼育県',COUNT(*) AS '頭数'
  FROM '個体識別'
 GROUP BY '飼育県'
-- 2
SELECT '個体識別番号',
       CASE '品種コード' WHEN '01' THEN '乳用種' 
                        WHEN '02' THEN '肉用種'
                        WHEN '03' THEN '交雑種' END AS '品種',
       '出生日','母牛番号'
  FROM '個体識別'
 WHERE '母牛番号' IN (SELECT '個体識別番号' FROM '個体識別' WHERE '品種コード' = '01') 

特に二つ目の母牛の情報のある個体について母牛の品種に応じて4つのカラムから情報を引っ張ってくるコードが長く難しかったです。これを書き上げて一発でエラーなくクエリ実行できたことは自信になりました。

6. Java

Javaの単元も教科書が二冊あり、最初の教科書で基本構文とオブジェクト指向を、二冊目でサーブレットとJSPを使ったWebアプリ開発について学びました。

授業で習ったこと

Javaの基本構文を学ぶ中でも訓練校の先生が出してくれた問題を解く機会が度々ありました。

building.java

public class building {
	public static void main(String[] args) {
		System.out.print("1階ごとの部屋数＞");
		int room = new java.util.Scanner(System.in).nextInt();
		System.out.print("階数＞");
		int floor = new java.util.Scanner(System.in).nextInt();
		System.out.print("窓を開ける階＞");
		int open = new java.util.Scanner(System.in).nextInt();
		for (int i = 0; i < floor; i++) {
			for (int j = 1; j <= room; j++) {
				if (open == (floor - i)) {
					System.out.print("□");
				}else {
					System.out.print("■");
				}
			}
			System.out.println("");
		}
	}
}

コンソール上で■と□を組み合わせてビルのような見た目を作ります。一つの階の窓の数、階数、窓を開ける階を指定するとその見た目のビルができるようにしました。

次も先生が出してくれた問題の解答です。

squer.java

public class squer {
	public static void main(String[] args) {
		// TODO 自動生成されたメソッド・スタブ
		System.out.print("4～9の数字を入力してください＞");
		int num = new java.util.Scanner(System.in).nextInt();
	
		while (!((num > 3) && (num < 10))) {
			System.out.println("4～9て言っとるやろ。もう一回入力せい＞");
			num = new java.util.Scanner(System.in).nextInt();
		}
		
		for (int i = 1; i <= num; i++) {
			for (int j = 1; j <= num; j++) {
				if ((i == 1) || (i == num)) {
					System.out.print(num);
				} else if ((j == 1) || (j == num)) {
					System.out.print(num);
				} else {
					System.out.print("♡");
				}
			}
			System.out.println();
		}
	}
}

入力した数字で四角を作り一辺あたりの文字数も入力された値と同じにするというプログラムです。問題自体は四角の中は空欄にするものでしたが悪ノリでハートで埋めておきました。我ながらキモイですね。

次は一冊目の教科書でオブジェクト指向をゲームを作るというテーマで学んだ際のコードです。このコードは実行用のメインメソッドです。コード上に出てくるHiro等のインスタンスを定義する各クラスも継承などを学びながら書きました。

rpg.java

public class Main {
	public static void s(Object o) {
		ch06.Sleep.showDisplay(o);
	}
	public static void main(String[] args) {
		Hero h = new Hero("まさひこ");
		Wizard wz = new Wizard("あさみ");
		Slime slime = new Slime();
		Goblin goblin = new Goblin();
		Weapon w = new Weapon("剣");
		DeathBat db = new DeathBat();
		h.attack(slime);
		slime.run();
		h.getWeapon(w);
		h.attack(goblin);
		slime.run();
		h.attack(slime);
		goblin.run();
		wz.fireball(db);
		db.run();
	}
}

後半の教科書ではサーブレットとJSPについて学びdokoTsubuという簡単な掲示板サイトのようなものを作りました。ファイル数が多いのでGitHubの該当部分のリンクを置いておきます。
dokoTsubuのコード

自由制作で作成中のWebアプリ

半年の職業訓練も10月頭からのチーム制作１か月を最後に終わります。最後の制作は商品数200点以上ののECサイトを作るというものです。私たちのチームはGU様を参考に衣料品を扱うECサイトを作っています。画像や商品名は全てGU様のものを使わせていただいています。現在進行形で制作中のサイトの中で私は商品表示部分を作っています。キーワード検索やカテゴリ検索ができるようにしました。
チーム制作作品のコード


当初、商品の情報は手書きでデータベースに入れるつもりでしたが絶対に何か効率的なやり方があるはずだと思い、Excelに入力したものをcsvファイルにしてデータベースにインポートするやり方を見つけて実行しました。

最後に

急遽書き上げた初めてのポートフォリオでお見苦しいところも多かったと思いますが最後まで読んでくださりありがとうございます。最初や途中にも書きましたがGitHubの方に授業や制作で書いたコードを全て挙げてありますので是非見ていただけると嬉しいです。