ノンプログラマーが独学でJavaScriptを身に付ける方法

当ページのリンクには広告が含まれています。

「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の勉強方法

勉強方法と言えば…、

  1. Googleでひたすら検索して学ぶ
  2. プログラミングスクールで学ぶ
  3. オンラインサイトで学ぶ

などがありますが、時間的制限や独学になるので、(1)と(3)で現在個人的に使い始めている「Google Apps Script(GAS)」を中心として勉強をしていきたいと思います。

Googleで検索すると沢山出てくるので、良さそうなものをピックアップしてみました。

ドットインストール

https://dotinstall.com/

ドットインストール

無料で始められるオンラインプログラミング学習サイト。1コマが短時間で動画もあり進めやすい。慣れたり自分に合った勉強方法と納得すれば、有料版を登録し、さらに多くの内容を学ぶことができます。
個人的には知り合いのノンプログラマーがこれで勉強してプログラマーとして仕事が出来ているので、1番のお薦め。

progate

https://prog-8.com/

プロゲート

ドットインストールと同じで、無料から有料までのプランがあるオンラインプログラミング学習サイト。ドットインストールと両方の無料版で勉強して有料版はどちらか1つで良いと思いますが、余裕あれば両方とも有料版を受けてみたい。

udemy

https://www.udemy.com/

udemy

著名な方から無名の方まで、動画を通じて教えてくれます。学習動画を購入して、その動画をステップに合わせて見て習得する流れ。サンプルでいくつか見れるが、購入してから「ちょっと分かりにくいな」と思う時も。ただ、内容とボリュームからは格安なので、自分にあった内容があれば購入しても良いと思います。

番外編)Youtubeで学ぶ

Youtubeでも勉強動画は沢山あります。内容の過不足や教え方、スピードなど自分のペースに合っているチャンネルが見つかれば1つの方法かと思います。Youtubeだけでマスターと言うのもレアケースかと思うので番外編として。

個人的には余計な説明は少なく、スピード感もあって良かったです。

サンプル実行とプログラムの保管

JavaScriptは手軽に試しやすいプログラムですが、プログラムテストと作成したプログラムの保管&シェアが簡単なサイトを使えば一石二鳥です。

jsfiddle

https://jsfiddle.net/

jsfiddle

利用者も多く、Wordpressのブログなど他のサイトへの埋め込みも簡単なメジャーなサイト。当サイトも使ってます。

codepen

https://codepen.io/

codepen

jsfiddleと同じくらいメジャーなサイト。出来る事もほぼ同じなので「jsfiddle」と迷ったら好きな方で良いと思います。

playcode

https://playcode.io/

playcode

書いたコードがその場でスムーズに実行結果が見れるサイト。htmlやCSSなども一緒に書いて行けるので、他のユーザーと共有と言うよりは自分の開発環境をより良くするのに適している感じ。

エディタ・ツール

runjs

https://runjs.app/

runjs

RunJSはJavaScriptを実行できるシンプルなデスクトップアプリ。書いたコードが実行ボタンなどを押すことなく、結果に即時反映されるので、結果を見ながら書く事が出来ます。上記で紹介したplaycodeの様なもので、デスクトップのアプリもある感じです。

Sublime Text

https://www.sublimetext.com/

sublimetext

テキストエディターはいろいろとありますが、一番長く使い続けているのがsublimetext。htmlやCSSのコードを書く時が多いので、コードを書いたときのサジェスト機能が便利です。

最後に

ブログで書くとブログネタにもなり、勉強にもやる気が出ます。今まではプログラム関連をどうやってブログで紹介するのが見やすく、伝わりやすくできるのか?がしっくり来ていなかったので、手が進まなかったのですが、深く考えず修正をすることで、復習し繰り返していこうと思います。

勉強方法は人それぞれで、ここに紹介したもの以外でより良いものや自分に合った方法が多くあります。
ただし、勉強方法を探すのが目的ではないので、まずはこの記事に書かれているもので直ぐ行動して頂ければと思います。

スクリプト系のサイトは、黒ベースのデザインばかり…。

<ご注意>上記の紹介は、提供者や販売・運営者様及びその企業を差別や批判するものではありません。個人的な見解結果としての紹介となりますので、最終判断は皆さまご自身でお願いいたします。また、掲載内容は変更されていくのでこの記事記載日以降は内容が異なる場合もあります事ご了承ください。

楽天市場で注目の商品![ sponsored ]

  • URLをコピーしました!
目次