初めに

会社の先輩方が、モダンなJavascriptフレームワークについての記事を書いているのを見て
全くのプログラミング初心者の私が、モダンなJavascriptフレームワークを触れるのか、また触れてみた感想や思ったことをまとめていこうと思います。
今回参考にした記事は、以下の3記事です。
３記事ともにフレームワークの特徴、セットアップの流れなどを初心者にわかりやすくまとめてあります。

Nuxt.js :
https://qiita.com/masato5579/items/c6c4a3dad9972a16cddc
Next.js :
https://qiita.com/HiromichiHayashi/items/49b8c58f702a3379d562
svelte.js :
https://qiita.com/Nyuto1995/items/c21e5e0801b41bbfe927

各フレームワークで作成したアプリ

実装内容

今回は初心者が簡単にフレームワークをいじれるのかを検証するため、実装内容については超絶簡単なものにしていきます。
参考にした記事をもとにNuxt.js、Next.js、svelte.jsのセットアップを行い、カウンターアプリを作成して、-1以下になると背景色が赤色になるというプログラムを書いていきます。マジで簡単なアプリです。

各フレームワークでの表示確認

Nuxt.js、Next.js、svelte.jsで下記のように簡単なカウンターアプリを作成しました。

各フレームワークのソースコード

Nuxt.js

<template>
  <div>
    <div v-bind:style="{backgroundColor: count < 0 ? 'red':'white'}">
      {{ count }}
    </div>
    <button @click="incrementCount">+</button>
    <button @click="decrementCount">-</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      count: 0, 
    }
  },
  methods: {

    incrementCount() {
      this.count++
    },

    decrementCount() {
      this.count--
    },
  }
}
</script>

Next.js

import { useState } from 'react';

const app = () => {
    const [count, setCount] = useState(0)
    const incrementCount = () => {
        setCount(++count)
    }
    const decrementCount = () => {
        setCount(--count)
    }
    return (
        <div style={{backgroundColor: count < 0 ? 'red' : 'white'}}>
            <div>
                <p>{count}</p>
            </div>
            <button onClick={decrementCount}>-</button>
            <button onClick={incrementCount}>+</button>
        </div>
    )
}
export default app

svelte.js

<script>
 let count = 0;

 function incrementButton () {
    count += 1; 
 }
 function decrementButton () {
     count -= 1;
 }
　
</script>
<div>
</div>

<main>
    <div style={count < 0 ? "background-color:red;" : ""}>
        {count}
    </div>
 <button on:click={incrementButton}>+</button>
 <button on:click={decrementButton}>-</button>  
</main>

<style>

</style>

プログラミング初心者がモダンなJavascriptフレームワークを触ってみた感想

プログラミング初心者がモダンなJavascriptフレームワークを触ってみた感想としては、どのフレームワークも環境構築が非常に簡単で、初心者としても取っ掛かりやすかったです。
なんですが…実際に実装してみると、いじれることはいじれますがフレームワーク特有のルールを習得する以前に、超絶当たり前なんですが、Vue.js、React.js経験者にかぎり学習コストが低くなり、ありがたみを感じれるのだと感じました。(恩恵を受けられるようにこれからも勉強を頑張っていきたいです。)

プログラミング初心者がモダンなJavascriptフレームワーク触ってみた!!

初めに