YouTubeチャンネルはこちら!

【JavaScript入門】初心者の僕でも理解できた!WEB系言語のJavaScriptについて解説します。

この記事は約12分で読めます。
javascript hello world

web系エンジニアwebデザイナーに興味があって調べてみたらjavascriptというプログラミング言語が出てきた!

プログラミングはやったことないからwebデザイナーは難しいのかな?

この記事ではこんな経験や疑問を持っている方向けにjavascriptの入門という内容で記事を書きましたので参考にしていただけたら幸いです。

この記事を書いております私は、異業種からエンジニアに転職を30際になってから行いまして、現在はITエンジニアとして働いております。

さて既にエンジニアとして働いている方は、javascriptを知らないという方はいないと思います。javaというプログラミング言語がありますので混同していたり、違いがわからないという方がもしかしてたらいるかもしれませんが、名前は聞いたことがあるはずです。

それほどまでにIT業界ではポピュラーなのがjavascriptというプログラミング言語でして、画面の存在するWEBアプリケーションであれば必ず使われるプログラミング言語になります。

今回はエンジニアを目指している方向けに、javascript入門という内容で解説していきますので読んで頂けましたら幸いです。

  • javascript とは
  • javascript入門 実際に使ってみる
  • javascript入門 デバッグする

javascriptとは

javascriptはクライアントサイドで動作するプログラミング言語になります。

サーバーサイドではないので、Javaのように環境を構築する必要が無く、コードを書けばすぐに使うことができます。

初めのうちはjavaとjavascriptのプログラムの違いがわからない方も多いですが、

javaのプログラムは使えるようになるまでに準備が必要になりますが、javascriptは準備いらずで使うことができて似ている名前だけど全く違うプログラミング言語

なんだということがわかって頂ければ良いです。

今回はjavascriptを使ってプログラミングの入門であるhello world!をやってみましょう。

javascript入門

javascript hello world

hello worldは皆さんご存知ですか?

私もプログラミングを最初に勉強するときにやたらとやりましたが、このhello worldで初歩のプログラムを動かしてみましょうということが、プログラミングの入門になります。

このhello worldですが、プログラミング言語によって出力の仕方が変わります。

hello world はプログラムのコードを書いて文字の出力を出す基本になりますが、テスト工程や製造工程でデバックを行ってバグを見つけるのにも役に立ちます。

決め打ちで文字を出力することもできますが、データを格納した変数も出力することができます。

プログラミングを行って作ったシステムが、自分で想定していない結果になった時に、変数の中身を出力して、変数に格納されているデータが正しいのかを調べるのに役に立つということですね。プログラミングの変数については以下の記事にてまとめていますので参考にしていただけたら幸いです。

javascript入門 バグが発生したら

javascript hello world
プログラミングをしていくと必ずバグが出ます。どんなに優秀なプログラマーシステムエンジニアだとしてもです。

人間が作っている以上バグは必ず潜んでいますしこれは仕方がないと割り切っているのがIT業界です。

実際にプロジェクトに参加して働くことになりますと、以下のように

  • 設計
  • 製造
  • テスト

と進みまして、最後に書いたテスト工程というのは製造工程でバグ存在していないかチェックして、バグを潰して修正する工程になります。

ですが、

このテスト工程でバグがもしでなかったらどうでしょうか?

普通であればバグが出なくて良かったー!ミスなく完璧なシステムを構築することができた!と考える方も多いとは思うのですが、IT業界では違います。

上記でお伝えしたとおりIT業界では人間が作っている以上バグはある程度存在することが前提でシステム開発を行います。その為バグが出ないというのは有り得ないという前提でプロジェクトは進んでいきます。

これくらいコードを書いたらバグがこれくらい出るはずだ!というのを定義してシステムの品質の指標として考えますので、もし

テストしているけどバグが出ない!

ということになりますと

テスト自体がちゃんと行われていないのではないか?

という指摘が入り、お客さんから再度調査するように指示をされることもあります。

最悪テストの内容を確認されて観点が足りてないということの指摘によりやり直しということもありえます。

エンジニアの業界ではしっかりとした大規模なプロジェクトであれば、システムの品質の評価をこのような定義で定めていることがほとんどです。

javascript hello world
プログラミングは作ればいいというわけではありません。

しっかりバグは潰してお客様に納品する必要があります。

お客さんの要件にあったシステムを作ることが、契約で義務付けられています。

そのためエンジニアは自分の作ったプログラムをデバッグして何がおかしいのかを調査する方法も身につけなくてはなりません。

javascript入門 hello world 出力の準備

javascriptは好きなエディターに書いてプログラミングを行うことができます。

エディターというのはWindowsに標準に入っているメモ帳と同じように文字を打ち込むことが出来るデスクトップアプリケーションのことです。メモ帳以外のエディターについては以下の記事にて紹介しておりますので参考にしていただけたら幸いです。

javascriptはWindows標準のメモ帳でもプログラムを書く事ができますので

プログラミング初心者でもスタートのハードルがとても低いです。

さてここからはエディターを立ち上げて実際にjavascript入門のプログラムを書いてみましょう。

javascript入門 実践

エディターを起動したら

<script>
   alert('Hello World!'); 
</script>

と書いてみましょう。

javascriptは<script>タグで囲むことでコードがhtml上で読み込まれ、javascriptを実行することができます。

書きましたらファイルをhtmlの拡張子にして保存をしてください。

私は

javascript_hello_world.html

にしました。

javascript hello world

保存したあとにファイルをドラックアンドドロップでブラウザで表示してください

ブラウザはGoogle Chromeがいいですね。

もしダウンロードされていない方は無料でダウンロードできますのでGoogle Chromeを使ってみることをおすすめします。

Chromeを開きますとこのようにGoogleのトップページに行きます。

javascript hello world

こちらにドラックアンドドロップを行いますと以下のように出力されます。

javascript hello world
'Hello World!

出力されましたでしょうか?

かなり簡単なプログラムですが、プログラミングの入門は

'Hello World!

を出力することを基本としています。

またこの出力に関しては環境構築はしておりません。

環境の設定いらずでプログラムが動かせるのがjavascriptがプログラミング入門としておすすめできるポイントとなります。

javascript入門 hello world出力の別パターン

それでは別の方法でhello worldを出力してみましょう。

今度は

alert(‘Hello World!’);

の部分を変えてください。

 <script> 
   console.log('Hello World!');
 <script> 
書けましたら、同じくhtmlの拡張子で保存してブラウザでドラックアンドドロップしてください。

いかがででしょうか?以下のような画面になりましたか?

javascript hello world

真っ白になってしまい何も出ていないので失敗したと思われた方もいるかもしれませんが期待通りになります。

Google Chromeをインストールしよう

ここからはChromeを使って解説していきますので

Chromeをインストールしていない方はインストールしてみてください。

Google ChromeはWebの開発ではよく使われますのでまだ使ったことのない方は、使ってなれておいたほうが良いです。

Google Chrome
Googleアカウントとの連携がスムーズなWebブラウザー

Googleクロームを起動しましたら開発者モードを起動しデバック機能を使ってみます。

ブラウザの開発者モード

開発者モードについて知らない方も多いと思いますが、ITエンジニアはブラウザの開発者モードはよく使います。

私も最初全く知りませんでしたが、IT業界で働くことになれば、使う機会が必ず訪れます。

Chromeは標準のインターネットエクスプローラーより、

動作が早くて快適らしい

くらいしか知りませんでしたが、ブラウザのデバック機能も提供されています。

Chrome以外ではedgeも同様に開発者モードを使うことが可能です。

開発者モードの起動方法はキーボードのF12を押すことで起動されます。

もしF12で出ない方はファンクションキーとF12キーを同時押しやクロームの設定から、その他ツール>デベロッパーツールを開いてください。
javascript hello world

Microsoft Edge の場合

windows10を使っている方でしたらデフォルトでMicrosoft Edgeが使えるはずです。

先ほどの javascript hello world のファイルのプロパティを開いて、プログラムをエディターから変更を押してMicrosoft Edge にしてください。
javascript hello world

この状態でファイルをダブルクリックするとhtmlが表示されるはずです。

javascript hello world

画面はEdgeでも白くChromeと同様ということが確認できます。

Edge でもF12で開発者ツールが開けますので開きましょう。
javascript hello world
javascript hello world

javascript入門コンソールに出力

Chrome、edgeそれぞれHello World!がコンソールに出力されましたでしょうか?

javascriptはconsole.log()という関数を使って文字をコンソールに出力させることができます。

javascriptのデバッグの基本になりますので覚えておくといいでしょう。

ちなみに Microsoft Edgeの方では警告が表示されていたかと思います。

こちらの警告を修正します。

Microsoft Edge を使っている方はこのままですと編集できませんのでメモ帳でも大丈夫なのでエディターに切り替えて再度編集します。
javascript hello world

適用を押してからOKを押してください。

編集ができるようになりますのでhtmlの記述を追加します。

 <!DOCTYPE html>
 <html>
   <script>
     console.log('Hello World!');
   </script>
 </html>

上記のように書きますと警告は消えるはずです。

!DOCTYPE html

htmlを書くときのお作法になります。

!DOCTYPEでと書くことで

ドキュメントタイプをHTMLのドキュメントです!

と宣言しているのです。

この一文は必ず記述します。

記述がなかったため警告が表示されていました。

こちらもコンソールにエラーや警告が出ますので、javascriptを使う方はブラウザの開発者モードを使えるようにしておきましょう。

javascriptのプログラムで想定通りに動かなかったり挙動がおかしい場合にはコンソール上でエラーが発生していることがありますので、おかしいと思ったら開発者モードで調べる癖をつけておくと良いです。

この記事のまとめ

いかがでしたでしょうか?

javascript hello world

javascriptはプログラミング初心者でも簡単に使えることがお分かりいただけましたでしょうか?

もしあなたがプログラミング経験者で独学で勉強したいのでしたらプロゲートやドットインストールで学ぶこともできますが、プログラミング完全未経験の方がプログラミングを独学で学ぶ場合には挫折する方が多いようです。

現在ではプログラミングスクールがありますので、完全未経験からでもプログラマーWEBエンジニアWEBデザイナーなどの職業に就くことも可能です。

以下の記事にて完全未経験の方でもITエンジニアのスキルを身に付けることの出来るエンジニアスクールについてまとめましたので参考にしていただけたら幸いです。

Javaとjavascriptの違いについて詳しくしりたい方は以下のjavaに関する記事を読んでいただけたらと思います。

ITエンジニアの転職を考えている方は以下の記事を読んでみてください。

コメント

プロフィール

シュン@pgfrat

高校卒業後に製菓学校に進学し製菓関連の国家資格を取得する。
専門学校卒業後に個人の洋菓子店やレストランなどで洋菓子や料理に携わるが、ブラックな勤務体制により絶望と脱獄、転職を繰り返してニートやフリーターを数年経験。

サラリーマンとして再起を図るものの、リーマンショックにより正社員にも関わらずリストラされてまたもやニート生活に堕ちる。
その後は奇跡的に大手家電量販店に転職し、接客販売業に従事。
数年間満足した生活を送ったが、夢を見たくて再度ホテルとレストランで修行を開始。

数年で身体を壊して為飲食業自体をリタイアしまたもやニートになりながらも何かしらの正社員にならないとマズイなと思う。
その後転職活動を営業、事務、などのデスクワーク中心の業種に絞り転職活動を行う。

今から営業は無理だと思いIT業界を目指して勉強を開始し転職を成功させて現在に至る。

現在はエンジニアとしてシステムエンジニアとして上流工程から下流工程まで浅く広く。

趣味は料理、it関連、音楽、映画、ゲーム、レジャー、ガジェット、ダーツなど

定期的にmoriblogを更新しておりますので読んでいただけたら幸いです。

シュン@pgfratをフォローする

カテゴリー

タイトルとURLをコピーしました