いつもよんでいただきましてありがとうございます。シュンです。
この記事を書いております私は、異業種からエンジニアに転職を30際になってから行いまして、現在はITエンジニアとして働いております。
さて既にエンジニアとして働いている方は、javascriptを知らないという方はいないと思います。javaというプログラミング言語がありますので混同していたり、違いがわからないという方がもしかしてたらいるかもしれませんが、名前は聞いたことがあるはずです。
それほどまでにIT業界ではポピュラーなのがjavascriptというプログラミング言語でして、画面の存在するWEBアプリケーションであれば必ず使われるプログラミング言語になります。
今回は「WEB系言語のJavaScript」について触れていきたいと思います。
※IT業界の情報について知りたい方は以下も合わせて読んでみてください。
javascriptとは
サーバーサイドではないので、Javaのように環境を構築する必要が無く、コードを書けばすぐに使うことができます。
初めのうちはjavaとjavascriptのプログラムの違いがわからない方も多いですが、
なんだということがわかって頂ければ良いです。
今回はjavascriptを使ってプログラミングの入門であるhello world！をやってみましょう。javascript入門
hello worldは皆さんご存知ですか？
私もプログラミングを最初に勉強するときにやたらとやりましたが、このhello worldで初歩のプログラムを動かしてみましょうということが、プログラミングの入門になります。このhello worldですが、プログラミング言語によって出力の仕方が変わります。
hello world はプログラムのコードを書いて文字の出力を出す基本になりますが、テスト工程や製造工程でデバックを行ってバグを見つけるのにも役に立ちます。決め打ちで文字を出力することもできますが、データを格納した変数も出力することができます。
プログラミングを行って作ったシステムが、自分で想定していない結果になった時に、変数の中身を出力して、変数に格納されているデータが正しいのかを調べるのに役に立つということですね。プログラミングの変数については以下の記事にてまとめていますので参考にしていただけたら幸いです。
javascript入門 バグが発生したら
人間が作っている以上バグは必ず潜んでいますしこれは仕方がないと割り切っているのがIT業界です。
実際にプロジェクトに参加して働くことになりますと、以下のように
と進みまして、最後に書いたテスト工程というのは製造工程でバグ存在していないかチェックして、バグを潰して修正する工程になります。
ですが、
このテスト工程でバグがもしでなかったらどうでしょうか？普通であればバグが出なくて良かったー！ミスなく完璧なシステムを構築することができた！と考える方も多いとは思うのですが、IT業界では違います。
上記でお伝えしたとおりIT業界では人間が作っている以上バグはある程度存在することが前提でシステム開発を行います。その為バグが出ないというのは有り得ないという前提でプロジェクトは進んでいきます。
これくらいコードを書いたらバグがこれくらい出るはずだ！というのを定義してシステムの品質の指標として考えますので、もし
テストしているけどバグが出ない！ということになりますと
テスト自体がちゃんと行われていないのではないか？という指摘が入り、お客さんから再度調査するように指示をされることもあります。
最悪テストの内容を確認されて観点が足りてないということの指摘によりやり直しということもありえます。エンジニアの業界ではしっかりとした大規模なプロジェクトであれば、システムの品質の評価をこのような定義で定めていることがほとんどです。
お客さんの要件にあったシステムを作ることが、契約で義務付けられています。
そのためエンジニアは自分の作ったプログラムをデバッグして何がおかしいのかを調査する方法も身につけなくてはなりません。javascript入門 hello world 出力の準備
javascriptは好きなエディターに書いてプログラミングを行うことができます。
エディターというのはWindowsに標準に入っているメモ帳と同じように文字を打ち込むことが出来るデスクトップアプリケーションのことです。メモ帳以外のエディターについては以下の記事にて紹介しておりますので参考にしていただけたら幸いです。
javascriptはWindows標準のメモ帳でもプログラムを書く事ができますので
プログラミング初心者でもスタートのハードルがとても低いです。さてここからはエディターを立ち上げて実際にjavascript入門のプログラムを書いてみましょう。
javascript入門 実践
エディターを起動したら
<script>
alert('Hello World!');
</script>と書いてみましょう。
javascriptは<script>タグで囲むことでコードがhtml上で読み込まれ、javascriptを実行することができます。書きましたらファイルをhtmlの拡張子にして保存をしてください。
私は
javascript_hello_world.htmlにしました。
保存したあとにファイルをドラックアンドドロップでブラウザで表示してください
ブラウザはGoogle Chromeがいいですね。もしダウンロードされていない方は無料でダウンロードできますのでGoogle Chromeを使ってみることをおすすめします。
Chromeを開きますとこのようにGoogleのトップページに行きます。
こちらにドラックアンドドロップを行いますと以下のように出力されます。
'Hello World!
出力されましたでしょうか？
かなり簡単なプログラムですが、プログラミングの入門は
'Hello World!
を出力することを基本としています。
またこの出力に関しては環境構築はしておりません。
環境の設定いらずでプログラムが動かせるのがjavascriptがプログラミング入門としておすすめできるポイントとなります。javascript入門 hello world出力の別パターン
それでは別の方法でhello worldを出力してみましょう。
今度は
alert(‘Hello World!’);の部分を変えてください。
<script>
console.log('Hello World!');
<script> 書けましたら、同じくhtmlの拡張子で保存してブラウザでドラックアンドドロップしてください。いかがででしょうか？以下のような画面になりましたか？
真っ白になってしまい何も出ていないので失敗したと思われた方もいるかもしれませんが期待通りになります。
Google Chromeをインストールしよう
ここからはChromeを使って解説していきますので
Chromeをインストールしていない方はインストールしてみてください。Google ChromeはWebの開発ではよく使われますのでまだ使ったことのない方は、使ってなれておいたほうが良いです。
Googleクロームを起動しましたら開発者モードを起動しデバック機能を使ってみます。
ブラウザの開発者モード
開発者モードについて知らない方も多いと思いますが、ITエンジニアはブラウザの開発者モードはよく使います。
私も最初全く知りませんでしたが、IT業界で働くことになれば、使う機会が必ず訪れます。
Chromeは標準のインターネットエクスプローラーより、
動作が早くて快適らしいくらいしか知りませんでしたが、ブラウザのデバック機能も提供されています。
Chrome以外ではedgeも同様に開発者モードを使うことが可能です。
開発者モードの起動方法はキーボードのF12を押すことで起動されます。もしF12で出ない方はファンクションキーとF12キーを同時押しやクロームの設定から、その他ツール＞デベロッパーツールを開いてください。
Microsoft Edge の場合
windows10を使っている方でしたらデフォルトでMicrosoft Edgeが使えるはずです。先ほどの javascript hello world のファイルのプロパティを開いて、プログラムをエディターから変更を押してMicrosoft Edge にしてください。
この状態でファイルをダブルクリックするとhtmlが表示されるはずです。
画面はEdgeでも白くChromeと同様ということが確認できます。
Edge でもF12で開発者ツールが開けますので開きましょう。
javascript入門コンソールに出力
Chrome、edgeそれぞれHello World!がコンソールに出力されましたでしょうか？
javascriptはconsole.log()という関数を使って文字をコンソールに出力させることができます。javascriptのデバッグの基本になりますので覚えておくといいでしょう。
ちなみに Microsoft Edgeの方では警告が表示されていたかと思います。
こちらの警告を修正します。
Microsoft Edge を使っている方はこのままですと編集できませんのでメモ帳でも大丈夫なのでエディターに切り替えて再度編集します。
適用を押してからOKを押してください。
編集ができるようになりますのでhtmlの記述を追加します。
<!DOCTYPE html>
<html>
<script>
console.log('Hello World!');
</script>
</html>上記のように書きますと警告は消えるはずです。
!DOCTYPE html
はhtmlを書くときのお作法になります。
!DOCTYPEでと書くことで
ドキュメントタイプをHTMLのドキュメントです！と宣言しているのです。
この一文は必ず記述します。
記述がなかったため警告が表示されていました。
こちらもコンソールにエラーや警告が出ますので、javascriptを使う方はブラウザの開発者モードを使えるようにしておきましょう。
javascriptのプログラムで想定通りに動かなかったり挙動がおかしい場合にはコンソール上でエラーが発生していることがありますので、おかしいと思ったら開発者モードで調べる癖をつけておくと良いです。
この記事のまとめ
javascriptはプログラミング初心者でも簡単に使えることがお分かりいただけましたでしょうか？
もしあなたがプログラミング経験者で独学で勉強したいのでしたらプロゲートやドットインストールで学ぶこともできますが、プログラミング完全未経験の方がプログラミングを独学で学ぶ場合には挫折する方が多いようです。
現在ではプログラミングスクールがありますので、完全未経験からでもプログラマーやWEBエンジニア、WEBデザイナーなどの職業に就くことも可能です。
プログラミングやIT知識に関する学習は時間がかかります。
プログラミングスキル・IT知識を最短で学習しプログラマーやエンジニアとして働きたいという方はエンジニアスクールやプログラミングスクールを使うことが現在では当たり前となっています。
以下のリンクにて無料から有料の「プログラミングスクール」「エンジニアスクール」についての情報をまとめて共有していますので是非参考にしてください。
未経験からエンジニアを目指す場合には業界情報や職種に関する情報、IT技術や用語など知るべきことが多くあります。以下の記事にて業界未経験のエンジニア職希望者が知るべき情報をまとめていますので是非見てみてください。
Javaとjavascriptの違いについて詳しくしりたい方は以下のjavaに関する記事を読んでいただけたらと思います。
この記事が参考になった、気に入ったと感じた方はフォローとシェアーをお願いいたします。
No tags for this post.
コメント 記事に関するご意見・ご感想・ご質問などお気軽にどうぞ！※メールアドレスは非公開です