ReactでのTypeScriptとScssを使用したプロジェクト作成ガイド

ReactでTypeScript、Scss(Sass)を使用したプロジェクトの作成方法、必要のないファイル削除して最小構成なプロジェクトを作成。

プロジェクトの作成

npxでtypescriptのテンプレートを使用してプロジェクトを生成する

プロジェクトを作成したいディレクトリでコマンドプロンプトまたはVS codeのターミナルを使用し、以下のコマンドを打ち込みます。

npx create-react-app プロジェクト名 --template typescript

上記の--template typescriptがTypeScriptを使用するためのオプションです。

例）

npx create-react-app react-redux-test --template typescript

1から2分程度で作成が完了し、

We suggest that you begin by typing:

  cd react-redux-test
  npm start

Happy hacking!

と表示されたら成功！！

プロジェクトを起動

cd プロジェクト名　　　#カレントディレクトリの移動
npm start            #プロジェクトの起動

例)

cd react-redux-test
npm start

と入力し、

You can now view react-redux-test in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.1.8:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully
No issues found.

と表示されたら成功

scss(sass)の導入

私のプロジェクトではスタイルにscssを使用しているので使えるようにします。

npm install sass

cssファイルの拡張子変更

scssを使用できるようになったので、各スタイルシートの拡張子名をscssに変更します。

src/App.css →　src/App.scss

src/index.css →　src/index.scss

プロジェクトの整理(最小構成)

必要のないファイルの削除

  • public/favicon.ico
  • public/logo192.png
  • public/logo512.png
  • public/manifest.json
  • public/robots.txt
  • src/App.test.tsx
  • src/logo.svg
  • src/reportWebVitals.ts
  • src/setTests.ts

各種ファイルの中身を整理する

App.tsx

import React from 'react';
import './App.scss';

function App() {
  return (
    <div className="App">
    </div>
  );
}

export default App;

App.scss
中身をすべて削除

index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.scss';
import App from './App';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

index.scss
中身をすべて削除

index.html

<!DOCTYPE html>
<html lang="jp">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />

    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

最終的なプロジェクトのディレクトリ構造

プロジェクト名
    |-- node_modules
    |-- public
    |   `-- index.html
    |-- src
    |   |-- App.scss
    |   |-- App.tsx
    |   |-- index.scss
    |   |-- index.tsx
    |   `-- react-app-env.d.ts
    |-- README.md
    |-- package-lock.json
    |-- package.json
    `-- tsconfig.json

これでプロジェクトの作成は完了です！ お疲れさまでした！

プログラミング初心者一つ目の言語はこれ！おすすめ言語など解説！

はじめに

プログラミングをやってみたいけどなんだか難しそう。何から勉強したらいいのかわからず最初の一歩が踏み出せない。言語を決めて勉強しようといわれてもどんな言語を勉強するればいいのかわからない。

そんな悩みのある方はたくさんいると思います。この記事ではプログラミングを始める最初の一歩を後押し、応援できたらと思います！

 

目次

 

 

プログラミングってそもそも何？

現在ありとあらゆるところでプログラミングは使われています。でも、そもそもプログラミングってどういうものなの？と思いますよね。誤解を恐れずに一言でいうと、

アプリケーションを作ること。

です。世の中にあるアプリ（この記事を読んでいるブラウザなど）はすべてプログラムで動いています。そのプログラムを書くことを、プログラミングといいます。

この後でも解説しますが、各アプリに特化した、作りやすい、プログラミング言語があります。なので大量のプログラミング言語があるんです。

 

 

言語って何？選び方は？

ひとつ前の章で大量のプログラミング言語があると説明をしました。

ですが、初学者でその大量のプログラミング言語から選んでくださいと言われても困るのは当たり前です。

この大量のプログラミング言語にどのようなものがあるのか、選ぶコツなどを解説していきます。

 

どんな言語があるの？

ここでは現在で主に使われているメジャーな言語を紹介します。初学者向けに解説しますので、ここに出てくるものがすべてではありません。（ここで書ききれないほどあります）

ここではHTMLやCSSなどはプログラミング言語として取り上げません。

1.Python（パイソン）

Python icon by Icons8

Pythonはインタープリタ型言語で、高水準汎用言語に当てはまります。

インタープリタ型とはコンパイルというものをせずに動かすことができる言語です。（ここではそんなものがあるんだなくらいで大丈夫です。）

 

Pythonでできることの例は以下の通りです。

など、他にも多くのことができることで有名です。

 

 

2.JavaScript(ジャバスクリプト)

JavaScript icon by Icons8

JavaScriptも先ほど紹介したPythonと同じくインタープリタ型言語です。

Javaという言語と名前が似ていますが完全に別物です。

この言語はHTMLとCSSだけでは静的な画面（動かない）しか作れなかったのですが、その画面に動きをつけたりすることのできる言語です。主にフロントエンドで使われる言語ですが、バックエンドを作成する機能もあったりします。（フロントエンド：画面に表示するものなど。　バックエンド：データのやり取りなどを行うサーバ側。）

 

JavaScriptでできることの例は以下の通りです。

  • 文字や画像などのアニメーション
  • 非同期通信
  • ポップアップの表示
  • webサイト、webアプリの作成

などができ、フロントエンドには必須の言語となっています。

3.C/C++（シー/シープラスプラス）

C++ icon by Icons8

c/c++はとても歴史のある言語で、c言語からの派生形がいくつもあります。C++もそのうちの一つです。

この言語はできることが多く仕事でつかえるレベルまで勉強しようとすると、とても学習コストが高いです。ですが、書いていて面白い言語ですし、コンピュータの内部まで勉強できるのでぜひ挑戦してみてほしいです。

 

C/C++でできることの例は以下の通りです。

  • OS開発
  • ソフトウエア
  • 組み込み
  • ロボット

などC言語はとても処理速度が速いのでOS開発などでも使われます。

 

 

4.Java(ジャバ)

Java Coffee Cupのロゴ icon by Icons8

JavaもC言語と同じく非常に歴史の長い言語です。この言語Java仮想マシンと言われるプラットフォームで動くのでWindowsでもmacでもLinuxでも動きます。さらに現在とても普及しているオブジェクト指向プログラミング言語ですので、この言語を勉強すると2つ目の言語の学習がとても楽になります。この言語も学習するのが比較的難しいといわれています。ですがこの言語を勉強しておくと、あとでほかの言語が必要になったときに楽に学習できるので個人的にとてもおすすめの言語です。

 

Javaでできることの例は以下の通りです。

などとても多くのことができる言語です。

 

選び方は？

今現在作りたいものがある方は先ほど説明した言語と照らし合わせて言語を決めてもいいと思います。ですが、あまりメジャーではない言語で初めから勉強をすると、調べてもあまり解決方法が出てこなかったり、人に聞いてもわからないという問題が発生します。なのでより多くの人が使っている言語を勉強することを強くお勧めします。

このブログでは今後Javaについての講座を投稿していきます。ぜひ興味のある方は読んでみてください。

 

 

迷ったらこの言語！

作りたいものが無い、調べてみたけど結局何がいいのかわからない。という方たくさんいると思います。なので個人的にお勧めする言語を紹介します。

その言語は...

Java

です！

理由をいくつか説明します。

  • ネット上に情報がたくさん載っている
  • 言語によらないプログラミングの基礎を勉強できる
  • フレームワークやライブラリが豊富

 

ネット上に情報がたくさん載っている

初学者がプログラミングを勉強するにあたって、簡単に情報が手に入るというのは一番重要だと個人的に考えています。勉強始めたての人が行き詰って調べまくるのは当然です。プロの方であっても調べます。

それなのに情報があまりないとやる気もモチベもダダ下がりです。なのでネット上に情報がたくさん載っているということはとても重要なことなのです。

 

言語によらないプログラミングの基礎を勉強できる

プログラミング言語はたくさんあると説明しましたが、それぞれが全く別の書き方、考え方をするわけではありません。もちろん全く同じではないですが基本の考え方は同じです。

順次、選択、繰り返し　という言葉はどの言語でも当てはまります。また、変数の代入出会ったりif文の考え方for文の考え方もほとんど同じです。Javaは歴史が長くJavaに影響されてできた言語もたくさんあるので、プログラミングの基礎を学ぶにはもってこいの言語です。

 

フレームワークやライブラリが豊富

勉強を進めていくと0から100までプログラムを書くということは現在ではあまりしないということを知ると思います。それは便利なライブラリやフレームワークがあるからです。その便利グッズがたくさん開発されているということはそれだけ需要があるということです。ほかの言語を勉強するための踏み台としてJavaを勉強するのもいいですし、そのままJavaエンジニアになることだってできますし、需要もあります。

 

 

 

おわりに

この記事を書いている自分も始め、どの言語を勉強すればいいのか全く分からず、いろいろなサイトを見ているだけでした。ですがJavaを勉強したことをきっかけにプログラミングとはどういうものなのか、オブジェクト指向とはどのような考え方なのか、が少しずつ分かり始めました、初めの一歩が踏み出せればあとはやるだけです。ぜひプログラミングの勉強をがんばってください！

 

このブログでは今後、Javaの学習について投稿していく予定です。基本文法から、実際にウェブアプリを開発する、デザインパターンを勉強するなどを発信していこうと思います。