他にもたくさんありますが、このあたりは少なくとも使えるようにしておきたいものです。この処理を、自分が思うように実行できるようになったらかなり楽しいです。したゲームなら作れるようになれると思います。最後まで見ていただきありがとうございます。今後ともよろしくお願いします。03:05【初心者向け】プログラミングを学ぼう!JavaScript編2Tweet広告を非表示にするもっと読むコメントを書く2019-08-30【初心者向け】プログラミングを学ぼう!JavaScript編こんにちは。今回はJavaScriptについてまとめようと思います。登場してから25年経つ言語で、ここ数年で需要が高くなっている言語です。Web制作やアプリケーション開発など幅広く使われています。JavaScriptを使用している企業も増えているので、就職・転職する方におすすめしたい言語のひとつですので、是非見ていってください。JavaScriptの環境構築まずは他の言語と同様に開発環境を構築する必要があります。今回はJavaの時のように細かい作業は必要ありません。Chromeのデベロッパツールに搭載されているコンソール機能について学んでいきます。デベロッパツールとは?Chromeブラウザに搭載されているデベロッパツールについて見ていきましょう!デベロッパツールは、Web開発者がデバックや最適化を便利に行うために用意されたツールになります。Chromeブラウザに限らず、FirefoxやEdgeなど様々なブラウザにも同様に搭載されている一般的な開発・実行環境です。Chromeブラウザの場合であれば「Ctrl」+「Shift」+「I」でデベロッパツールを起動することができます。このような画面が出てくると思います。Webのソースコードを閲覧することはもちろんのこと、CSSなどのデザインを調整したりスマホでの表示を確認することも可能です。JavaScriptをそのまま記述して実行できるコンソールという環境も備わっています。コンソールを使ってみようデベロッパツールに搭載されているコンソールタブを以下のように表示します。「Console」をクリックすると画面が変わります。この画面には「Console.log()」で実行した結果やエラーなどが表示されます。JavaScriptのコードをそのまま入力して実行させることも可能です。「alert(’こんにちは’)」と入力してみてください。すると、このようにアラートのダイアログが表示されます。コンソールは1行ずつの入力になりますが、しっかりとJavaScriptを実行させることができます。簡単なコードを試すには最適な機能ですので、是非使ってみてください。次はWebブラウザを使わないJavaScriptの実行環境を紹介します。Codeは2015年にMicrosoftからリリースされたエディタです。他のエディタと比べて軽量なエディタながら、高機能であることが特徴です。JavaScript以外にもJava、PHP、C/C++、C#、Ruby、Pythonなど多くのプログラミング言語に対応しています。Eclipsemergedoc.osdn.jpEclipseは、Java編でも紹介したエディタです。JavaScriptの開発・実行をサポートするためのプラグインが開発されています。Studioはmicrosoftが開発しているもので、JavaScriptの開発もサポートされています。メモ帳を使ってブラウザで開くHTMLでもそうですが、パソコン内のメモ帳を使ってソースコードを書き、ブラウザ上で実行することもできます。流れはHTMLと同じで、まずはフォルダを作ってその中にテキストファイルを作成します。次に、中にHTMLとScriptのソースコードを書きます。JavaScriptは「<head>」内に「<script></script>」を書いて、その中にコードを書いていきます。あいさつのボタンを作りました。ファイルの拡張子を「.html」に変更してから開くとこうなります。このボタンをクリックすると、alertの”こんにちは”が表示されます。図形を書いてみよう最後に、動く図形をWeb上に表示するプログラムを書いてみましょう。strict’まず、HTMLの<body>の中に「<Script>」を入れます。strict’」を入れます。これは「厳格化」といって、エラーをより的確にチェックしてくれるようになります。document.getElementById()document.getElementById()は、任意のHTMLタグで指定したIDにマッチするドキュメント要素を取得するメゾットです。()内にはid名を入力します。上記の場合は分かりやすくbbbと付けて、入力しています。addEventListener()addEventListenerは、JavaScriptでさまざまなイベント処理を実行することができるメゾットです。"red";})」と書いていますが、これは「クリックすると処理を行います」という意味です。"red";}」のことで、これは「図形のStyle(スタイル)をred(赤)にします」という処理です。このスタイルは、<head>の次に<style>と書いて、中身には図形の高さや横幅を決める文を書いています。「width」は横幅で、「height」は高さで、「background」は図形の色を決めます。このように、JavaScriptをHTML内に書き込むことによって、動きのあるWebページが作れます。次回は、JavaScriptのもっと細かい部分を書こうと思います。最後まで見ていただきありがとうございます。今後ともよろしくお願いします。22:15【初心者向け】プログラミングを学ぼう!JavaScript編Tweet広告を非表示にするもっと読むコメントを書く2019-08-30【初心者向け】プログラミングを学ぼう!HTML&CSS編3こんにちは。今回もHTMLとCSSについてのまとめで、CSSの基本的な書き方をまとめました。このCSSまで習得して、HTMLでのWebサイト制作の基礎が完成されます。CSSとはCSSとはHTMLによって書いた文章や画像のレイアウトを編集したり、デザインをしたりする言語です。HTMLファイルとは別に、メモ帳でCSSファイルを新規に作成します。拡張子は「.css」です。作成したら、メモ帳内にソースを書き込みます。CSSファイルを作成し、HTMLファイルに埋め込むまずはHTMLファイルを作成し、CSSファイルを作成したら、HTMLファイル内に埋め込みましょう。CSSファイルを作成するh1を文字の色を赤にして背景の色を黒にし、pの文字の色を青にしてフォントサイズを40pxにしてます。ファイルに保存したら拡張子を「.css」に変更します。適当にooo.cssとしました。HTMLファイルにCSSファイルを埋め込むこれで保存し、index.htmlをブラウザで開くとこうなります。CSSファイルに書くときは{}と;を使うCSSでは、まずは装飾したい文のタグを頭に付けて、{}を付けます。h1{}{}の中に、文字の色を変えたり大きさを変えたりレイアウトを変える文を書きます。「color:red;」は文字を青色にします。「background-color:black」は、背景を黒くします。文の最後には;を付けましょう。実際にWebページを作成するでは実際にWebページを作ってみましょう。簡単に自己紹介ページを作成します。HTMLファイル:index.htmlCSSファイル:ooo.css細かい所は端折りますが、このように書くと、Web上ではこんな表示になります。=classでタグを囲み名前を付けることで、名前ごとに違う編集ができます。名前は、classの属性を付けるのですが、今回は分かりやすくするためにaaaやpppなどと名前を付けています。参考にならないかもしれませんが、これで基礎の基礎くらいはできていると思います。0;」などを今回使っておりますが、もっとたくさんの装飾する属性があります。ここまで出来れば、色気のないWebページが作れるようになっていると思います。簡単なWebページが書けるようになれば、Web関連の企業への転職が有利になると思いますので、ここまでできるように頑張りましょう。企業でもっと具体的で実践向きな技術を学べば、独立も不可能ではありません。大事なのは、就職や独立などの明確な目標があることですので、目標を作って、HTMLとCSSを習得しようとすれば、おのずと効率良く勉強できると思います。最後まで見ていただきありがとうございます。今後ともよろしくお願いします。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。