「WEB＝プログラム」と言う思いが業界に入る時にありました。カッコイイと言うところもあり、プログラマーに憧れていなしたが、なかなかエンジニアのポジションに携わる事が出来ず、独学でやるにも上手くでず、挫折回数も数え切れません。
JavaScriptやPHPなど、ちょっとかじった感じで「良く分からん」で終わったり、そこまで打ち込める時間が無かったり。
言い訳はいろいろとありますが、多くのサービスに触れる機会が多く、やっぱりちょっとでも出来ると世界がグッと広がり全然違うなと実感してきたので「何度目の正直」か分かりませんが、ノンプログラマーなりの方法を考えました。
- JavaScriptを挫折した人にも分かる
- JavaScriptをちょっとずつ身に着ける方法
- ノンプログラマーでも分かりやすい方法
JavaScriptをちょっとずつはじめる
JavaScriptを選んだ理由
JavaScriptはフロントエンドのプログラムで比較的初歩なプログラムイメージがあります。DBを使った膨大な処理などJavaScript単体では向いていないのですが、どんなサービスやWEB構築にもほぼ必ず出てくる万能なプログラムです。
最近ではGoogleアカウントを持っている人がほとんどだと思いますので、スプレッドシートで使う「Google Apps Script（GAS）」もJavaScriptの一種ですので、多くの方が使う事ができます。
JavaScriptで出来る事の例
- サイトの上部へ戻るやヘッダーの可変など
- ポップアップ表示
- グラフ表示
- 外部ソースの読み込み
- サイト上の動的表示
- フォームの入力チェック（バリデーション表示）
- 画像のスライド表示
- アニメーション表示
これらはJavaScriptを使わない方法ももちろんありますが、JavaScriptが使えればやれる範囲がグッと広がります。
上記の様に、多く出てくると言う事はどんなプロジェクトにも使える部分があると言う事。また、JavaScriptベースのライブラリやフレームワークの「Vue.js」「Node.js」「AngularJS」「React.js」などもありますので、本格的にやる道もあります。
また、PHPなど他のプログラムの勉強や開発を行う時には、プログラムを動かすサーバーやそのサバーにモジュールをインストールなど事前準備があるので、ノンプログラマーには独学勉強前にハードルがありその事前準備で挫折も…。
その点、JavaScriptは勉強や開発面でも情報が多く、手間も少なく、テキストエディターとブラウザがあれば、実行できる手軽さもあります。
復習＆身に付く早道は誰かに伝える事
今までの挫折経験から、分かりやすくまとめて理解したつもりでも、時間が空いてしまうとすっかり忘れてしまう事が多かったです。有料の方法で勉強しても、終わってから業務で使わないとフワッとした理解で実際には使えるレベルになりません。
一番簡単で身に付く方法は人に伝える事らしいです。人に伝えると言う事は、言葉だったり、説明資料だったり、前準備をするので、その時点で複数＆理解を深めるそうです。
その様な機会が作れれば良いのですが、実際にはあまりありません。同じ習得レベルで同じ悩みと克服を目指していて、且つ建設的な理解と発言が出来てスケジュール的にも合いやすい人が必要になります。また、変に発表に対してネガティブな流れになるとJavaScriptの習得どころでは無くなります。
ですので、機会があればチャレンジでも良いですが「復習＆身に付く早道」としては、ブログを書く事をお薦めします。
内容次第では見てくれる人は必ずいるので、絶対にプラスになります。
過去にPHPの備忘録として書いた記事が分かりやすいとQiitaの方達の目に留まり直リンクを頂く事で、コミュニケーションに繋がった事もありました。
JavaScriptの勉強方法
勉強方法と言えば…、
- Googleでひたすら検索して学ぶ
- プログラミングスクールで学ぶ
- オンラインサイトで学ぶ
などがありますが、時間的制限や独学になるので、（１）と（３）で現在個人的に使い始めている「Google Apps Script（GAS）」を中心として勉強をしていきたいと思います。
Googleで検索すると沢山出てくるので、良さそうなものをピックアップしてみました。
ドットインストール
無料で始められるオンラインプログラミング学習サイト。１コマが短時間で動画もあり進めやすい。慣れたり自分に合った勉強方法と納得すれば、有料版を登録し、さらに多くの内容を学ぶことができます。
個人的には知り合いのノンプログラマーがこれで勉強してプログラマーとして仕事が出来ているので、１番のお薦め。
progate
ドットインストールと同じで、無料から有料までのプランがあるオンラインプログラミング学習サイト。ドットインストールと両方の無料版で勉強して有料版はどちらか１つで良いと思いますが、余裕あれば両方とも有料版を受けてみたい。
udemy
著名な方から無名の方まで、動画を通じて教えてくれます。学習動画を購入して、その動画をステップに合わせて見て習得する流れ。サンプルでいくつか見れるが、購入してから「ちょっと分かりにくいな」と思う時も。ただ、内容とボリュームからは格安なので、自分にあった内容があれば購入しても良いと思います。
番外編）Youtubeで学ぶ
Youtubeでも勉強動画は沢山あります。内容の過不足や教え方、スピードなど自分のペースに合っているチャンネルが見つかれば１つの方法かと思います。Youtubeだけでマスターと言うのもレアケースかと思うので番外編として。
個人的には余計な説明は少なく、スピード感もあって良かったです。
サンプル実行とプログラムの保管
JavaScriptは手軽に試しやすいプログラムですが、プログラムテストと作成したプログラムの保管＆シェアが簡単なサイトを使えば一石二鳥です。
jsfiddle
利用者も多く、Wordpressのブログなど他のサイトへの埋め込みも簡単なメジャーなサイト。当サイトも使ってます。
codepen
jsfiddleと同じくらいメジャーなサイト。出来る事もほぼ同じなので「jsfiddle」と迷ったら好きな方で良いと思います。
playcode
書いたコードがその場でスムーズに実行結果が見れるサイト。htmlやCSSなども一緒に書いて行けるので、他のユーザーと共有と言うよりは自分の開発環境をより良くするのに適している感じ。
エディタ・ツール
runjs
RunJSはJavaScriptを実行できるシンプルなデスクトップアプリ。書いたコードが実行ボタンなどを押すことなく、結果に即時反映されるので、結果を見ながら書く事が出来ます。上記で紹介したplaycodeの様なもので、デスクトップのアプリもある感じです。
Sublime Text
テキストエディターはいろいろとありますが、一番長く使い続けているのがsublimetext。htmlやCSSのコードを書く時が多いので、コードを書いたときのサジェスト機能が便利です。
最後に
ブログで書くとブログネタにもなり、勉強にもやる気が出ます。今まではプログラム関連をどうやってブログで紹介するのが見やすく、伝わりやすくできるのか？がしっくり来ていなかったので、手が進まなかったのですが、深く考えず修正をすることで、復習し繰り返していこうと思います。
勉強方法は人それぞれで、ここに紹介したもの以外でより良いものや自分に合った方法が多くあります。
ただし、勉強方法を探すのが目的ではないので、まずはこの記事に書かれているもので直ぐ行動して頂ければと思います。
スクリプト系のサイトは、黒ベースのデザインばかり…。
