React開発に必要なJavaScriptの基本文法を紹介

※弊社のエンジニア記事になります。

はじめに

福岡でバックエンドエンジニアをやっています、りっきーです。

最新、社内勉強会にて React コンポーネントを作成したり、プライベートで NextJs + React でポートフォリオ作成などしています。

React 開発では JavaScript を使用するのですが、今回は React を早く理解するために、最低限必要な JavaScript の基本文法を紹介したいと思います。

JavaScript・TypeScriptの基本文法紹介

React開発では JavaScript、TypeScript の様々な記法、ルールを駆使して開発します。

早速ですが、React 開発に必要な JavaScript、TypeScript の基本的な記法・ルールを紹介します。

変数宣言

const を使用して上書き・再宣言不可能にすることで、最初に代入した値が変わらないことが担保され、コードの理解が容易になります。React では基本的に const を使用するようです。

// 上書き可能、再宣言可能var hoge = "var変数1";
hoge = "var変数2";
var hoge = "var変数2";

// 上書き可能、再宣言不可能
let hoge2 = "let変数";
// 上書き、再宣言不可能
const hoge3 = "const変数";

アロー関数

ES2015 で取り入れられた関数の記法です。

アロー関数には省略記法がいくつかあります。省略されると、はじめのうちはなんのこっちゃ〜、となっていましたが=>があると関数なんだということを意識すれば次第に慣れてきて便利に感じるようになりました。

//今までの関数
function hogeFunction(value) {
    return value;
};

// アロー関数
const hogeFunc = (value) => {
    return value;
};

省略記法

// 1つ目
// 引数が1つの場合のみ、かっこを省略できる
const hogeFunc = value => { 
    return value;
};

// 2つ目
// return1文のみの場合、{}とreturnを省略できる
// 引数をそのままreturn
 const hogeFunc = value => value;

↓記事の続きはこちら↓

https://rightcode.co.jp/blog/rightcode-life/office-relocation-fukuoka

もっとワクワクする仕事をしたいあなたへ

現在、ライトコードでは「WEB」「スマホアプリ」「ゲーム」エンジニア、「デザイナー」「WEBディレクター」「営業」などを積極採用中です！

有名WEBサービスやアプリの受託開発などの企画、開発案件が目白押しの状況です。

• もっと大きなことに挑戦したい！
• エンジニアとしてもっと成長したい！
• モダンな技術に触れたい！

現状に満足していない方は、まずは、エンジニアとしても第一線を走り続ける弊社代表と気軽にお話してみませんか？

ネット上では、ちょっとユルそうな会社に感じると思いますが（笑）、
実は技術力に定評があり、沢山の実績を残している会社ということをお伝えしたいと思っております。

• ライトコードの魅力を知っていただきたい！
• 社風や文化なども知っていただきたい！
• 技術に対して熱意のある方に入社していただきたい！

一度、【Wantedly内の弊社ページ】や【自社サイト】をのぞいてみてください。

【wantedlyぺージ】https://www.wantedly.com/companies/rightcode

【自社サイト】https://rightcode.co.jp/

【採用募集】https://rightcode.co.jp/recruit（こちらからの応募がスムーズ）

社長と一杯飲みながら話を聞きたい方は → https://rightcode.co.jp/gohan-sake-president-talk