youtarow

駆け出しのフロントエンジニアです。 現在は主にjsに関する事を勉強しています。

youtarow

駆け出しのフロントエンジニアです。 現在は主にjsに関する事を勉強しています。

  • React/Next

    Reactを使用したアプリ構築の備忘録を記載します。

  • Nuxt/Contentful/Netlifyでブログアプリ

    Nuxt/Contentful/Netlifyを使用してブログアプリを作成するまでのお話。 主に環境構築をメインにお話していきます。

  • JavaScript

    JSのプログラムについてお話します。

  • Vue.js

    Vue.jsで予め用意されている機能についての検証や使用方法をお話します。

Next × TypeScript の環境構築

開発環境・Mac Book Air（2015年） ・Node v14.4.0 ・Yarn 1.22.10 ・Vs Code Next.jsNext.js（今後はNextと略称します。）とは、Facebook社によって開発されたReact.jsをベースに作られたWebフレームワークです。 Vue.jsでいうNuxt.jsみたいな感じですね。 TypeScriptマイクロソフト社が開発したオープンソース言語で、 型定義できるJavaScriptです。 JavaScriptは現

youtarow

    • Nuxt.js/GitHubをNetlifyと連動させる

      前回は、Nuxt.jsをインストール後にGitHubで管理できるように環境構築を進めたことを書きました。今回は、GitHubへpushしたら自動でNetlifyに反映できるようにした記事を書きたいと思います。 > 前回の記事 1. Netlifyのアカウント作成> Netlifyページ ■ 下記のページに移動し、右上の「Sign Up」を押し、自身がコード管理で使用しているサービス（GitHub,GitLabなど）のボタンを押しましょう。 ■ 下記のページではGitHu

      youtarow

      • Nuxt.jsをGitHubで管理する

        Nuxt.js/Netlify/Contentfulでブログアプリを作るべく、環境構築を進めています。前回は、Nuxt.jsをインストールするまでを書きました。 今回は、Nuxtをインストール後にGitHubで管理しつつ、Netlifyと連動させたいと思いました。まずは、Nuxtを入れた後のGitHubで管理出来るまでを記載したいと思います。 > 前回の記事 1. Nuxt.jsをインストールしておくhttps://note.com/youtarow/n/naebdabe3

        youtarow

        • Nuxt.jsのインストール手順

          環境詳細 ■ MacBook Air(2015年) ■ macOS Catalina 1. まずはNode.jsをインストール■ Node.jsとは JavaScriptは本来サーバーサイドで動くプログラムではありませんが、 Node.jsはサーバサイドでも動くJavaScriptと呼ばれ、その中でも代表的なのがNode.jsです。現状は、他にそこまで有名なものもないので、「Node.js = サーバサイドJavaScript」だと認識しておけば良いと思います。 Vue系の

          youtarow

        Next × TypeScript の環境構築

        youtarow

        マガジン

        • React/Next
          1本
        • Nuxt/Contentful/Netlifyでブログアプリ
          3本
        • JavaScript
          0本
        • Vue.js
          4本

        記事

          Vue watchについて

          watchとはvue.jsで使われるwatchとは監視プロパティとも呼ばれ、あるデータが変更された際に処理を実行したいときに用いられます。 例えば、下記のようなフォーム内のエラー表示に使用するなどの使い方ができるかと思います。 ※この記事はvue-cliを使用した説明をしています。 watchを使用したアプリケーション様々なプログラムに使用されていますが、フォームに使用したものがわかりやすいなと感じました。 フォームだけでなく、契約したいプランやコースの検索をする際に、入力

          youtarow

          Vue watchについて

          youtarow

          Vue computed/methodsの2つの違い

          computed computedは、一度計算した値をキャッシュする効果を持っています。同じプロパティを呼び出された際は、以前キャッシュされたデータを返すだけになります。キャッシュが削除（ブラウザ更新など）されると新たに計算され値を算出します。 methods methodsは、キャッシュされないのでプロパティを呼び出されるごとに再計算されます。再計算をし続けるという点においては、メモリ負担をかけることになりますので使い所に注意が必要となるでしょう。 検証方法マスランダム

          youtarow

          Vue computed/methodsの2つの違い

          youtarow

          vue slot機能を複数で使用する方法

          slot機能は単体で使用するのはもちろん、複数の箇所で使用することが可能です。例えば、テンプレート内に変更したい文字列が2箇所あった場合を想定して、検証していきたいと思います。 （参照：https://future-architect.github.io/articles/20200428/） ※ 本記事はvue-cliを使用しています。 下記のテンプレート内に変更点を2箇所ご用意しました。 // 親コンポーネント// src/components/myCom．vue<t

          youtarow

          vue slot機能を複数で使用する方法

          youtarow

          vue slot機能について

          slot機能について、使用していて全然理解していないなと思い深堀りしてみることにしました。 ※ 本記事ではvue-cliを使用しています。 slotとは親となるコンポーネントから、子コンポーネントの一部を差し替えることのできる機能となっています。 （参照：https://future-architect.github.io/articles/20200428/） <p>私の名前は江頭2:50です</p> こちらの文字列の一部（江頭2:50）をslot機能を使用して変更を

          youtarow

          vue slot機能について

          youtarow