プログラミングをやってみたいが何をすればいいか分からない

Last Updated: 2020/02/27
Written by: minagawah
いったいどこから手をつけたらいいのかさえ分からない、、、そんな人たちのためにチュートリアルを用意してみました。
なぜプログラミング言語として JS を選んだかは 「3-1. JSで旅に出る!」を読んでみて下さい。
 

「論理的な思考」よりも大切な「何か」

Logics v.s. Educated Guess
近は初心者でもプログラムを学ぶのが楽になりました。アプリをダウンロードすれば、次々と表示される問題に答えることその場でプログラムが実行されます。ボタンをポチポチやっていれば一通りのことは学べます。
でもこれは開発者たちが日常的にやっていることからは "ほど遠い" ものです。
プログラミングというものが脚光を浴びるとき、特に 論理的な思考の育成 という部分が注目されます。けれど20年以上プログラムを書いてきた私がそこから得たのは それとは全く異なる 「何か」 でした。
プログラミングを教えるときに私はよく 「環境設定が8割だ」 と伝えています。どういうことかといえば、プログラムを書くよりも それを開始するまでの設定作業のほうに時間がかかるということです。これには "心の準備" ということも含まれます。
えばあとで 「ファイルを utf8 形式で保存して下さい」 という指示が出ます。パソコン操作に慣れていなければここで躓くはずです。そして躓いたら、もう先に進むのがイヤになるはずです。
でもそこで諦めないで欲しいのです。
どんな開発者でも新しい技術を導入するとき、その技術を事前に熟知している人なんていません。開発者たちは上司の悪口を言いながらインターネットであれこれ調べ、あるいはフォーラムで先達の人たちに聞きつつ、不安を抱きながら、手探りで進めます。その作業が8割なのです。
経験を積んできた開発者は、だいたいの勘所が分かります。むしろそれが学びの一部だと知っています。だから脱落せずに作業を続けられます。それでも心が折れます。ましてや初心者であれば、たった一つの障害でも絶望以外にないと感じるはずです。
だからプログラミングを学ぶとき、何度も挫折しそうになるのは誰もがみんな同じであることを覚えておいて下さい。
しろ、そのような試行錯誤を通して "論理的な思考" とは別の "何か" が培われるのです。
先に結論を言えば、それは 「察する力」 とでも呼べるような能力です。これはプログラミングを外から傍観するだけで得られるものではなく、その泥沼で格闘することで獲得されるものです。
このチュートリアルではそれを "体験" できるようにしてみました。日常ではこれまで気づくことのなかった脳みその使い方を自分で体感し、これまでとは違ったふうに世界が見えるようになれば幸いです。
プログラミングの現場で "察する力" が必要となることは 「5-2. "察する" という技術」 に詳しく書いていますので、よかったら読んでみて下さい。

必要なもの

1. HTMLで世界を創造する
1-1. HTMLを書こう
1-2. とにかく読んでみる
1-3. いったい何が起きているのか
1-4. ブラウザの仕組み
2. CSSで見ためをデザインする
2-1. CSS を書こう
2-2. CSS クラスを探しにいく旅
2-3. CSS でカラフルな人生
2-4. CSS を外部ファイルにする
3. JS魔法修行: (1) 旅のはじまり
3-1. JSで旅に出る!
3-2. JS を書こう (alert 編)
3-2. JS を書こう (console.log 編)
3-4. 見ための恐怖に打ち克つ
3-5. JS を書こう (navigator.onLine 編)
4. JS魔法修行: (2) ゲーム開発の基本
4-1. 自由に関数を作ってみる
4-2. ボタンでプログラム実行
4-3. イベントループ、それと let と const
5. JS魔法修行: (3) "察する" という技術
5-1. モンスターを動かす
5-2. "察する" という技術
5-3. モンスター: 解説編
6. JS魔法修行: (4) データ操作を学ぶ
6-1. 七つの「型」のこと
6-2. JSの魔法修行
7. JS魔法修行: (5) 空間を "隔離" する魔法
7-1. 他人に迷惑を掛けない
7-2. 隔離された空間をつくる
8. JS魔法修行: (6) "材料" を寄せ集めて作る
8-1. 材料: 論理式
8-2. 材料: 複数行コメントと JSDoc
8-3. 材料: 初期値
8-4. 材料: destructure
8-5. 材料: reduce
8-6. 材料: イベント・リスナー
8-7. 材料: requestAnimationFrame
8-8. 材料: Error
8-9. 材料: モジュール