Webエンジニア目指して#19 - misokatsu

お久しぶりです。長いことRFAやらポケモンしてたのもありますがRubyやらjsやらの環境構築で知らないことが多くてかなり寄り道してました。ポケモン100hやってしまいましたが飽きることができたのでよし

更新しないながらも書き溜めてたので断片的です。切りが良いところで終わらせようとしてしまうから内容が厚いとこうなってしまいますね〜解説的になってきてしまっているので自分に必要なメモ程度、というのを意識していきます。書き残すのが目的じゃないからね

ポートフォリオちょくちょく作るか〜ってところでFontAwesome使おうとしたら仕様が変わってました。ユーザー個別で提供するようになったんですね

さて、現在のWebページはほとんどリセットCSSなるものが使われているそうです。

リセットCSSは環境ごとの表示のばらつきを解決させる事ができます。

allのmargin:0;みたいなやつですね

なんか流行りのリセットCSSがあるらしいので初心者らしくしばらくはそれを使っておきます。CSSをコピーしてきて使い回すだけですね。

というわけで今回はProgateのJavaScript Vです。

ファイルの分割

コードが増えてくると文が長ったらしくなるため、jsファイルを分割します。本文用、定義用みたいな感じで。

もちろん別ファイルになるということはそのままでは実行文がエラーを吐くので関連付けが必要です。

class定義用ファイルを分けたとして、まずはそのファイルの中で以下の文を記述します。クラス定義の後に書かないと効きません。


    class クラス名{
    }
    export default クラス名;

定義用ファイル側の記述が終わったら、次は本文側です。ファイル名の.jsは省略できます。"./"は相対パスのやつですね。同階層を指します


    import クラス名 from "./ファイル名";

この例では定義で分けましたが、ファイル間を跨いでデータを受け渡ししたい場合は全部これみたいです。定数でも関数でも。

デフォルトエクスポート

例えば、export default sampleだと別ファイルでimport sample2 from "ファイル名"　でインポートした際に、sample2をクラス名として扱います。これがデフォルトエクスポートです。

デフォルトエクスポートは１つのファイルで１つしか使えない文のため、名前付きのエクスポートをする必要があります。

つまり、基本的には

export {データ名1,データ名2}

と

import {データ名1,データ名2} from "./ファイル名"

を使うことになります。~~じゃあなんで最初にデフォルトエクスポート教えたんだ...~~

例に書いたように、複数データの受け渡しはカンマで区切って記述します。

パッケージ

パッケージなるものを導入すると、下のように実行文に色をつけたり、入力を受け付けたりすることができます。

インポート方法はさっきのとほとんど変わりません。


    例：chalk
    import chalk from "chalk";
    console.log(chalk.yellow("yellow"));


    例：readlineSync
    import readlineSync from "readline-sync"
    const name =readlineSync.question("名前を入力してください：")
    console.log("入力された名前：${name}")
    const price =readlineSync.questionInt("値段を入力してください：")
    console.log("入力された値段：${price}")

ただし、いきなりこいつを記述しても機能しません。
Node.jsの環境構築をしてプロジェクトを作成し、ターミナルにてnpmをインストールしてnpm install --save パッケージ名
のように命令してから使えるようになります。環境構築についてはメモを残せるほど理解してないので割愛...

さあこの辺でNode.jsでnpmを使ってプログラミングする準備ができたのかな？次回も引き続きjsの勉強といきたいところですが、環境構築しててlinuxの知識足りないなあと思ったので一旦寄り道します。ではでは