<p>今回はvar, const, letの違いについて詳しく解説したいと思います。<br>この３つのキーワードは変数をつける時に必ず出ます。<br>例えば：</p><pre><code>var name = "tony";
const name = "tony";
let name = "tony";</code></pre><p>varは昔からありますが、constとletはES6からの新しい宣言方法です。<br>だから、３つのキーワードも宣言方法ですが違いがあります。<br></p><h3 id="ha4216b9ab6">再宣言はvarしかできない</h3><p><strong>再宣言とは：</strong><br>一度宣言した変数は上書きすることができること。</p><pre><code>var num = 1;
var num = 22;
console.log(num); // =&gt;22

//letとconstは再宣言ができなし
let num = 1;
let num = 22; // =&gt; error

const num = 1;
const num = 22; // =&gt; error</code></pre><p><br></p><h3 id="hc681a46096">varとletは再代入ができるが、constができない</h3><p><strong>再代入とは：</strong><br>一度宣言した変数に、値を再び代入すること。</p><pre><code>var age = 10;
age = 90;
console.log(age); // =&gt;90

let age = 10;
age = 90;
console.log(age); // =&gt;90

//しかし　constの場合は
const age = 10;
age = 90;
console.log(age); // =&gt;error</code></pre><p><br></p><h3 id="hbd94b70209">letとconstはスコープがあるが、varはない</h3><p><strong>スコープとは：</strong><br>ブロック{}の中のみ参照でき、外は参照できない。</p><pre><code>//letとconstの場合
function test() {
    const x = 1;
    console.log(x); // =&gt; 1
    // {}の中に`x`は参照できる
}
test();
console.log(x); // =&gt; error
// {}外から`x`は参照できない</code></pre><p><br></p><h3 id="hdd3d00324c">つまり</h3><p><strong>var</strong>は１番万能そうに見えますが、<br>再宣言、再代入もできますし、スコープもありません。<br><strong>しかし</strong><br>複数再宣言、再代入をするとエラーが出やすく、<br>しかもスコープがないため、直すのも難しくてコードも読みにくいです。<br><br>だから<br><strong>constとletがおすすめです。</strong><br></p><p style="text-align:center"><strong>今度は演算について紹介します！！</strong></p><p><br></p>

JavaScriptの基礎から（０２）

<p>前回JSの読み込み方を紹介しましたが、今回はJavaScriptの基本知識を詳しく解説したいと思います。<br></p><h4 id="h9161af23ff">１、<strong>大文字と小文字の分かれ</strong></h4><p>変数に名前を付ける時、大文字と小文字は正しく記述する必要があります。</p><pre><code>//正確の例:変数をつけるときは第一文字が絶対に小文字。
let name = "My name is Tony";

//不正確の例：第一文字が大文字　＞　errorが出る
let Name = "My name is Tony;"</code></pre><p><br>２、<strong>空白</strong><br>変数名は空白を入れてはダメです。</p><pre><code>//不正確の例
let N ame = "My name is Tony";</code></pre><p><br>３、<strong>コードの区切り</strong><br>JavaScriptではコードの区切りするとき、『;』を使います。</p><pre><code>let name = "My name is Tony";</code></pre><p><br></p><h2 id="h275b3bc141">データ型</h2><p>JavaScriptのデータ型は5種類あります。</p><pre><code>//String(括弧中の文字)
let test = 'test';

//Number
let test = 111;

//Boolean　(true / false)
let test = true;

//Array (配列)
let test = ["a", "b", "c", "d"];

//Object (オブジェクト)
let test = {name: "Tony", age: 32};</code></pre><p>String：テキストで引用符で囲む必要があります。<br>Number：普通の数字です。<br>Boolean：真偽値。よくIF文と一緒に使います。<br>Array：配列。複数のもの（String・Number・Object）を[]に入れます。<br>Object：オブジェクト。一個のものみたい。<br></p><p style="text-align:center"><strong>今度はvar、let、constの違いについて紹介します！！</strong></p><p><br></p>

JavaScriptの基礎から（０１）

<p>前回JSの基礎知識を紹介しましたが、今回はJavaScriptの書き方を詳しく解説したいと思います。<br></p><h2 id="hc63c68e1e6">JavaScriptとは</h2><p>JavaScript はウェブサイトにインタラクティブ機能 (ゲーム、ボタンが押されたときやデータがフォームに入力されたときの反応、動的なスタイルの変更、アニメーションなど) を追加するプログラミング言語です。<br><a href="unsafe:developer.mozilla.org">developer.mozilla.org</a><br><strong>もっと詳しく知りたい場合は、こちらをご参考ください</strong><br></p><h2 id="h3dd1ee7155">JavaScript ができること</h2><ul><li><strong>ブラウザ上に表示された画面を部分的に動かす</strong><ul><li>スクロール、マウスの動きによるアニメーションなどはJavaScriptで作ることができます。</li><li>JSは色々なライブラリを使うことができます（<a style="color:inherit" href="https://anime.js/" target="_blank" rel="noopener noreferrer">Anime.js</a>・<a style="color:inherit" href="https://velocity.js/" target="_blank" rel="noopener noreferrer">Velocity.js</a>）</li><li>CSSアニメーションだけでは表現できない複雑なアニメーションを行うことができます。</li></ul></li></ul><p><br></p><ul><li><strong>Webアプリケーション</strong><ul><li>高度な機能を持ったWEBサイト（ブログ・Amazonのような商品購入のサイト）</li></ul></li></ul><p><br></p><ul><li><strong>計算</strong><ul><li>お買い物サイトで料金を試算出来る</li></ul></li></ul><p><br></p><h2 id="hd148c32f21">JavaScript</h2><p style="text-align:center"><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/7daae6690a7d4bc3a1b6710b31c824a9/jsSave.webp" alt=""></p><p style="text-align:center">まずは以上のようにファイルを作ります。</p><p style="text-align:center"><br></p><pre><code>&lt;body&gt;
      &lt;script src="JS/test.js"&gt;&lt;/script&gt;
&lt;/body&gt;</code></pre><p>そしてHTMLファイルの &lt;body&gt;の中に以下の要素を追加します。<br>&lt;script src="JS/test.js"&gt;&lt;/script&gt;<br>JSのファイルが読み込めるかどうか、確かめます。<br></p><pre><code>document.write("&lt;h1&gt;JavaScript Test&lt;/h1&gt;");</code></pre><p>見出しの文字列”JavaScript Test”が出てくるはず<br></p><p style="text-align:center"><strong>次はJSの書き方について紹介します！！</strong></p><p><br></p>

JavaScriptの基礎から

<p>はじめまして！岡崎です。<br>今回は、入学までプログラミングが全くできなかった私が当時勉強したこと、そして今の自分ならすることをまとめてみました！<br>最近勉強を始めた方の参考になればと思います！<br>※技能五輪全国大会という、24 歳以下が出場できるフロントエンド・バックエンド・CMS のモジュールがある全国大会で 2 位獲りました。力試しで出場したので力を入れて対策をしていた感じではないです。<br></p><h1 id="h8d027c8ed3">はじめに</h1><p>プログラミングの勉強は基本的にしんどいです。<br>わからないことばかりで、楽しくない時間やしんどくなる時期がたくさんくると思います。<br>広告でよく見る、<br><code>web のプログラミングは簡単で稼ぎやすい</code><br>というのはプログラミングが簡単という意味ではなく、<br><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/04e15308b7aa4fbf812139e6ca2346aa/8507a99e71db8e43cf171d37.png" alt=""><br>という意味です。<br><strong>簡単だと思って勉強を始めると心が折れる</strong>と思います。<br>ですが、時間をかけて根気よく向き合うことができれば誰でもある程度は書けるようになると思うので頑張りましょう！<br>外部との通信が出来るようになると一気に作れるものの幅が広がり、楽しくなってくるのでひとまずの目標は通信でデータを取ってきて便利なアプリを作ってみることで良いと思います！</p><h2 id="h24622a49d2">勉強をする上で意識しておきたいこと</h2><p>プログラミングは暗記する必要はないので、暗記をしようと思わないでください！<br>覚えるしかないものもありますが、100%覚える必要は全くありません！<br>色々触ってみることが成長への一番の近道だと思います！<br>色々なプログラミング言語を触るよりかは、何か 1 つに絞って習得した方が絶対に良いです！<br>書き方が変わるだけで本質的にはどの言語を使っても変わらないので、とりあえず 1 つの言語をがんばりましょう！<br>お金を払うことを躊躇しないでください！<br>知識は力です。無料のコンテンツでも勉強はできると思いますが、最初のうちは体型的に学べる書籍などで勉強するのが良いと思います。</p><h2 id="h451be01e23">勉強した順番</h2><ol><li>HTML, CSS</li><li>JavaScript</li><li>vue / react + typescript</li></ol><h2 id="ha080a2565a">HTML, CSS</h2><p>まず初めに<a style="color:#0f83fd" href="https://prog-8.com/courses/html" target="_blank" rel="noopener noreferrer">プロゲート</a>の HTML, CSS のコースを 2 周しました。（途中から有料会員になる必要があります。）<br>1 周目はヒントやスライドを振り返りながらなんとなくで進めてゆき、2 周目はできるだけヒントを見ずにスライドを中心に進めてゆきました。<br>なんとなく流れが掴めたら&nbsp;<a style="color:#0f83fd" href="https://www.udemy.com/courses/search/?src=ukw&amp;q=html+css" target="_blank" rel="noopener noreferrer">udemy</a>&nbsp;にて html, css の内容があるコースを購入し進めるのが良いと思います。<br>自分は CodeMafia 様の<a style="color:#0f83fd" href="https://www.udemy.com/course/front-dev-tutorial/" target="_blank" rel="noopener noreferrer">こちらのコース</a>を購入し進めました。<br>勉強中、プロパティの仕様などを確認したい場合が出てきた場合は検索エンジンにて、「プロパティ名 mdn」と検索し勉強することをお勧めします。<br>mdn は firefox の会社が作成している説明書みたいなものです。他のサイトよりも信頼できる情報源なので web 関連の調べ物をする場合は積極的に使用しました</p><ul><li><a style="color:#0f83fd" href="https://prog-8.com/courses/html" target="_blank" rel="noopener noreferrer">プロゲート - HTML</a></li><li><a style="color:#0f83fd" href="https://www.udemy.com/course/front-dev-tutorial/" target="_blank" rel="noopener noreferrer">【JavaScript＆CSS】ガチで学びたい人のための WEB 開発徹底実践（フロントエンド編）</a></li></ul><h2 id="hd148c32f21">JavaScript</h2><p>HTML, CSS がなんとなく書けるようになったら、HTML, CSS と同様にプロゲートにて JavaScript のコースを 2 周しました。<br>様々なサイトやサービスを使ってみた結果一番プロゲートが楽しく、わかりやすかったです。<br>そして udemy にて&nbsp;<a style="color:#0f83fd" href="https://prog-8.com/courses/es6" target="_blank" rel="noopener noreferrer">JavaScript</a>&nbsp;のコースを購入し進めました。私の場合は前回購入したコースの中に JavaScript が含まれていたのでそちらを使用し、学習を進めました。<br>コースの中でわからない用語が都度都度出てきたので調べて理解していました。<br>udemy を進めながら、<a style="color:#0f83fd" href="https://jsprimer.net/" target="_blank" rel="noopener noreferrer">jsprimer</a>&nbsp;で概要の復習をしていました。</p><ul><li><a style="color:#0f83fd" href="https://prog-8.com/courses/es6" target="_blank" rel="noopener noreferrer">プロゲート - JavaScript</a></li><li><a style="color:#0f83fd" href="https://jsprimer.net/" target="_blank" rel="noopener noreferrer">jsprimer</a></li></ul><h2 id="hf8817f2c20">vue / react + typescript</h2><p>HTML / CSS / JavaScript でいろいろ作れるようになった方は vue や react を勉強してみると仮想 DOM の概念に感動すると思います。<br>フロントエンドエンジニアとして働くことを想定している場合は、vue か react どちらか好きな方を触ることを強くお勧めします！<br></p><h1 id="h9be0c3393d">おわりに</h1><p>勉強で何をしたらいいのか分からなくなった時は&nbsp;<a style="color:#0f83fd" href="https://roadmap.sh/frontend" target="_blank" rel="noopener noreferrer">roadmap</a>&nbsp;などを参考にしてみると良いかもしれません！<br>そして一通りフロントを触ったあとは、サーバーサイドや linux の基礎など自分の興味のままに勉強していきましょう〜！<br>いろいろな勉強方法がある中、この記事がどなたかの参考になれば幸いです！<br>それではよいエンジニアライフを！</p>

初心者がフロントエンドエンジニアとして全国2位になれた勉強法

<h2 id="hd0e9724409">HTML</h2><p>headタグの中に以下を記載します。ただ、VScodeでファイルを作った際に<strong>html:5</strong>を打つと、これは自動で出てきます。ReactやVueにもデフォルトで記載がありますね。</p><pre><code>// index.html

&lt;meta name=”viewport” content=”width=device-width, initial-scale=1.0″&gt;</code></pre><h2 id="h20b4c98e2a">CSS</h2><pre><code>// common.css

@media screen and (min-width: 481px) {
/* PC向けスタイル */
}
@media screen and (max-width: 480px) {
/* スマートフォン向けスタイル */
}</code></pre><p><strong>min-width: 481px</strong>というのは<strong>最低481pxのデバイスに適用されるよ</strong>という意味です。minという言葉が使われているので若干分かりづらいですが、481px以上のデバイスであれば自動的にこちらが適用されます。例えば<strong>min-width: 481px</strong>と記載してPCとスマホを分けた場合、同じタッチ操作のデバイスでありながら、iPadはこちらに含まれます。<br>逆に<strong>max-width: 480px</strong>は<strong>480px以下のデバイスに適用されるよ</strong>という意味。大体のスマホはこれにあたるのではないでしょうか。</p><h3 id="h45f7c23f14">画面サイズを複数指定するときの注意点</h3><p>min-widthは<strong>小さいものから大きいものに</strong>、<br>max-widthは<strong>大きいものから小さいものに</strong>向かって指定していかなければいけません。</p><pre><code>// common.css

/* NG例 */
@media screen and (min-width: 700px) {
/* 本当はこっちを当てたい */
}
@media screen and (min-width: 481px) {
/* こっちにも当てはまるので適用されてしまう */
}
@media screen and (max-width: 480px) {
/* 本当はこっちを当てたい */
}
@media screen and (max-width: 700px) {
/* こっちにも当てはまるので適用されてしまう */
}</code></pre><p>というのも、CSSは上から読み込まれるので、せっかく指定しても下に書いたものが上書きをしてしまうのです。<br>ここを適当に書いていて暫くハマった記憶があります。</p><h2 id="hd148c32f21">JavaScript</h2><p>JSは指定方法が2つあります。まずは僕が個人的に使う方から。</p><h2 id="ha842f805f3">CSSと同じように画面サイズから指定する</h2><pre><code>// common.js

function switchByWidth(){
  if (window.matchMedia('(max-width: 480px)').matches) {
    // スマートフォン向け処理
  } else if (window.matchMedia('(min-width:481px)').matches) {
    // PC向け処理
  }
}
// ロードとリサイズの両方で同じ処理を付与
window.onload = switchByWidth;
window.onresize = switchByWidth;</code></pre><p>JSはif文で指示をパスすることができるので、CSSとは逆に<br>min-widthは<strong>大きいものから小さいものに</strong>、<br>max-widthは<strong>小さいものから大きいものに</strong><br>向かって書いて、elesで飛ばしていくことが無難なようです。<br>そもそも、JSでデバイスではなく画面サイズごとに指示をする場面はあまり出てきませんが…。<br>CSSが画面サイズで判断をしている都合上、処理に互換性を持たせる意味でこちらをよく用います。<br>画面をリロードしたときと、PCなどで画面幅を変更したときに同じ処理を与えなければなりませんので、<br>画面処理を関数に入れて下2行で呼び出しています。</p><h2 id="h20b239ccbc">JavaScriptでuseragentを取得して切り替える</h2><pre><code>// common.js

if( /^Mozilla/5.0 ((iPhone;|iPad;|iPod;|Linux; U; Android|Linux; Android)/i.test(navigator.userAgent) ) {
  // スマートフォン向け処理
}else{
  // PC向け処理
}</code></pre><blockquote>ユーザーエージェントを取得し、iOSの端末とAndroidの端末であるかをチェックして処理を分けています。<br>スマホ用ブラウザとPC用ブラウザではtouch関係のイベントでプロパティの構造が異なる場合があるため、その処理をきっちり分けてエラーを避ける目的では有効です。 しかし、一般的なレスポンシブではブラウザ幅を参照して画面を切り替えるのが主流ですので、こちらの手法の場合は画面とJavaScriptの処理に整合性がなくなってしまう場合があります。</blockquote><p>参考サイト：https://www.site-convert.com/archives/1451</p>

一目でわかるレスポンシブデザイン実装方法【HTML/CSS/JavaScript】

<h3 id="h0ae0ffe383">HTML・CSS・JavaScriptの関係</h3><p>サイトを作るにはこの３つの関係を覚える必要があります。</p><ul><li>HTMLはサイトの<strong>基本的構造を記述</strong></li><li>CSSはサイトの<strong>表示やレイアウトなどを制御</strong></li><li>JavaScriptは<strong>各要素の動作を制御</strong></li></ul><p>簡単に言えば:</p><ul><li>HTMLは<strong>骨格</strong></li><li>CSSは<strong>外見</strong></li><li>JavaScriptは<strong>動作</strong></li></ul><p><br></p><h3 id="h7019529581">実際の書き方</h3><p><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/7521b0e3ee8b4951a1033898cada2785/HTML.webp" alt=""></p><h3 id="h5bb40017b8">HTMLの構造</h3><p>&lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;body&gt;&lt;/body&gt; &lt;/html&gt; 開始タグ&lt;&gt;と終了タグ &lt;/ &gt;があり、最後は終了タグで閉じます。 headの中は、titleやmetaなどの隠れた情報があります。<br><span style="color:#ffffff">&lt;head&gt;</span></p><pre><code>    &lt;meta charset&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;meta name="format-dtection" content="telephone=no"&gt;
    &lt;meta name="keyword" content=""&gt;
    &lt;meta name="descripion" content="ここに説明文を設定"&gt;
    &lt;meta name="twitter:card" content="summary"&gt;
    &lt;meta name="twitter:site" content="@twitteraccount"&gt;
    &lt;meta property="og:site_name" content="サイト名"&gt;
    &lt;meta property="og:title" content="サイトタイトル"&gt;
    &lt;meta property="og:description" content="サイト説明文"&gt;
    &lt;meta property="og:url" content="https://www.hogehoge.com"&gt;
    &lt;meta property="og:image" content="https://www.hogehoge.com./hoge.jpg"&gt;
    &lt;meta property="og:image:type" content="image/jpeg"&gt;
    &lt;meta property="og:image:width" content="600"&gt;
    &lt;meta property="og:image:height" content="400"&gt;
    &lt;meta property="og:type" content="website"&gt;
    &lt;link rel="shortcut icon" href="http://www.hoge.hoge/favicon.ico" type="image/vnd.microsoft.icon"&gt;
    &lt;link rel="apple-touch-icon" href="http://www.hoge.hoge/logo.png"&gt;
    &lt;link rel="stylesheet" href="css/sample09.css"&gt;　
    &lt;title&gt;タイトル&lt;/title&gt;
  &lt;/head&gt;</code></pre><p><a href="https://web-camp.io/magazine/archives/6869" target="_blank" rel="noopener noreferrer">https://web-camp.io/magazine/archives/6869</a><br><span style="color:#222222">bodyの中は、内容が表示される部分のことです。</span><br></p><h3 id="h2cb3745315">HTML に CSS と JavaScript を追加する</h3><p><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/fab580f4c9cd49f9b868ffa3fadf4156/HTMLTOCSS.webp" alt=""></p><h3 id="h233599169c">外部CSSの読み込み方</h3><pre><code>&lt;head&gt;
　　　　　　　　&lt;link rel="stylesheet" href="sample.css"&gt;
&lt;/head&gt;</code></pre><h3 id="h24bb901a2a">外部JavaScriptの読み込み方</h3><pre><code>&lt;body&gt;
    &lt;script type="text/javascript" src="techAcademy.js"&gt;&lt;/script&gt;
&lt;/body&gt;</code></pre><p><span style="color:#222222">HTML内にJavaScriptを直接埋め込む方法もありますが、</span><br><span style="color:#222222">あまり使う機会がないです。</span><br><span style="color:#222222">書き方は以下の通りです。</span></p><pre><code>&lt;script&gt;
  "JavaScriptのコードはこっち書く"
&lt;/script&gt;</code></pre><p><br></p><h3 style="text-align:center" id="h54c273dc1c">次回はCSSの書き方を紹介します！！<br>お楽しみに</h3><p><br></p>

JavaScriptの基礎から（０２）

JavaScriptの基礎から（０１）

JavaScriptの基礎から

初心者がフロントエンドエンジニアとして全国2位になれた勉強法

一目でわかるレスポンシブデザイン実装方法【HTML/CSS/JavaScript】

フロントエンドエンジニアの基礎知識