Terralien

Terralien

ビルドツールViteは「素早い」らしい

viteって何？フランス語で素早いという意味らしいです。その名の通り他に比べてかなり高速なビルドツールです。 他にもESMを使用したHot Module Replacement（HMR）で超高速に変更箇所をブラウザに適用してくれます。 まあとにかく色々速いんです。 そもそもビルドツールとは？ Node.jsのコードはそのままでは動かないのでビルドして動くプログラムを作成します。 これをビルド（build）といいます。 ビルドをするために使用するものがビルドツールです

Terralien

    • JSだとかをフォーマッターPrettierを使って整形する

      こんばんは。インフラ・フロントエンド・バックエンドの知識を広く浅く齧ってる寺です。 JavaScript開発環境において必須と言われるESlintとPrettier、前回ESLintをなんとなく学んだので今回はPrettierについて勉強したいと思います。 正直最初に聞いたときは（プリキュア？）と思いましたが言いませんでした。空気読んだ。 前回のあらすじESLintというのは構文間違いなどをチェックしたり修正したりできるツールです。 それでPrettierって？英単語

      Terralien

      • CSSだいたい覚えたのでSASSをインストールしてみる

        仕事でCSSいじるにも関わらずCSSなんとなく苦手マンです。 個人開発やチーム開発でたまーにフロントエンド担当するので、構造的にやりやすいとの噂のSassをインストールしてみます。 SassとはSyntactically Awesome StyleSheet略してSassです。読み方はサスもしくはサースです。 なんとなく前者で呼んでます。 CSSを応用的に扱えるメタ言語（他言語を扱う言語）という位置づけです。 なんかすごいCSSくらいに覚えておけばいいんじゃないでしょう

        Terralien

        • リンターESLintでJavaScriptを修正したりする

          こんにちは。フロントエンド・バックエンド・インフラ（特にAWS）の知識をつまみ食いしてる寺です。 JavaScript開発環境ではESLintとPrettierが必須だよと言われてなんとなく入れているのですが、いずれも一体何なのか理解してなかったので勉強してみました。 前回学んだことNode.jsについて前回はトランスパイラbabelについて学びました。 今回学ぶことフロント開発環境でJavaScriptを扱う際に必須とも言えるESLintについて学びます。 ESLi

          Terralien

        ビルドツールViteは「素早い」らしい

        Terralien

          トランスパイラbabelってなんなんだ？

          Reactでチーム開発している中でしれっと使っていたbabelというものがなんなのかよくわかってませんでした。 多分コンパイルするなにかなんだろうという程度の知識でしたので理解したいと思います。 babelとはJavaScriptトランスパイラです。 トランスパイラって？コンパイラとどう違うの？ まずコンパイルというのはC言語をアセンブリなど異なる水準の別言語に変換することをいいます。 この場合の水準とは人に可読な水準とコンピューターが理解する水準と考えて下さい。

          Terralien

          トランスパイラbabelってなんなんだ？

          Terralien

          モジュールハンドラWebpackとは何かをEnvaderで学んだ

          React開発環境でなんとなく使っているWebpackというものがさっぱりわからなかったので勉強してみました。 WebpackとはNode.jsのJavaScript環境においてファイルなどを束ねる役割を持つモジュールハンドラ。という説明がされています。 モジュールハンドラって？ モジュールハンドラでググるとWebpackが出てくる盥回し状態ですが、要するにHTMLやCSS、jsファイルや画像といったモジュールをひとまとめにしてくれる仕組みです。 昔はこういうJavaS

          Terralien

          モジュールハンドラWebpackとは何かをEnvaderで学んだ

          Terralien

          nodeパッケージ管理システムyarnの使い方

          こんにちは。突然Reactを触ることになってなんとか頑張っているほぼ開発未経験な人です。 前回はパッケージ管理システムであるnpmについて学んで無事React開発の環境周りのことはできるようになりました。 今回はもう一つのパッケージ管理システムであるyarnを学んでみようと思います。使用する環境は今回もEnvaderです。 前回の記事はこちら yarnとはmeta(Facebook）社が開発。 後発だからかnpmと比較していくらか早くnpmとも互換性あり。 インストー

          Terralien

          nodeパッケージ管理システムyarnの使い方

          Terralien

          急にReactやることになったのでNode.jsとnpmをインストールすることに

          JavaScript、それも古い方のしか扱ったことがない人間が急にReactを扱うことになったので急遽Node.jsを導入することとなりました。 この記事はNode.jsとそのパッケージ管理システムであるnpmのインストールで学んだことをまとめます。 Node.jsというのはJavaScriptの実行環境それまでブラウザ上で動作していたJavaScriptをパソコン上で動作させるための実行環境です。 サーバーサイドの実行環境として用いられ、その後ライブラリなどが充実するに

          Terralien

          急にReactやることになったのでNode.jsとnpmをインストールすることに

          Terralien