2020/04/08 (更新日: 2020/10/18)

JavaScript~出力の仕方~

こんにちはkazutoです。

今回は、JavaScriptについて解説していきます。

kazugramming

JavaScriptとは主にフロント部分に動きをつける言語です。HTMLやCSSを

上記などを行い、動きを付けていきます。
動きをつけるのは、CSSでもできます。（アニメーション)

Rubyなどのサーバサイド言語とは違い、フロントメインで活躍する言語です。
所々似たようなメソッドや条件分岐がありますが、立ち位置的には違います。例えるのであれば、フォーワードとキーパーくらい違います。

Rubyとの違い❓
いきなり違いなどと、説明されても困りますよね。しかし、徐々に学習していけば、理解できるようになってきます。まずは出力の仕方を見てみましょう。

javascriptで出力する際には、

console.log(表示したい値)

となります。

console.log("表示されます")
console.log(10)

では実際に、出力結果を見てみよう。

javascriptで出力結果を確認するときは、ターミナルではなくデベロッパーツールのconsoleで確認します。

GoogleChromeが提供しているツールです。デベロッパーツールを使用すると、web開発がスムーズになります。

と上記のような理由で、よく使われるている認識があります。僕もデベロッパーツールによく助けられています。
やはり、HTML構造が複雑になってくるとCSSが「言う事を聞かない場面」があります。そんな際にデベロッパーツールを使うとCSSを上手く手懐ける事ができます。

なので,デベロッパーツールを使用することを推奨します。

※上手く出力できていな場合は、何らかのエラーが出ていると考えられるので、原因を探りましょう。そして再度、出力してみましょう。
大切なのは仮説→検証を繰り返す事です。

もし仮説を立てるのが苦手な方はこちらの記事をご覧ください。

⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️

仮説思考とは❓ワンピースの見聞色です

先ほど出力した結果が確認できると思います。JavaScriptでは、よくconsole.logを使って、実現したい挙動の通り実装できているかを確認する必要があります。
なのでまずは,console.logに慣れていきましょう。

今回はJavaScriptについてまとめました。

要約すると

となります。

JavaScriptは、記述量が多く可読性が落ちますが、他のプログラミング言語と概念自体は似ているので、具体→抽象→転用を繰り返していけば知識が定着していきます。

しかし、知識をインプットばかりではよくありません

以下のオンラインサービスを使ってアウトプットしましょう

以上,kazutoでした。