エンジニアへの第一歩|未経験から触れるプログラムの動き|Respoint Okinawa

ようこそ
Demoページへ!

SCROLL

エンジニアの世界をちょっとのぞける体験スペースです!

本ホームページは代表・浦1人で作りました。
全てのコードを自ら書き、WordPressなどの簡易化ツールは一切使用していません。

私は以前、約半年だけWeb開発を手伝った経験がありますが、自分一人で作ったホームページを世に公開したのは今回が初めてです。

エンジニアを育成する会社の代表になるにあたり、仲間の成長を支える立場として、「自分の手で成果物を完成させる」挑戦を選びました。

だからこそ伝えたいんです。
「未経験でも、半年やればここまでできる!」

私たちの入社カリキュラムも、同じく半年。
やりきれば、あなたも自分の手で動くシステムを作れるようになります!

ここでは HTML・CSS・JavaScript・データベースといった、Webシステムの基本をちょこっと体験できます。
クリックや入力だけで、「動いた!」という感覚を味わえるはず。

その小さな体験が、エンジニアの世界へ踏み出す一歩になるかもしれません。 🚀✨

ページができる!HTMLの世界

HTMLとは簡単にいうと「骨組み」です。

実は、あなたが今まで見てきた入力欄やボタン、リンクなども全部HTMLが作っています。

ここで紹介しているサンプルは、実際にクリックして操作できます。

<p>
段落(paragraph)

これは段落の見本です。

<input>
入力欄

<select>
セレクト

<input type="radio">
ラジオボタン

職種

<input type="checkbox">
チェックボックス

<button>
ボタン

他にも多くの種類があり、HTMLは< >で囲んだ“タグ”を使って、ページのパーツを生み出す仕組みです。

ここで紹介している7つのパーツが、どんなコードでできているのかを見てみましょう!
タグの形と見た目の関係を知るのが、HTMLを理解する第一歩です。

タグ例

色や形が変わる!CSSの世界

CSSは簡単にいうと、「デザイン」です。

HTMLで作ったパーツの文字色やサイズ、背景色などを変化させます。

デフォルト(基準)

この見た目を基準に、各プロパティだけを極端に変えます。

color(文字色)

color: #111827;

font-size(文字サイズ)

font-size: 24px;

font-weight(文字の太さ)

font-weight: 900;

background-color(背景色)

background-color: #111827;

width(横幅)

width: 100%;(横幅いっぱい)

height(高さ)

height: 56px;

padding(内側の余白)

padding: 18px 32px;

CSSで変更できる見た目も多くの種類があり、数値や文字で細かく設定できます。

自分で数値を入れて、ボタンの見た目を変えてみよう

px
px
px
px
プレビュー
適用中のスタイル

動き出す!JavaScriptの世界

JavaScriptは簡単に言うと、「動き」です。

ここまでにいくつもの送信ボタンが出てきましたが、押してみましたか?
何も起きませんでしたよね。

それではまた送信ボタンを準備していますが、これまでとは違います。

送信ボタンを押してみよう

アラートが表示されます。

HTMLとCSSだけでは、送信ボタンは「ただそこにあるだけ」でした。
でもJavaScriptを使えば、押したときに反応する“動き”をつけることができます。

このように、JavaScriptはユーザーの操作に合わせてページを動かす仕組みです。

クリックしたら色が変わる、文字が出る、画面が切り替わる――
そんな“使えるWebページ”を作るために欠かせない存在なんです。

身近な JavaScript を体験してみよう

計算:Tシャツ1枚 2,980円

合計:300

個数を入力すると自動で合計を計算します。

チェック:カタカナで入力してね

例:カタカナ・スペース・「ー」などはOK、漢字やひらがなはNG

カウント:いいね

ボタンを押すたびに数字が増えます。

一致:パスワード確認

同じなら「一致」、違うと「不一致」と表示します。

入力フォーム、ボタン、チェック機能、そして動きのある画面。
当たり前に思っていたことも、実はJavaScriptの力でした!

情報が残る!データベースの世界

データベースとは簡単に言うと、「記録」です。

SNSでは文字や写真を投稿すると、他者もあなたの投稿を見ることができますよね?
それを可能にしているのは、「入力された情報を覚えている存在」があるからです。

そこで今回、本のタイトルと値段を登録する簡易システムを用意しました。
※個人情報などは入力しないでください。

本を登録してみよう

成功すると1度リロードが起きます。
ここに保存された本の一覧 2件
タイトル
価格
SH面接
2025円
テスト
1000円

投稿した本の情報はデータベースに保存され、リロードしても残ります。
日付が変わると自動で消去されます。

あなたが登録した本のタイトルと値段が表示されているのを確認できたでしょうか?
これはデータベースに情報が記録され、それを画面に呼び出しているからです。

ただし、データベース自体には「表示する機能」はありません。
「登録されている本の一覧を出して」と命令している存在が別にいます。

それがサーバーです。
そのサーバーを動かすために広く使われている言語のひとつがJavaです。

このように、データベースとサーバーが協力してはじめて、情報が画面に表示されます。

この仕組みはWebページだけでなく、スマホアプリや業務システムなど、あらゆるサービスの裏側で活躍しています。

今日の体験を、明日の一歩に

このDemoページでは、Webシステムの基本を少しだけ体験していただきました。

普段当たり前に使っているログイン画面や予約サイトも、こうした仕組みが支えています。
そして、この仕組みは学べば誰でも身につけられるものなのです。

私たちは、未経験からでも半年で“自分の手で動くシステムを作れる”ようになるカリキュラムを用意しています。
あなたもここから、一緒に新しいキャリアを築いてみませんか?

エントリーする