Skip to content

Latest commit

 

History

History
88 lines (71 loc) · 5.89 KB

study_js.md

File metadata and controls

88 lines (71 loc) · 5.89 KB

JavaScript 勉強会

第一回

今日やること

  • 環境構築
    • Git
    • GitHub
    • Node.js
  • まずは JS とは何か？
  • HTML5/CSS3
  • JavaScript
  • フレームワークって？

環境構築

Git

プログラムを用いて開発を行う際に重要なのはバージョン管理です。
プロダクトを作るときに様々な機能があると思いますが、それらをいきなり完璧な状態でかつ一瞬で作成することはかなり難しいです。バグが発生したとき、今までは動いていたのに急に動かなくなってしまったら以前の動くプログラムに戻せば良い。ざっくりいうとこれがバージョン管理です。よってエンジニアは機能や UI など様々な Component にくぎりながら作成していきます。
また、Git は共同開発（チーム開発）を行う際にも力を発揮します。まぁ Git の勉強会はまたいずれしましょう。
というわけで前置きが長くなりましたが実際に Git をインストールしましょう。

  1. Git のインストール
    ますはコマンドライン（Windows の場合は command prompt / Mac の場合は Terminal）を開いてください。
    その後以下のコマンドを実行してください。
    git --version
    その後バージョンが表示されなかったらこれからの作業を行っていきます。仮にバージョンが表示されたら今回以下の作業はやりませ〜ん!omedetougozaima~su
    インストール手順
  • 以下のサイトから Git のインストーラーをダウンロードしてください
    https://gitforwindows.org/
  • ダウンロードしたらファイルを展開してください。 あとは画面の指示通りに作業をするだけです。とは言っても基本的に Next をぽちぽちするだけですが...
    しかし、ここで注意なのがPATHを聞かれるところがあります。
    Ajudsting your PATH environment
    のところですが、ここは必ず真ん中のUse Git from the Windows Command Promptこれを選択してください。間違えてもUse Git and optional Unix tools from the Windows Command Promptを選択しなようにしてください。後々泣く羽目になるかもしれません。
  • なんだかんだ終わりましたかね？では次に行きます

GitHub

GitHub は簡単に言ったら Git を web 上で可視化して見やすくしていると思っておいてください。 ほんとは違うよ〜でも今はその認識で OK！
では GitHub を使えるようにしましょう。
登録手順

  • 以下のサイトに飛んでください。
    https://github.co.jp/
  • そこでサインアップもしくは真ん中の登録ボタンを押して登録します。
  • 最後に、おそらく GitHub からメールが届くのでそこから LogIn だかなんだかします。
    以上！終わりです！
    はい次〜

Node.js

JavaScript は基本的には web 周りの技術 ですが、最近いろいろできるようになりました。たとえば ReactNative + expo を用いたスマートフォンアプリとかね！このように多種多様な使い方ができるようになりました。そこで web を開発する際どうしても必要な手順があります。されがサーバーです。以前まではこれは JS ではできませんでした。しかし、どっかの変態エンジニアが Node.js を開発しサーバーサイドもこなせちゃうようになりました。Node.js があることで様々なフレームワークやサーバー作成が可能になります。また、JavaScript には様々なパッケージが用意されており、それらをインストール、管理するのもこの Node.js です。後ほどやるフレームワークではこいつが大活躍するのでお楽しみに...
いゃ〜すいませんね〜どうしても JS を語り始めると長くなっちゃって...
本題に戻りましょう！ では実際に Node.js が使えるように PC をいじり倒します！
環境開発手順

  • 実際にまずは Node が pc に存在するか確認します。以下のコマンドを実行してみましょう。
    node --version
    このコマンドどこかで見覚えありませんか？先ほどの git と同じですね〜
    つまりここでバージョンが表示されないということはまだ Node の環境が整っていません。
    もし表示されなかったら次からの作業を行います。
  • まずは Node.js の公式にとび Node.js のダウンロードを行います。
    https://nodejs.org/ja/(できれば推奨版をサウンロードすることをお勧めします)
  • 次はファイルを展開し、Node.js をインストールします。
    ここからの作業は画面に従ってください。
  • Node.js を立ち上げてみよう
    Windows であればサーチボックスみたいなのがあると思うのでそこに
    Node.js command promptと入力し出てきたやつを立ち上げてください。そこで最初に実行したコマンドを再び実行してみましょう。node --version おそらく、インストールされている node のバージョンが表示されるはずです。
  • 合わせてnpmインストールされているかみてみましょう。
    npm --version
    npm についてはまた詳しく説明します。 では次〜ってもう開発環境の構築終わったわ〜 じゃ次のプログラムに進みましょ〜

まずは JS とは何か？

さっき環境構築の時にチョコチョコ喋っちゃったせいで特にいうことがなくなってしまった。
というわけで割愛！
次〜！

HTML5/CSS3 (HTML/CSS)

まずは簡単な表示でもしてみますか〜