<p>こんにちは！岡崎です！<br>今回は実務などで使用するwebアプリ開発者が知るべき最低限のHTMLタグを紹介していきたいと思います！</p><h2 id="h4f1c94b5cd">注意書き</h2><ul><li>記事の内容は記載当時であることに注意してください．</li><li>フロントエンドエンジニアである場合は<code>detailsタグ</code><span style="color:#1b1b1b">や</span><code>dialogタグ</code><span style="color:#1b1b1b">, </span><code>articleタグ</code><span style="color:#1b1b1b">などのタグを理解し，セマンティックWEBを心掛けるべきですので，記事で触れるタグはもちろんですがそれ以外のタグについて知っておく必要があると筆者は考えています．</span></li><li>本記事では，<a href="https://www.w3.org/TR/wai-aria-1.2/" target="_blank" rel="noopener noreferrer">WAI-AREA</a>などについては触れないものとする</li></ul><h2 id="h8ee2171751">重要度（★★★）</h2><h3 id="hbcce64804e">h1 ~ h6タグ</h3><p>見出しに使用します．<br>原則コンテンツ構造的に不自然にならないように使用しましょう．</p><pre><code>h1
├ h2
└ h2
&nbsp; ├ h3
&nbsp; ├ h3
&nbsp; └ h3</code></pre><h4 id="h698f6d872c">h1</h4><p>ロゴやサービス名などに使われることとが多い．<br>ページのタイトルということでブログなどの大見出しにも使用されることがある．<br>※正解はないのでコーディングする人のこだわりや思想によって使用場所が異なります．</p><h4 id="h7eef1ce917">自分の思想</h4><blockquote>h1は原則ヘッダーなどに存在するロゴに使用しています．<br>ブログの記事ページなど，内容がタイトルとして表すことができる場合はブログのタイトルにも使用していたりします．<br>HTMLの使用では複数配置することは可能ですが，原則1ページに1つがベストプラクティスとされています．<br>スクリーンリーダーを使用するユーザーにとって大見出しが複数ある場合混乱を招いてしまう場合があるので事情がない場合は1つにしたほうが良いでしょう．</blockquote><h3 id="heea0674248">pタグ</h3><p>文字を挿入する際に使用します．<br>段落を意味することが多いです．</p><h3 id="hf1a0551da1">aタグ</h3><p>押下するとページ遷移するリンクを生成することができます．<br><code>href属性</code>にURL，<code>target属性</code>を指定することによってタブに暗黙的な名称を付けたり新規タブで開くことができる．</p><pre><code>&lt;a href="https://" target="_blank"&gt;リンク&lt;/a&gt;</code></pre><h4 id="h3304772cd9">aタグを使用するメリット</h4><p>aタグを使用することでスクリーンリーダーを使用しているユーザーに遷移するリンクというのが伝えることができる．<br><code>Tabキー</code>でフォーカスができ，<code>Enterキー</code>で遷移することができるためアクセシビリティを考慮した実装を自前でする必要がなくなる．</p><h3 id="h43708af002">buttonタグ</h3><p>押下すると動作するボタンを生成することができます．<br>ユーザーが押せるボタンは原則<code>buttonタグ</code>で作成してください．（単純にアクセシビリティやユーザービリティが良くなり，ユーザー体験が向上します．）<br>※押せないボタンを実装する場合は<code>disable属性</code>を付与するだけで実装するべきものが減る<br>特定の条件下で<code>type</code>を指定しなかった場合は<code>submit</code>が付与されたりするのでそれを避けるために<code>type属性</code>をつけるのを癖づけましょう．<br><a href="https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/button-has-type.md" target="_blank" rel="noopener noreferrer">reactのルールではtype属性を指定しないとエラーが出たりします．</a></p><pre><code>&lt;button type="button"&gt;ボタン&lt;/button&gt;</code></pre><h4 id="h6d3d968be0">aタグを使用せずに全てbuttonタグで実装しても良いのでは？</h4><p>画面遷移を<code>buttonタグ</code>でしてしまうとスクリーンリーダーを使用しているユーザーは想像しづらくなってしまうため使用方法によってタグを考える必要があります．</p><h3 id="h347cfa40ab">imgタグ</h3><p>画像を埋め込むことができるタグです．<br><code>src属性</code>に画像のパス，<code>alt属性</code>には画像が見えない人でもわかる文字を挿入してください．<br>また，ただのアイコンの場合でも<code>alt属性</code>は空文字だけでも指定するようにしてください．</p><pre><code>&lt;img src="画像のパス" alt="画像を説明する文章" /&gt;</code></pre><h4 id="h52bdbbfc31">alt属性の使用上の注意</h4><p>alt属性に文字を指定することで，画像が表示できなかった場合やスクリーンリーダーを使用した場合に画像の代わりに表示することができます．<br>空文字を指定することで画像に意味がないことを明示的に示すことができる．<br>また，スクリーンリーダーを使用した場合に読み上げを飛ばすことができる．</p><h3 id="h374983f2a5">divタグ</h3><p>レイアウトを取るために使用します．</p><h3 id="hb3864da3e2">spanタグ</h3><p>文字列の中で特定の位置にスタイルを当てたい場合に使用します．</p><pre><code>&lt;p&gt;〇〇を導入後、CVRが&lt;span&gt;30%向上&lt;/span&gt;しました！&lt;/p&gt;</code></pre><h2 id="h18f29d2271">重要度（★★）</h2><h3 id="h7ba8a4160a">formタグ</h3><p>小要素に<code>input</code>や<code>textarea</code>などの要素がある場合，submitすることでURL先に情報を送信する．<br><code>Enterキー</code>で送信されたり，<code>button[type=submit]</code>を使用することで<code>action</code>先にページリクエスト（リダイレクト）が行われる．<br>近年のwebアプリではrestful apiを用意しjsonを取得，フロントエンドに反映するパターンが多いため，その場合はeventを取得しpreventDefault()でデフォルトの挙動を無効化することが多いです．<br>※<code>php</code>や<code>rails</code><span style="color:#4d5156">などのviewファイルを</span><code>HTML</code><span style="color:#4d5156">直書きしている場合を除きます</span></p><pre><code>document.querySelector('form').addEventListener('submit', (event) =&gt; {
	event.preventDefault();
})</code></pre><h3 id="hc47193e1ed">inputタグ</h3><p>ユーザーが入力できる要素を生成します．<br>type属性をにinputの種類を指定することで数字だけのキーボードが出るようにしたりできます．<br>required属性を付与することで，入力がされていない場合のバリデーションをブラウザ単位でサポートすることができます．<br>placeholder属性に文字を入れることで入力前に薄く表示される文字を設定することができます．積極的に使用しましょう．</p><pre><code>&lt;input type="range" id="volume" name="volume" min="0" max="11" required /&gt;</code></pre><h3 id="h3a2f2dfffc">textareaタグ</h3><p>ユーザーが複数入力できる要素を生成します．<br>基本的にはinputタグと変わりありません．</p><h2 id="h03561720b8">重要度（★）</h2><h3 id="h75ffbda894">labelタグ</h3><p><code>inputタグ</code>や<code>textareaタグ</code>，<code>selectタグ</code>などの操作対象のタイトル?ラベル?に使用します．<br>pタグではなくlabelタグを使用することで文字をタップした場合のfocusの挙動が操作対象の要素に移るため，単純に使いやすくなり使用を推奨しています．</p><pre><code>&lt;label htmlfor="inputName"&gt;名前：&lt;/label&gt;
&lt;input id="inputName" /&gt;</code></pre><h3 id="hf18691eb29">brタグ</h3><p>改行することができます．</p><pre><code>初めまして，&lt;br /&gt;〇〇です．</code></pre><h2 id="hfa6daccb2d">セマンティックwebを意識する場合に知っておいたほうが良いタグ</h2><h3 id="h3be89268d1">セマンティックwebとは</h3><blockquote><span style="color:#000000">Webページに記述された内容について、それが何を意味するかを表す「情報についての情報」（</span><a style="color:#3344ff;background-color:#fcfcfa" href="https://e-words.jp/w/%E3%83%A1%E3%82%BF%E3%83%87%E3%83%BC%E3%82%BF.html" target="_blank" rel="noopener noreferrer"><strong>メタデータ</strong></a><span style="color:#000000">）を一定の規則に従って付加し、コンピュータシステムによる自律的な情報の収集や加工を可能にする構想。</span><br>セマンティックWebとは - 意味をわかりやすく - IT用語辞典 e-Words ( https://e-words.jp/w/セマンティックWeb.html )</blockquote><p>e-Wordsさんから引用しました．<br>要は単にHTMLを書くだけではなく，意味付けを意識したコーディングを意識することで<a href="https://gmotech.jp/semlabo/seo/blog/crawler_measures/" target="_blank" rel="noopener noreferrer">クローラー</a>にも認識されやすいことからSEO的にも良く，スクリーンリーダーの読み上げが変わる場合があるのでアクセシビリティ的にもより良い実装をすることができます．</p><h3 id="hdf68ac8090">headerタグ, mainタグ, footerタグ</h3><p><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/95428dec5b6547248a64003da3cd1240/image.png" alt=""></p><h3 id="h9cc1cae3d7">navタグ</h3><p>ナビゲーションに使います．<br>例：ヘッダーのナビゲーションリンクやパンクズリストに使用します．</p><pre><code>&lt;nav class="crumbs"&gt;
&nbsp; &nbsp; &lt;ol&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;li class="crumb"&gt;&lt;a href="#"&gt;Bikes&lt;/a&gt;&lt;/li&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;li class="crumb"&gt;&lt;a href="#"&gt;BMX&lt;/a&gt;&lt;/li&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;li class="crumb"&gt;Jump Bike 3000&lt;/li&gt;
&nbsp; &nbsp; &lt;/ol&gt;
&lt;/nav&gt;</code></pre><h3 id="h614ce0e5a1">sectionタグ</h3><p>文章の見出しと本文を囲うタグとして使用します．</p><h3 id="hb6dddde4c7"><span style="color:#1b1b1b">detailsタグ</span></h3><p><code>detailsタグ</code>は<code>summaryタグ</code>と合わせて使用します．<br>アコーディオンメニューを作成する際にjavascriptを使用し作成することが多いですが，javascriptで作成してしまうとスクリーンリーダーの挙動が実装頼りになってしまいますがdetailsタグを使用することで正しく読み上げが行われます．<br><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/07b822e89e36432396562383b4e22981/image.png" alt=""></p><h2 id="ha214098e44">まとめ</h2><p>以上よく使う / 知っておいたほうが良いタグを紹介しました！<br>他にも<code>articleタグ</code>や<code>figureタグ</code>，<code>tableタグ</code>などさまざまなタグがありますが必要に応じて調べて使用するくらいの認識で大丈夫だと思います！<br>また，フロントエンドエンジニアとして仕事をしていく場合は一度<a href="https://developer.mozilla.org/ja/docs/Web/HTML/Element" target="_blank" rel="noopener noreferrer">HTMLのタグ一覧</a>を確認してみてもいいかもしれません！<br>読んでいただきありがとうございました！</p>

WEB開発者が知るべき最低限のHTMLタグ一覧

<p>長いことブログをやっていたのでRSSの存在は5億年前から認知していましたが、やっとのことで手をつける気になりました。遅い。</p><h2 id="h55b62d5072">RSSのURLを取得</h2><p>まずはRSSのURLを取得します。PCだとここ。<br><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/86db7eee0e9346d4a6690a9b7a1ab88e/picture_pc_cb121d2c067b44c3a76718f43e16f1a2.webp" alt=""><br>「RSS」をクリック<br>以下のURLがもらえます。</p><pre><code>https://note.com/{ユーザーID}/rss.xml</code></pre><h2 id="h99b702cc26">PHPを書く</h2><p>XML形式をJSONに変換する&amp;CORSを突破するために以下のPHPを書きました。</p><pre><code>&lt;?php
  $api = "https://note.com/3go_moon/rss.xml";
  $options = array("http" =&gt; array(
    "header" =&gt; "Content-type: application/json",
  ));
  $xml = file_get_contents($api, false, stream_context_create($options));
  $json = simplexml_load_string($xml);
  header( "Access-Control-Allow-Origin:*" );
  echo json_encode($json);</code></pre><h2 id="hed15d9d0c8">fetchして情報を取得する</h2><p>noteのRSSからは、記事ごとに</p><ul><li>URL</li><li>タイトル</li><li>投稿日</li></ul><p>の3つを取得することができます。<br>加えて、note自体のタイトルやURLももらえます。</p><pre><code>// src/types/note.ts

export type Note = {
  description: any[];
  guid: string;
  link: string;
  pubDate: string;
  title: string;
};

// src/components/Note.tsx  

const Note: FC = () =&gt; {
  const { data, error } = useSWR('PHPのURL', fetcher);

  let item: Note[] = [];
  let noteUrl = '';

  if (data) {
    item =  data.channel.item;
    noteUrl = data.channel.link;
  }

  return (
    ...
  );
};

export default Note;</code></pre><p>カバー画像などは取得できないようで、それぞれOGPから引っ張ってくる処理をmapで回すやり方を模索中です。。</p>

【初めてのポートフォリオ】RSSを取得してnoteを埋め込んだ【PHP/Next.js】

<p><br>専門学校の卒業が近づく中で、いい加減にPHPを学校のサーバーから脱出させないとなと思っていました。<br>試行錯誤の上やっとHerokuでデプロイすることができたので備忘録として残しておきます。<br>今回はGitHubと連携させ、コミット&amp;プッシュすることで自動的にHerokuにもデプロイされるようにします。</p><h2 id="h4cc94ef7e8"><strong>Herokuの環境をセットする</strong></h2><p>アカウントを作り、heroku CLIをインストールします。<br>公式が一番わかりやすいです。<br><a href="https://devcenter.heroku.com/ja/articles/getting-started-with-rails5#local-setup" target="_blank" rel="noopener noreferrer"><em>devcenter.heroku.com</em></a></p><h2 id="h6dce4e8353"><strong>GitHubでリポジトリを作る</strong></h2><p>GitHubへの登録に関してはスキップします。<br>いつも通りにリポジトリを作成しましょう。<br><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/6cbfb3a77b7b45d9b09298bd0c0d4582/1661510642824-9SKV2wXA2l.png" alt=""><br>この画面で待ちます。</p><h2 id="h0c89ceb05c"><strong>PHPファイルを作る</strong></h2><pre><code>hoge
└ index.php</code></pre><p>ファイル構造は以上のように、index.phpというタイトルのものを<strong>必ず</strong>含ませないといけないようです。</p><h2 id="hdd8f8d76b2"><strong>PHPファイルとGitHubを連携させる</strong></h2><pre><code>$ git init
$ git remote add origin {.gitで終わる該当リポジトリのURL}
$ git add .
$ git commit -m "プッシュ時のコメント"
$ git push origin master</code></pre><p>ターミナルに打ち込んで、リポジトリにプッシュします。</p><h2 id="hfd96d5573a"><strong>Herokuで作成したAppとGitHubリポジトリを連携させる</strong></h2><ul><li>Herokuのダッシュボード（<a style="color:inherit" href="https://dashboard.heroku.com/apps" target="_blank" rel="noopener noreferrer">https://dashboard.heroku.com/apps</a>）に行く</li><li>Create new appを選択する</li><li>App nameを入力／Choose a regionは<strong>触らずに</strong>Create Appを選択する</li></ul><p><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/c470eea0d6da46648081b82bbaab63a3/1661510962872-uJq7AHbfnm.webp" alt=""></p><ul><li>https://dashboard.heroku.com/apps/{入力したApp&nbsp;name} &gt; Deploy &gt; Deployment methodでGitHubを選択する</li><li>Connect to GitHubで、先ほど作ったGitHubのリポジトリを検索する</li></ul><p><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/96c1b014e3784d1dba465ec2fa0ef588/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-08-26%2019.55.png" alt=""></p><ul><li>リポジトリ名の右側にあるConnectを選択する</li><li><strong>Enable Automatic Deploys</strong>というボタンが出るので、選択する</li><li><strong>Disable Automatic Deploys</strong>という表示になればOK</li></ul><p>Herokuの設定は一旦終わりです。</p><h2 id="ha2d132c6ae"><strong>PHPファイルとHerokuを連携させる</strong></h2><pre><code>$ heroku git:remote -a {Herokuで入力したApp&nbsp;name}
$ git push heroku master</code></pre><p>以上で設定は完了です。<br>Heroku &gt; dashboard &gt; Appを選択 &gt; 右上の<strong>Open app</strong>でデプロイできていることを確認してください。<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p>

【PHP初学者】Herokuでdeployしてみる

<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>今回は scss の環境を作っていきたいと思います！<br>最近 scss の勉強を始めた方の参考になればと思います！<br></p><h1 id="h8a175a9b0e">前提</h1><p>nodejs がインストールされていて、バージョンが 12.2.0 以上であること<br></p><h2 id="h601f62cead">確認方法</h2><p>(mac の場合)<br>ターミナル.app を開いて下記コマンドを貼り付けて Enter を押す</p><pre><code>node -v</code></pre><p><br><br></p><h1 id="hf3dfab0e74">環境の作り方</h1><h2 id="h978c72287c">ターミナルで作業したい場所に移動し、プロジェクトを作成するコマンドを実行する</h2><p>今回は desktop に作りたいと思います！<br>下記コマンドをターミナルに貼り付けて実行してください！</p><pre><code>cd ~/Desktop/ &amp;&amp; npm create vite@latest</code></pre><p><br>実行するとプロジェクト名を聞かれるので好きな名前にしましょう！（英数字のみ）<br>今回は<code>scss-sandbox</code>という名前にします！</p><pre><code>Project name: scss-sandbox</code></pre><p><br>次は framework を使用するか聞かれますが、今回は使用しないのでそのまま Enter で ok です。<br></p><pre><code>Select a framework: vanilla</code></pre><p><br>次は TypeScript を使用するか聞かれますが、そのまま Enter で ok です。<br></p><pre><code>Select a variant: vanilla</code></pre><p><br>実行し終わった場合下記の文字が表示されていると思います！<br></p><pre><code>Scaffolding project in /Users/hogehoge/Desktop/scss-sandbox...

Done. Now run:

  cd scss-sandbox
  npm install
  npm run dev</code></pre><p><br></p><h2 id="h3b5e740131">node_modules をインストールする</h2><p>先ほど表示されたコマンドを 2 つ実行していきます。<br><br><code>change dir</code>&nbsp;コマンドでファイルに移動します。</p><pre><code>cd scss-sandbox</code></pre><p><br>下記コマンドにて<code>node_modules</code>をインストールします。<br><code>npm install</code>&nbsp;は&nbsp;<code>npm i</code>&nbsp;でも大丈夫です。</p><pre><code>npm install</code></pre><p><br></p><h2 id="hd2a4daf23e">scss と autoprefixer をインストールする</h2><pre><code>npm i -D sass autoprefixer</code></pre><p><br></p><h2 id="hc1b93f4675">設定ファイルを作成する</h2><p><code>index.html</code>がある階層に<code>vite.config.js</code>ファイルを作成する<br>下記のコードを貼り付ける</p><pre><code>import { defineConfig } from 'vite';
import autoprefixer from 'autoprefixer';

export default defineConfig({
  css: {
    postcss: {
      plugins: [autoprefixer],
    },
  },
});</code></pre><p><br><br></p><h2 id="had72373fae">css ファイルを scss ファイルに書き換える</h2><p><code>style.css</code>から<code>style.scss</code>に名前を書き換え、ファイルの中身を下記に上書きする<br></p><pre><code>html {
  background: #38bdf8;
  h1 {
    text-align: center;
    color: white;
  }
}</code></pre><p><br><code>main.js</code>の中身を下記の 1 行だけにする<br></p><pre><code>import './style.scss';</code></pre><p><br></p><h2 id="h1def57324a"><code>index.html</code>&nbsp;の内容を変更する</h2><pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="ja"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8" /&gt;
    &lt;link rel="icon" type="image/svg+xml" href="favicon.svg" /&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
    &lt;title&gt;Vite App&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;初めての環境構築！&lt;/h1&gt;
    &lt;script type="module" src="/main.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;</code></pre><p><br></p><h2 id="h2e6fe9756e">実際にローカルで確認してみる</h2><pre><code>npm run dev</code></pre><p><br><code>http://localhost:3000/</code>にアクセスしてみる<br><br>正しく表示されてたら完成〜！！<br><a style="color:#0f83fd" href="https://github.com/study-okazaki/scss-sandbox" target="_blank" rel="noopener noreferrer">途中でつまづいた場合はこちらのコードを参考にしてください</a><br></p><h2 id="h27246eb200">今後開発をする場合</h2><p>ターミナルで作業フォルダに移動(vscode 内蔵のターミナルの場合は不要)<br></p><pre><code>cd ~/Desktop/scss-sandbox</code></pre><p><br></p><h3 id="h01c9670962">開発用サーバーを立ち上げる</h3><pre><code>npm run dev</code></pre><p><br>停止する場合は&nbsp;<code>Control</code>&nbsp;+&nbsp;<code>c</code><br></p><h3 id="hebf71de885">本番用ファイルを作成する</h3><p>dist フォルダの下にファイルサイズが小さくなった html, css, js ファイルが生成されます<br></p><pre><code>npm run build</code></pre><p><br></p><h1 id="h9be0c3393d">おわりに</h1><p>いかがだったでしょうか！<br>この記事が誰かの参考になれば幸いです！</p>

5分で簡単にscssの環境を作成する

<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="hcb9dacb773">結論</h2><p>から申しますと、<strong>動的ルートマッチングができる＋他データの受け渡しもできる</strong>やり方で辿り着いたのは以下でした。</p><pre><code>// App.vue

&lt;template&gt;
  &lt;div @click="increment"&gt;できた&lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
  //略
  methods:{
    increment(){
      this.$router.push({
        name: "About",
        params: {
          id: 0,
          sendData: "test",
        },
        props: true,
      });
    }
  }
}
&lt;/script&gt;
// index.js

const routes = [
  {
    path: /About:id,
    name: "About",
    component: About,
    props: (route) =&gt; ({
      id: Number(route.params.id),
      sendData: String(route.params.sendData),
    }),
  },
];</code></pre><h2 id="hc8dec372f1">どこで躓いたのか</h2><p>動的ルートマッチングのやり方は調べればすぐに出てきましたが、加えて<strong>他データをURLに記載せずに受け渡す</strong>やり方になかなか辿り着けていませんでした。過去の僕が採用していた方法は以下です。</p><pre><code>// App.vue

&lt;router-link :to="{name:'About', params:{ sendData: "test" }}"&gt;
  テスト
&lt;router-link&gt;</code></pre><p>この要領ならば動的ルートマッチング方式に変更してもいけるやろ！と思い、この度適当に書いたのがこちらでした。</p><pre><code>// App.vue

&lt;router-link :to="{path: `/${動的なデータ}`, name:'About', params:{ sendData: "test" }}")&gt;
  できない…
&lt;router-link&gt;</code></pre><p>できませんでした。<br>結果、辿り着いたのが初めに記載した方法です。<br>他にもっといい手段があるんだろうか、、</p>

【Vue.js】動的ルートマッチングで他データの受け渡しもしようとしたら嵌った

<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】

<p>Vueが好きすぎてしがみついている亡霊です。<br>まだまだこの家に棲みたいので、棲家を快適にするために毎回行なっている設定をまとめていきます。<br>あわよくばVueに興味を持っている、新しいお客様の敷居を下げられることを願って。</p><h2 id="hed900658dc">環境</h2><ul><li><strong>vue@2.6.14</strong></li><li><strong>@vue/cli 4.3.0</strong></li><li><strong>vue router 3.1.6</strong></li></ul><p>上記がインストールできている状態で進んでいきます。<br>3xにしていなかったことに今更気がつきました。そちらでも動くとは思います。<br>そういえば、Vue CLIに新しいバージョンが出ていましたね（22/2/19）。</p><h2 id="h2e6a662ca8">ついでにバージョンの確認方法</h2><h3 id="h736be96ef7">Vue</h3><pre><code>npm list -g vue</code></pre><h3 id="he582b4a301">Vue CLI</h3><pre><code>vue --version</code></pre><p>参考サイト：https://qiita.com/Sinhalite/items/64731c0a84cadb516a24</p><h2 id="hcba6546b1b">Pugの導入</h2><pre><code>yarn add pug pug-plain-loader
// App.vue

&lt;template lang="pug"&gt; // langを指定
div#app
&lt;/template&gt;</code></pre><p>参考サイト：https://kic-yuuki.hatenablog.com/entry/2019/01/27/155050</p><h2 id="h47475b64a5">vue-headの導入</h2><pre><code>npm i vue-head --save
// index.js

import VueHead from 'vue-head';
Vue.use(VueHead);
// App.vue

export default {
  head: {
    title: {
      inner: "子ページのタイトル",
      separator: "｜",
      complement: "ページ自体のタイトル",
    },
    meta: [
      { name: "description", content: "descriptionの内容" },
      {
        name: "viewport",
        content: "width=device-width,initial-scale=1.0,user-scalable=no",
      },
      { charset: "utf-8" },
      { property: "og:type", content: "website" },
    ],
    link: [
      { rel: "stylesheet", href: "外部CSSファイル" },
      { rel: "shortcut icon", href: "ファビコン" },
    ],
    script: [
      { type: "text/javascript", src: "外部JSファイル", async: true },
      // body内に挿入したい場合は「body: true」を入れる
      // {
      //   type: "text/javascript",
      //   src: "外部jsファイル",
      //   async: true,
      //   body: true,
      // },
    ],
  },
};</code></pre><p>ページごとに指定する必要がある場合、App.vueでは記載せずそれぞれに記載します。</p><pre><code>// Example.vue

export default {
  head: {
    title() {
      return {
        inner: "子ページのタイトル",
        separator: "｜",
        complement: "ページ全体のタイトル",
      };
    },
  },
}</code></pre><p>参考サイト：https://ti-tomo-knowledge.hatenablog.com/entry/2018/06/21/104519</p><h2 id="hc6ab2c4483">Mixin</h2><p>src<br>├assets<br>├components<br>・<br>・<br>・<br><strong>├mixins</strong><br>・<strong>└Mixin.vue</strong><br>・<br>・<br>└<br>上記の箇所にファイルを作成する。</p><pre><code>// Mixin.vue

&lt;script&gt;
export default {
  data() {
    return {
      example: "example",
    };
  },
};
&lt;/script&gt;</code></pre><p>使いたいファイルでimport。</p><pre><code>// App.vue

&lt;script&gt;
import Mixin from "@/mixins/Mixin.vue";
export default {
  name: "App",
  mixins: [Mixin],
  mounted() {
    console.log(this.example);
  },
}</code></pre><p>僕は画像を全て絶対パスで書き出しているので、mixinにURLを格納するのは必須の作業です。</p><h2 id="h16d69ad3fe">buildの準備</h2><h3 id="h14639d09e7">vue.config.jsの設定</h3><p>これはVue CLI v5以前だとデフォルトでは入っていないファイルです。→新規作成し、ディレクトリの直下に配置します。<br>また、v5でもこの記載はないので追加する必要があると思われます。（未検証）</p><pre><code>// vue.config.js

module.exports = {
  publicPath: "./",
};</code></pre><h3 id="h239fb65573">routeの定数化</h3><p>localhostで確認するときは/で問題ないのに、buildするためにサーバーに準じた文字列に毎度変更するのは面倒。<br>ということで定数にします。</p><pre><code>// index.js

import Home from "../views/Home.vue";

const route = "/example/";
// localhostでは/のみ

const routes = [
  {
    path: `${route}`,
    name: "Home",
    component: Home,
  },
];</code></pre><p>これで編集・buildがしやすくなりました。</p>

【下準備】これを読んでVue.jsを書き始めよう

<p><span style="color:#222222">前回、HTML・CSS・JSの基礎知識を紹介しましたが、今回はCSSの書き方を詳しく解説したいと思います。</span><br></p><h2 id="ha6114dee00">CSS ができること</h2><p>外見です！！！！！CSSは、Webサイトの見た目を美しくするものです。<br>CSS ではHTMLを記載した内容の外見が変えることができます。<br>例えば：<br>ー<strong>文字と文字の間隔</strong>（padding / margin）<br>ー<strong>文字と背景の色</strong>（color / background-color）<br>ー<strong>動画・アニメーション</strong>（animation）<br><a href="https://developer.mozilla.org/ja/docs/Web/CSS" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/ja/docs/Web/CSS</a><br><strong style="color:#222222">もっと詳しく知りたい場合は、こちらをご参考ください</strong><br></p><h2 id="h4a3079365d">CSS の構造</h2><pre><code>セレクタ{
プロパティ:値;
}

例：
p {
 color: red;
}
//HTMLの中のpタグは文字の色が全部赤色に変える</code></pre><p>pタグ（セレクタ）の中のcolor文字色（プロパティ）をred（値）にする。<br><br><strong>クラス名・ID名を指定</strong></p><pre><code>//HTML
&lt;div id="aaa"&gt;
 &lt;p&gt;子の段落です&lt;/p&gt;    //aaaの子の段落
 &lt;div class="bbb"&gt;
   &lt;p&gt;子孫の段落です&lt;/p&gt;
 &lt;/div&gt;
&lt;/div&gt;


//CSS
#aaa,
.bbbb {
 color: blue;
} </code></pre><p>.　＝　クラス名<br>例としては.aaaaのクラス名を指定します。<br><br>＃　＝　ID名<br>#bbbbのID名を指定します。<br><br><strong>また、子孫セレクタの指定も可能です。</strong>子孫セレクタとは、親要素の中の要素のことを指します。子のすべての要素を「子孫」と言います。以下のようにid="aaa"は親要素で、#aaaの中のpタグは子要素です。</p><pre><code>//HTML
&lt;div id="aaa"&gt;
 &lt;p&gt;子の段落です&lt;/p&gt;    //aaaの子の段落
 &lt;div class="bbb"&gt;
   &lt;p&gt;子孫の段落です&lt;/p&gt;
 &lt;/div&gt;
&lt;/div&gt;

//CSS
#aaa p{
 color: blue;
} </code></pre><p><span style="color:#222222">まずは#aaaです。pはid名「aaa」内のすべてのpタグが対象になります。</span></p><pre><code>//HTML
&lt;div id="aaa"&gt;
 &lt;p&gt;子の段落です&lt;/p&gt;    //aaaの子の段落
 &lt;div class="bbb"&gt;
   &lt;p&gt;子孫の段落です&lt;/p&gt;
 &lt;/div&gt;
&lt;/div&gt;

//CSS
.bbb &gt; p{
 color: blue;
} </code></pre><p><span style="color:#222222">.bbb &gt; pはclass名「bbb」の中のpタグのみが対象になります。d名「aaa」内のpタグは入りません。</span></p><pre><code>*{
 margin: 0;
 padding: 0;
}</code></pre><p>最後＊は全部という意味で、すべての要素が対象になります。CSSの初期設定によく使われます。</p><p style="text-align:center"><br></p><p style="text-align:center"><strong style="color:#222222">次はJSの書き方について紹介します！！</strong></p>