こんにちは。Web系エンジニアのカズです。
私のブログで、これまで掲載してきたjavascript/jQuery練習問題を一覧にしてまとめました。
基礎編から実践編まで練習問題を用意しています。
本記事で伝えたいこと
javascript/jQuery練習問題について
本ブログ全体のコンセプトとして、未経験から稼げるエンジニアになるために必要だと思う情報を発信しています。
現場レベルで最低限、通用するエンジニアになるには「ロジックを考える」ということがプログラミング学習において重要だと思います。
基礎編でプログラムの書き方を学んだあと、実践編で「ロジックを考える」を意識しながらプログラミングしてみてください。
独学が難しい場合
本気でプログラミング技術を習得するのは、独学では難しい場合があります。
現場レベルで通用するエンジニアを目指していて、プログラミングスクールを検討している方はRUNTEQがオススメです。
javascript学習の準備
javascript学習をしたことがない、学習の始め方が分からないという方に向けて情報発信した記事です。
基礎編（javascriptのみ）
変数（初級編）
変数を定義してみよう！
変数（const,letの使いわけ）
変数の使い方を練習しよう。constやletを使い分けよう！
出力系
値を画面に表示しよう！
条件分岐（if）
if文を使用しよう。比較演算子を活用しよう！
条件分岐（switch）
switch文を使用しよう。比較演算子を活用しよう！
繰り返し処理
for文を使用しよう。繰り返し処理で処理を効率化しよう！
配列（入門編）
配列を上手く活用しよう！配列操作のメソッドを使えるように練習しよう！
連想配列
連想配列を上手く活用しよう！基礎的な内容から応用まで出題。
使用例についても掲載あり！
dom操作
要素の取得をしよう！
関数
機能ごとに関数を作成しよう！関数の使い方をマスターしよう。
イベント処理
クリックした時、フォーカスが外れた時などのイベント処理の実装をします。
変換処理
文字列型と数値型の変換ができるようになろう！
ある文字列を別の文字列に変換してみよう！
URL操作
URLの取得、パラメータの取得などの実装練習をしましょう。
おすすめな本はこちら！
定番のボードゲームのリバーシ(オセロゲーム)を作りながら、実践的に学習ができます。
応用編
基礎編より、少しだけレベルを上げた問題を考えてみました。
for文とif文の組み合わせ
for文とif文を組み合わせて何か実装をしてみましょう。
for文と配列の組み合わせ
for文と配列を組み合わせて何か実装をしてみましょう。
チェックボックスに関連しそうなjavascript問題
チェックボックスの実装のときに扱えた方が良さそうなjavascript問題を考えました。
動的にCSSを変更する
javascriptから動的にCSSを変更する練習問題です。
ajax通信でAPIを取得して表示する（javascript編）
ユーザーが入力した郵便番号から、住所を取得して表示します。
ajax通信でAPIを取得して表示する（jQuery編）
ユーザーが入力した郵便番号から、住所を取得して表示します。
本で学習したい方に、おすすめ！
定番のボードゲームのリバーシ(オセロゲーム)を作りながら、実践的に学習ができます。
実践編(javascript or jQuery)
基礎編では、既に用意されているメソッドや公式にソースコードを当てはめるだけで良いような内容でした。
実践編は「何かを作成する」ということをテーマにしていきます。
その中で自分なりに「ロジックを考える」という力をつけられるのが理想です。
あくまでjavascriptの練習なので、見た目のCSSはそこまで頑張らないで最低限にしましょう。
難易度の低い問題から順に列挙します。
サイコロの目を表示しよう!
1から6の数字をランダムに表示します。
色占いを作ろう！
今日のラッキーカラーをランダムで表示する機能を作成します。
簡易版○○危機一髪的な機能を作ろう！
いくつかボタンがあり、どれか1つ「はずれ」ボタンを設定します。
はずれを押したらゲーム終了の機能を作成します。
おみくじを作成しよう（簡易版）
占い結果(例:大吉)、恋愛、旅行、仕事の占いがランダムで表示される機能を作成します。
今日の星座占いを作ろう！
今日の星座の運勢の順位をランダムに表示する機能を作成します。
トランプの神経衰弱を作ろう！
簡易版ですが、トランプの神経衰弱を作成します。
1から8の数字の中で数字が一致するかどうかを判定します。
稼げるエンジニアになるためのロードマップ
本ブログでは「稼げるエンジニア」になるために必要だと思う情報を発信させて頂いています。
稼げるエンジニアになるための道筋がわからないという方は、本ブログの下記の記事を参考にしてください。
未経験から「稼げるWeb系エンジニア」になるためのロードマップの記事
コメント