2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

qnoteAdvent Calendar 2021

Day 20

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

Last updated at Posted at 2021-12-20

#初めに
会社の先輩方が、モダンなJavascriptフレームワークについての記事を書いているのを見て
全くのプログラミング初心者の私が、モダンなJavascriptフレームワークを触れるのか、また触れてみた感想や思ったことをまとめていこうと思います。
今回参考にした記事は、以下の3記事です。
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で下記のように簡単なカウンターアプリを作成しました。
スクリーンショット 2021-12-12 14.27.18.png
スクリーンショット 2021-12-20 23.42.08.png

##各フレームワークのソースコード
###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経験者にかぎり学習コストが低くなり、ありがたみを感じれるのだと感じました。(恩恵を受けられるようにこれからも勉強を頑張っていきたいです。)

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?