【現役エンジニアが考える】Webプログラミングの練習問題【初級者向けの課題集】

PROGRAM

プログラミングで眠くなる場合の対処法を知りたい方に。

この記事を読まれている方は、

  • Webプログラミング課題を解きたい
  • Webプログラミングの学習の筋道を立てたい
  • Webプログラミングのスキルアップを図りたい

おそらくこのように考えている方が多いと思います。

この記事を書いている私は、
プログラミング未経験から転職を果たした現役のWeb系エンジニアです。
エンジニア歴は3年ですが、本業とは別にフリーランスの副業で月10万円ほど、多いときで20万円ほどの収入があります。

この記事では、現役のエンジニアが、Webプログラミングの練習問題を考えてみましたので、初級者向けの課題としてお使い頂ければと思います。

なお、この練習問題は、学習者に自発的に動いてもらうために、解答を公開していません。
これらの問題が全て解ける(筋道が見える)ようでしたら、中級者であると思っていただいて良いと思います。

環境に関する問題

環境に関する問題

問1. Webの仕組み

私たちは普段、ブラウザ(Google ChromeやSafari、Internet Explorer等)を通して様々なWebページを見ていますが、どういった仕組みでこれらを見ることができているか、まとめてみて下さい。キーワード:Webサーバー、リクエスト、レスポンス

問2. Webページの種類

なぜHTMLだけでなくPHPも使われるのか、動的ページと静的ページの違いに着目し、まとめてみて下さい。
キーワード:動的ページ、静的ページ

問3. Webサーバーの仕組み

実際にWebサーバーを立てるためには、何が必要か、自身でWebサーバーを立てることをイメージしながらまとめてみて下さい。
キーワード:Webサーバーアプリケーション、Webサーバーソフト

問4. Webサーバーの構築

実際に自身のWindows環境をWebサーバー(PHP有り、64ビット)にしてみて下さい。
キーワード:XAMPP

画面設計と実装に関する問題

画面設計と実装に関する問題

問1. Webページの作成

構築したWebサーバーにHTMLファイルを置き、実際にWebページを作ってみて下さい。まだPHPを使用する必要はありません。
*エンコードにUTF-8が推奨される理由を理解してください。

問2. PCサイトの作成

サイトレイアウト
上の画像のようなページをHTMLとCSSを使って作ってみましょう。

問3. レスポンシブデザイン

作成したPCサイトを活かして、PCとスマホの場合でデザインが変わるよう、画面サイズごとにスタイルを切り替えてみましょう。

問4. フロントエンドの実務

グーグルやFacebookなど、有名なサイトを真似たものを作ってみましょう。

PHP(基礎)の問題

PHP(基礎)の問題

問1. 文字列を出力する

PHPを使って、「Hello World」と出力してみましょう。

問2. 変数の取り扱い

文字列”Hello”と文字列”World”を連結して、変数$HelloWorldに格納し、それを出力する

問3. 分岐処理

変数 $age を定義し、$age が20以上であれば文字列”成人”を、$age が20未満であれば文字列”未成年”を画面に出力するプログラムを作成して下さい。$age を定義する際は、数値19を格納して下さい。

問4. 配列と繰返処理

以下のデータを持つ配列を定義して下さい。配列名は$ShainListとして下さい。また、定義した$ShainListの中に入っている値(名前)全てを画面に出力するプログラムも作成して下さい。各値(名前)は「,(カンマ)」で区切るものとし、正しい出力結果は「佐藤,田中,小林」とします。

佐藤 田中 小林

問5. 連想配列

以下のデータを持つ連想配列を定義して下さい。連想配列名は $ShainInfo として下さい。また、定義した$ShainInfoのShainNoの値を取り出し、画面に出力して下さい。正しい出力結果は「佐藤」とします。

ShainNo ShainName BushoName
101 佐藤 経理部

問6. 多次元連想配列

多次元連想配列(配列と連想配列の組み合わせ)を使って、以下のデータを持つ配列を定義して下さい。配列名は$ShainDataとして下さい。また、定義した$ShainDataを使って、データをテーブルに表して下さい。正しい出力結果はちょうど以下の表と同じです。

ShainNo ShainName BushoName
101 佐藤 経理部
102 田中 総務部
103 小林 開発部

PHP(応用)の問題

PHP(応用)の問題

問1. データの受け渡し

ブラウザからWebサーバーへのリクエスト時に、パラメータをサーバー側に渡すにはどうしたら良いか調べ、まとめて下さい。
キーワード:フォームデータの送信

問2. データの送信

送信フォーム
パラメータをサーバー側に送信するため、HTMLで上の画像のような送信フォームを作成して下さい。
・各入力要素のname属性:ユーザー名⇒username、パスワード⇒password
・ファイルの拡張子はphp
・フォームデータの送信先は作成したページと同じURL
・フォームのmethod属性はPOST

問3. データの受け取り

送信されるフォームデータをPHPプログラム側で受け取り、ユーザー名の値が “admin”、パスワードが”1234”の場合に、”ログイン成功”という文字列を画面に出力するプログラムを作成して下さい。

問4. セッション

セッションを利用してログイン成功の場合、$_SESSION[‘username’]に格納して下さい。また、$_SESSION[‘username’]に値が入っている場合は、フォームデータを表示せず、代わりに”ログイン中”という文字列を画面に出力して下さい。

問5. 例外処理

エラー発生時に備え、phpプログラム全体をtry~catch文で囲い、エラーが発生した場合はエラーメッセージを画面に出力するようにして下さい。

データベースの問題

データベースの問題

問1. データベースの役割

データベースとは何か、調べて下さい。(キーワード:RDBMS)

問2. MySQLにログイン

コマンドプロンプトでmysql.exeのパスを通し、コマンド上でMySQLにログインして下さい。

問3. データベースの作成と削除

MySQLを使って、”music”という名前のデータベースを作って下さい。作成できましたら、”music”データベースを削除し、” entertainment”データベースを作って下さい。

問4. テーブルの作成と削除

作成した”entertainment”データベースを使用して、”singers”という名前のテーブルを作って下さい。項目は下記のとおりです。作成できましたら、一度”singers”テーブルを削除し、” musicians”テーブルを作って下さい。項目は同じです。

項目名 データ型 主キー
id 数値型 YES
name 文字列型(128文字) NO
age 数値型 NO

問5. レコードの追加

作成した”musicians”テーブルに対し、以下のレコードを入れて下さい。

id name age
1001 Robby Williams 45
2001 Bob Dylan 78
3001 Justin Timberlake 38

問6. レコードの取得

“musicians”テーブルのレコードを全て表示して下さい。表示できましたら、ageが40以上のレコードのみを表示して下さい。

問7. レコードの更新

idが1001のレコードのnameカラムの値を”Robbie Williams”に変更して下さい。ただし、削除⇒追加の方法では行わないで下さい。

問8. レコードの削除

idが2001のレコードを削除して下さい。

PHP(データベース連携)の問題

PHP(データベース連携)の問題

問1. レコードの取得と表示

PHPでMySQLのデータベース”entertainment”に接続して、”musicians”テーブルのデータを全レコード取得し、画面上にテーブルデータとして表示して下さい。正しい出力結果は以下の表になります。

ID 名前 年齢
1001 Robbie Williams 45
2001 Bob Dylan 78
3001 Justin Timberlake 38

※問1が完了したら、一度バックアップを取ること。

問2. レコードの追加プログラム

問1で作成したものに、ID・名前・年齢の入力欄のあるフォームをHTMLで追加し、送信ボタンを押したら、サーバー側は入力した内容で”musicians”テーブルにレコードを追加するプログラムを作成して下さい。画面上のテーブルには最新のデータが表示されるようにして下さい。

問3. レコードの更新プログラム

問1で作成したものに、ID・名前・年齢の入力欄のあるフォームをHTMLで追加し、送信ボタンを押したら、サーバー側は”musicians”テーブルの該当IDのレコードの名前と年齢の値を、入力された値のとおりに更新するプログラムを作成して下さい。画面上のテーブルには最新のデータが表示されるようにして下さい。

問4. レコードの削除プログラム

問1で作成したものに、IDの入力欄のあるフォームをHTMLで追加し、送信ボタンを押したら、サーバー側は”musicians”テーブルの該当IDのレコードを削除するプログラムを作成して下さい。画面上のテーブルには最新のデータが表示されるようにして下さい。

JavaScriptの問題

JavaScriptの問題

問1. DOM操作 – 要素の書き換え

HTMLで<span id=”isScript”>Script無効</span>を配置し、JavaScriptで「無効」を「有効」に変更して下さい。また、HTMLで<input id=”CompanyName” value=”ジャパン”>を配置し、JavaScriptで「ジャパン」を「日本」に変更して下さい。

問2. DOM操作 – 要素の新規追加

JavaScriptで動的にテーブルを作成する方法を調べ、以下の表をJavaScriptのみで作成して下さい。

userId id title body
1 1 Title1 Body1
1 2 Title2 Body2
1 3 Title3 Body3

問3. 非同期通信

サーバーとクライアント(ブラウザ)の間でデータの受け渡しを行う方法の一つとして、フォーム(form)を使う方法を学びましたが、この方法では画面遷移が伴います。画面遷移をせずに非同期で通信する方法を調べて下さい。ただし、jQueryなどのライブラリやフレームワークは使用しないものとします。
キーワード:Ajax, XMLHttpRequest

問4. Ajax – GETメソッド

Ajaxを用いて、以下の条件でデータを取得し、テーブルを作成し表示して下さい。

URL https://jsonplaceholder.typicode.com/posts
METHOD GET
パラメータ userId : 1

問5. Ajax – POSTメソッド

Ajaxを用いて、以下の条件でデータを取得し、テーブルを作成し表示して下さい。

URL https://jsonplaceholder.typicode.com/posts
METHOD POST
パラメータ title: ‘foo’, body: ‘bar’, userId: 1

問6. API

APIとは何か、調べてまとめて下さい。

問7. API入門

PHP側で以下の連想多次元配列をJSONでエンコードし、出力(echo)するAPIを作成して下さい。また、このAPIにAjaxでアクセスし、取得したJSONをデコードして、HTMLのテーブルをJavaScriptで作成し、デコードした内容を表示して下さい。

userId id title body
1 1 投稿テスト1 本文1
1 2 投稿テスト2 本文2
2 1 投稿テスト3 本文3

問8. APIの作成

問7のAjaxでAPIを使用する際に、パラメータのuserIdを設定し、1であればuserIdが1のデータのみを、2であればuserIdが2のデータのみを出力するようにAPIの仕様を変更して下さい。