「プログラミングって何からやればいい?」←WEBエンジニアが回答

「プログラミング初心者は何からやればいい?」←現役エンジニアが回答

プログラミング初心者

プログラミングを勉強するにしても何から手を付ければいいか分からない、どの言語から独学すればいいかも不明、更に言うと分からない事が分からない。未経験からエンジニアを目指すこんな自分に誰かアドバイスをください…

「何をすればいいか分からない」、「分からない事が分からない」、「ただ、やる気があるのは信じてほしい」

そんなあなたに向けて書きました、プログラミングの第一歩をお手伝いします。

本記事では、「プログラミングは何から手をつければいいの?」という知識ゼロの初心者にありがちな悩みに対して回答する形で解説しています。

「何を作るとか明確な目標はないけれど、とりあえずプログラミングに触れてみたい」、こんな方は是非参考にしてみてください。

「作る事が大事、それは分かってる、その先を教えてよ」

この記事を書いている私は現役のWEBエンジニアです、私も過去に同じように悩んでいた時期がありました、「過去の自分にアドバイスするなら」と読者の方に目線を合わせつつ書いてみました。

それでは見ていきましょう。

「プログラミングって何から始めればいい?」

「プログラミングって何から始めればいい?」

プログラミングを学ぶと言ってもやり方は様々です、これは良い意味として考えられますが、初心者の方にとってはあまり良い方向には働きません。

たくさんあるがゆえに何を選択すればいいのか分からなくなってしまうんですよね、やるからには失敗したくない、時間を無駄にしたくありません、その気持ちよく分かります。

そこで私からの提案です。

とりあえず作る・動かす・考える

悩んだらまず何か作ってみましょう、実際に作って動かして試行錯誤してみることをオススメします。

これは私の経験に基づく事実です。

またその話か、それ聞き飽きたよ、、、

確かによく聞きます、しかしこれは事実なので受け止めてください。

でもご安心ください、「まず何か作れ!!」なんて一言だけで終わりにはしません、冒頭で私は言いました「過去の自分にアドバイスするなら」、これだけじゃ過去の自分すら動かす事は不可能です。

これについてはもう一歩踏み込んで深堀りする必要があります、次を見てみましょう。

参考書に載っているものを作らない【ポイント】

まず何か作れと言われるとほとんどの人が下記のパターンを辿ります。

「作る事が大事 → 何を作ればいいか分からない → 参考書を買う → コピペしつつ作ってみる」

これを無駄とは言いません、得られるものは確かにありますが効率が悪い。

私なら「目的のあるものを作れ」と言います、誰かが使う事を想定した上で作るとスキルとして身に付きやすいからです、独学より実務と言われるのはまさにそういうこと。

つまりどういうものを作れば、、、?

WEB寄りのプログラミングを勉強するなら、自分のブログやプロフィールサイトを作るのもあり、この場合「誰かに見てもらうこと」が目的になります。

母に向けて家計簿支援ツールなんかもアリ、競馬好きの友達に向けて馬券予想アプリなんかも面白い、恋愛の悩み事が多い女友達に向けて占いアプリなどなど、考えればたくさんあると思います。

javascript・PHPのススメ【まずはこれから作る】

javascript・PHPのススメ【まずはこれから作る】

初心者がプログラミングで何かを作る上で気を付けたいポイント。

  • 学びやすい言語である【挫折しにくい言語】
  • 他言語を学ぶ時に活きる言語
  • 目的のあるものを作ること

途中で挫折ってのは回避したいので学びやすい言語を選びましょう、iOSアプリ開発のドン[Swift]、身に付ければ一生食べていける[C#]、やって損なしの言語ですが挫折すること間違いなしなので回避。

なので今回は、上記の言語を理解する上でも役立つ言語[javascript]を使って何か作りたいと思います。

javascriptを使ってみよう

javascriptを使えばプログラミングの基礎を簡単に学べます、他言語はその後に学べばOKです、ちなみに私は「javascript → PHP → C# → その他もろもろ」ってな感じでスキルアップしています。

ステップ1:見積りフォームの作成

見積もりフォームを作ってみましょう。まず、要件の前にまず誰に向けて作るのか想像してみます。

自社製品の営業マンが利用します、クライアントに見積りを出す際、電卓を使っては計算し、オプションを外した時の金額、オプションを付けた時の金額をその都度計算しています。
 
営業マンはふと思いました、パソコンのBTOサイトのような「クリックや選択だけで見積もりを出せる自社向けのWEBアプリがあれば、電卓を使わずに済む、計算間違いもなくなる」

この営業マンに見積もりフォームを作ってあげましょう、パソコンのBTOサイトを参考に必要な機能を考えてみます。

  • オプション項目の設置
  • 合計金額の表示
  • 選択済みオプションの表示
  • 確認ボタンの設置
  • リセットボタンの設置

それぞれ解説します。

・オプション項目の設置
択一のオプション(ラジオボタン)、複数選択できるオプション(チェックボックス)、個数選択できるオプション(セレクトボックス)、それぞれ一つ以上設置します。当たり前ですが各オプションには値段を設定する必要があります。
・合計金額の表示
選択されているオプションに応じて合計金額を表示させます、オプションを変更するたびにリアルタイムで可変させてください。合計金額は【税抜き・消費税分・総合計】の3つを表示させてください。
・選択オプションの表示
選択しているオプションのみテキストで表示させます、今現在選択しているオプションの一覧を表示させるということです、参考サイトにある「カスタマイズ内容」がそれにあたります(※選択しているオプション全て表示させてください)
・確認ボタンの設置
営業向けなので最後に印刷させたりExcel(CSV)出力させたいところですが、少しややこしい部分ではあるので、確認ボタンを押すとダイアログで「総合計」が表示させるだけでOKです。
・リセットボタンの設置
オプションを初期状態に戻す機能が必要です、やり直すたび画面をリロードさせるのは使い手に優しくありません、なので「ボタンを押すとオプションが初期状態に戻る」こんなボタンを用意してください。

おまけ:レイアウト

レイアウトは参考サイトに似せればOKです、念のため私からざっくり挙げておきます。

  • 画面全体は1カラム
  • 画面下にフッターを固定させる(ここに「選択オプションの表示」「合計金額3つの表示」、「ボタン2つの設置」)
  • 選択されているオプション項目は色を変える(参考サイトでは黄色になってます)
  • 総合計の数字だけ赤色
  • ボタンの色は任せます!!

イマイチイメージがつかない、、、

そんな事もあろうかと、サンプル的なものを作ってみました、GIFでご参考ください。

見積りフォームのサンプル

ポイント(上記参考)

  • 個数選択できるオプションは初期値が1個と0個を用意(上記のオプション5の部分)、1個以上で選択状態とする、左下のオプション一覧には「〇〇 × 数」で表示させる
  • 複数選択できるオプションは、1か所だけ初期値を2番目に設定する(上記のオプション6の部分)
  • リセットボタンを押すと選択状態を全て解除するのではなく、初期値に戻すようにする。

ステップ2:jQueryで作り直す

ステップ1で作成したもの(処理)を[jQuery]を使って作りなおしてください。可能であればステップ1を飛ばしてステップ2から入ってもOKです。

jQueryってなんぞやって方はjavascriptが難しい人はjQueryから入るべき【勉強方法公開】を参考にしてください。

ステップ3:PHPで作り直す

ステップ1で作成したものをPHPを使って作りなおしてください。

PHP?何それ美味しいの?

自分には無理だーーー!って方はやらなくてOKです、ただここを突破できるとプログラミングの幅は大きく広がります、可能であれば挑戦してください。

PHPで実装するにあたって変更点があります。

  • オプション一覧&合計金額のリアルタイム表示は不要
  • リセットボタン不要
  • 確認ボタンを押すと確認画面に遷移する
  • 確認画面でオプション一覧と合計金額3つを表示させる
・PHPで実装する上でアドバイス
まずXAMPP(MAMP)を使ってローカル環境を作る(PHPを使える環境にする)、見積もりフォームと確認画面フォーム計2つのPHPファイルが必要。

頭を働かせれば必ず出来ますし、ググれば全て載っています、これを機会にググる力も付けましょう。

終わりに:ステップ3まで出来たなら

終わりに:ステップ3まで出来たなら

ステップ3もクリアしたぜ!って方、おめでとうございます。既にプログラミングの基礎は身に付いています。これをスクールで学ぼうとすると8万~は取られます、なんかお得な気分になりませんか?笑

他言語を学ぶ際に「この書き方似ている気がする」って感覚が今のあなたにはあるはずです、今なら上位の言語でも学びやすいかと思います、やりたいプログラミング言語があるなら取り組んでみましょう。

「javascript,PHPって楽しい!!、他になんかないの!?」って方はECサイトを作ってみましょう、カート機能やユーザー登録・ログイン機能などセッションやデータベース周りも学ぶ事ができます。

詳細については別記事で解説します。

今回は以上になります。

他の人が読んでいる記事

コメント (0)

コメントする人

セキュリティのためreCAPTCHAを利用しています。
Googleのプライバシーポリシー利用規約が適用されます。
うぇぶとまと|Webエンジニア
うぇぶとまと|Webエンジニア

飲食→派遣→IT系ベンチャーに転職。
本業をベーシックインカムとし、やりたい事に挑戦するWebエンジニア。