見出し画像

Java Scriptの基本その1　Scriptの書き方

フルスタコマ

イントロダクション

JavaScriptを学ぶことはとても重要です。なぜなら、JavaScriptはウェブ開発の基盤となる言語であり、動的でインタラクティブなウェブページを作成するための鍵だからです。また、バックエンド開発やモバイルアプリ開発にも利用されるため、スキルの幅が広がります。さらに、JavaScriptは学びやすく、実際に使えるツールが豊富にあります。これからのキャリアにおいて、JavaScriptの知識は必ず役立つものとなるでしょう。一緒に楽しく学びましょう！

Java Scriptの駆け出し

下記はHTML、CSS、JavaScriptで書かれたコードです。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Java Scriptの基礎001</title>
  </head>
  <body>
    <style>
      body {
        height: 100vh;
        display: flex;
        align-items: center;
        background: linear-gradient(to top left, #282ab4, #6f9dd5);
      }
      h1 {
        font-family: sans-serif;
        font-size: 50px;
        line-height: 1.3;
        width: 100%;
        padding: 30px;
        text-align: center;
        color: white;
      }
    </style>
    <script>
      /*"Hello World"をアラートで出す*/
      let helloWorld = "Hello World";
      if (helloWorld === "Hello World") alert("Hello World");
      /*console logに計算結果を出す */
      console.log(1 + 2 + 3 + 4);
    </script>
    <h1>Java Scriptの基礎その1 インラインに書いてみよう</h1>
  </body>
</html>

構造1: HTMLの基本構造

最初に、HTMLドキュメントの基本構造を理解しましょう。このコードは、HTML5の宣言から始まり、<html>, <head>, <body> の3つの主要セクションで構成されています。

  • <!DOCTYPE html> はHTML5ドキュメントであることを示します。

  • <html lang="en"> はドキュメントの言語を指定し、ここでは英語です。

  • <head> セクションにはメタデータが含まれ、ページのタイトルや文字セットの指定などが含まれます。

    • <meta charset="UTF-8"> は文字エンコードを指定し、UTF-8を使用します。

    • <meta name="viewport" content="width=device-width, initial-scale=1.0"> は表示領域の設定を行い、レスポンシブデザインをサポートします。

    • <title>Java Scriptの基礎001</title> はブラウザタブに表示されるページタイトルです。

これらの設定は、ウェブページの基本的な表示と動作を制御する重要な要素です。

構造2: CSSでのスタイル設定

次に、HTML内に埋め込まれたCSSを見てみましょう。これは<body>セクション内に直接記述されており、ページの外観を設定しています。

  • <style> タグ内でCSSを定義しています。

  • bodyセレクタでは、ページ全体のスタイルを指定しています。

    • height: 100vh; はページの高さをビューポートの高さに設定します。

    • display: flex; はFlexboxレイアウトを適用し、中央揃えを実現します。

    • align-items: center; で垂直方向の中央揃えを行います。

    • background: linear-gradient(to top left, #282ab4, #6f9dd5); は背景にグラデーションを適用しています。

  • h1セレクタでは見出しのスタイルを設定しています。

    • font-family: sans-serif; でフォントを指定します。

    • font-size: 50px; でフォントサイズを大きく設定します。

    • line-height: 1.3; で行間を調整します。

    • text-align: center; でテキストを中央揃えにします。

    • color: white; で文字色を白に設定します。

これにより、ページ全体が視覚的に整ったレイアウトになります。

構造3: JavaScriptの動作

最後に、JavaScriptコードの解説です。HTML内の<script>タグ内に記述されています。

  • let helloWorld = "Hello World"; は文字列 "Hello World" を変数 helloWorld に代入します。

  • if (helloWorld === "Hello World") alert("Hello World"); は条件文で、helloWorld の値が "Hello World" であればアラートを表示します。

  • console.log(1 + 2 + 3 + 4); はコンソールに計算結果（10）を表示します。

これにより、ユーザーは「Hello World」のメッセージをアラートとして受け取り、さらにコンソールには計算結果が表示されます。このように、JavaScriptを使ってページに動的な動作を追加できます。

JavaScriptを外部ファイルに移動する方法

今回の例では、JavaScriptをHTML内に直接書く「インラインスクリプト」として実装しています。インラインスクリプトは、小規模なスクリプトや簡単な動作を実現する場合に便利ですが、スクリプトが大規模になると管理が難しくなります。そのため、スクリプトを外部ファイルに分ける方法が推奨されます。

外部ファイルに分けるメリットには、以下の点があります。

  • コードの再利用: 一度作成したスクリプトを複数のHTMLファイルで使用できます。

  • メンテナンス性向上: スクリプトが分散せず、特定のファイルで一括管理できるため、修正や追加が容易です。

  • 読み込み速度の向上: 外部スクリプトはキャッシュされるため、次回以降の読み込みが速くなります。

外部ファイルにJavaScriptを移動する手順は以下の通りです。

  1. JavaScriptコードを外部ファイルに移動する:

    • 新しいファイルを作成し、例えば script.js という名前を付けます。

    • インラインスクリプトの内容を script.js に移動します。

let helloWorld = "Hello World";
if (helloWorld === "Hello World") alert("Hello World");
console.log(1 + 2 + 3 + 4);

HTMLファイルに外部スクリプトを読み込む:

  • <script>タグを用いて、外部ファイルをHTMLにリンクします。

<script src="script.js"></script>

これにより、JavaScriptコードが外部ファイルに分離され、HTMLがよりクリーンで管理しやすくなります。次回は、外部スクリプトの更なる活用方法を探ってみましょう。

Githubでも公開してるよ！

先ほどのコードはGithubで公開しているよ。
ここ見てね！


この記事が気に入ったらサポートをしてみませんか？