【無料】プログラミング言語って何から始めればいいの?初心者はまずこれをやってみればいいと思う

こんにちは、おつまみ(@otsumami082)です。

 

先日、めちゃくちゃ気になる動画を見つけました。


【新】ワンクリック詐欺を作ろう

 

詐欺サイトを作る…だと…?(;^ω^)

中二病心を絶妙にくすぐるパワーワード。これは視聴せずにはいられない!

 

そして、視聴した結果

おお!この動画…めちゃくちゃ良い!

 

どこら辺が良いのかと言うと

  • コンセプトが面白い
  • とりあえずやってみたい!と思わせる仕掛け
  • 解説が超丁寧

などの要素があるからなんですね。

 

実際、私はこの動画通りにプログラミングをやってみたのですが、ものすごく楽しく学習をすすめることができました。(*^^*)

 

最近はたくさんの人がプログラミングに興味をお持ちかと思います。

 

でも、その中には

プログラミングに興味あるけど、一体どの言語から手を出して良いのかが分からないんだよ〜(´;ω;)

という悩みを持っている人が多いのではないでしょうか?

 

そんな人にはこの『【新】ワンクリック詐欺を作ろう』がおすすめです。

おすすめな点
  • 無料
  • パソコンさえあれば、超初心者でもOK
  • HTMLの超基本を学べる
  • CSSフレームワーク(Bulma)の概念に触れられる
  • JavaScriptフレームワーク(Vue.js)の概念に触れられる
  • 詐欺サイトの構造を学べる

HTMLについての書籍

Bulmaについての書籍

JavaScriptについての書籍

Vue.jsについての書籍

 

詐欺サイトを作るって面白い試みですよね!
面白いものが作れるとなると、やり切るモチベーションにも繋がるかと思います

 

この動画で学ぶメリットの特徴としては、Webページ作成に必要な言語だけではなく詐欺サイトの手口もある程度知ることができるという点が挙げられます。

 

ちなみに私は以前にフィッシング詐欺に引っかかったことがあり、セキュリティ知識をしっかり持つ大事さを痛感しております。(´・ω・)

 

しかし、そんな素晴らしい『【新】ワンクリック詐欺を作ろう』動画ですが、実は、学ぶ際に気をつけなくてはならない点があります。

 

それは動画内で使っているCSSフレームワーク(Bulma)のコード変更の影響でそのまま手順通りやったのでは上手くいかないことがあるというものです。

 

私はある程度HTML&CSSの知識があるので自己解決できましたが、ガチ初心者だとコードの違いを見つけることができずに挫折してしまう可能性が高いのではないか?という心配が頭をよぎりました。

 

というわけで私が、そこらへんの不具合をどう乗り越えたのかをこの先に書きました。

トラブル解決の参考になれば嬉しいです。(*^^*)

Sponsored Link

私がつまずいた箇所と対策

 

詰んだ箇所その①

 

【#4Blumaを導入する】の4:05〜4:11あたりでエラー発生。レイアウトが崩れてしまいました。

 

どうやら、BLUMAページの【Layout→Hero】内のコピペ用ソースコードが2021年5月現在のものと動画内のものとで異なっていることが原因のようでした。

 

2021年5月現在のHeroコード

<section class="hero">
<div class="hero-body">
<p class="title">
Hero title
</p>
<p class="subtitle">
Hero subtitle
</p>
</div>
</section>

 

動画内のHeroコード

<section class="hero">
<div class="hero-body">
<div class="container">
<h1 class="title">
Hero title
</h1>
<h2 class="subtitle">
Hero subtitle
</h2>
</div>
</div>
</section>

赤字部分が追加・変更になっている箇所です

↑こちらのコードに書き換えた後に動画手順に従ったら、動画と同じレイアウトになり無事解決しました。

 

詰んだ箇所その②

 

【#7撮影の演出を追加する】の1:38〜2:08あたりの行程でもエラーが出てしまいました。

日本語が出力されていません。

 

 

デベロッパーツールにエラーメッセージが出ていますね。

どうやら【index.js】ファイルの7行目に不備があるみたいです。

 

 

【index.js】に行くと

7行目のエラー箇所に赤波線があります。

 

 

赤波線箇所にマウスポインタを置くと、エラーの内容が確認できました。

どうやら6行目の『,』が抜けていたようです。

 

 

『,』を追記

これでエラー解消。

 

 

動画通りの表示に変わりました。(背景など一部カスタマイズしているので、動画内のプレビューとは完全には一致していませんが、問題ありません)

 

どうしてもエラーが解決しない場合

何度見返してもコードが合ってるはずなのに、ちゃんと反映されない…どうしたらいいんだよ〜〜(´;ω;`)

こうなったらめんどくさがらずに、エラーが出る前の状態までコードを戻した方が良いでしょう。

それから再度コードを書き込むと、突破できることが多々あります。(個人談)

 

さいごに

最近の世の中は『プログラミング=将来性があって稼げる』という点が過度に強調されているような印象を受けます。

 

そのようなきらきら情報に惑わされて

よおぉーーっし!スクールに通ってプログラミング学んでバリバリ稼ぐぞー!

という具合に、高揚感に身を任せて大金をスクールに注ぎ込んでしまうと

バグばっかりで学習が進まない…
そもそもプログラミング面白くない…
貯金も無くなった…
俺の人生オワタ…

こんな悲惨な末路を辿ることになるかもしれません。(注:スクールのご利用は計画的に!)

 

スクールに通いたいのなら、まずは自分で小さく始めてみて

コード書くの楽しい!
俺、プログラミングの適性あるかも…

という実感を得られた後に通うほうが、リスクの小さい確実な選択だと思います。

 

なのでまずは、今回紹介したYoutube動画や入門書を使って小さな一歩を踏み出してみてはいかがでしょうか?

Twitterでフォローしよう

おすすめの記事