npm

Node.jpの特徴 

・非同期処理により処理が速い

・「V8」エンジンを利用されているため処理が非常に速い

・シングルスレッドのためメモリ消費の効率が良い

 

Node.jsのメリット

・大量のアクセスにも耐えることが可能かつ高速処理を実現

・メモリ消費量を抑えることが可能

・読みやすいプログラムを設計することが可能

・フロントエンドからサーバーサイドに至るまでJavaScriptだけで記述可能

 

 

パッケージ

プログラムがたくさん入ったフォルダーのようなもの。

世の中のパッケージを使えば自分で一からコードを書かなくとも高度な機能を実現することができる。

 npmにとってパッケージというのはpackage.jsonというファイルの親ディレクトリに含まれるファイル群である。

 

NPMとは

 

npmの正式名称は、Node Package Manager(Node .jsnのパッケージを管理するツール)

NPMと名のつくものは2つ

・オンライン上のパッケージレジストリ、つまり世界中の開発者が作ったNode.js パッケージが集められた場所

・Node.jpに付属している、パッケージを操作するためのCLIコマンドラインインターフェイスコマンドラインから実行できるプログラム)パッケージを作成したり、NPM 上のパッケージをローカルにインストールしたり、自分のパッケージを NPM に公開したりと、Node.js の開発に欠かせないツール

 

※ Node.jp・・・JavaScript実行環境

        OSの機能にアクセスするプログラムを組むことができる。

        つまりブラウザ上で動作していた時はできなかった自由なファイ

        ルの読み書きやネットワーク通信などのOSの機能を扱える。

        大量の同時接続をさばけるようなネットワークアプリケー

        ションを構築することを目的として設計されています

 

Node.jsを使う目的

1.新しい仕様のJavaScriptやTypeScriptでクライアントサイドのプログラムを

書きたい

2.Webアプリケーションを作りたい

3.モバイル/デスクトップ用のアプリケーションを作りたい

 

 

Node.jsで使いたいライブラリがある場合、jsファイルをダウンロードしてきて<script src="xxx.js"></script>とはせずにnpmを使ってインストールします。

 

□npmの特徴

JavaScriptで書かれたプログラム

・node.jsパッケージ管理システム

・パッケージのバージョン管理・インストール補助に使用

・サーバーサイドで動く

 

□npmの主な機能

・ヘルプ機能

・バージョン管理機能

・パッケージのインストール

・インストール済みのパッケージ一覧表示

・パッケージのアップデート

・パッケージのアンインストール

 

 

 

 

 

npm install のコマンドを打つと何をしてくれるのか

 

npm install (パッケージ名なし)

パッケージ名なしで npm install を実行すると、package.json と package-lock.json に基づいて dependency が全てローカル(node_modules)にインストールされる。

 

これを実行する必要があるのは、開発中のパッケージのソースコードだけ手元にある状態でdependencyがインストールされてない時である。

これに当てはまるのは以下のケース↓

GitHub上のパッケージを開発/実行したいので、新しいマシン常にclone してきた

・create-react-appなどの、新しくプロジェクトを生成するツールを使ってパッケージを作成した

・node_modules内のファイルを謝っていじってしまい、一旦node_modulesごと削除した

 

※  dependency・・・プログラミングにおけるデザインパターンの一種でオブジェクトを成立させるために必要となるコード実行時に注入してゆくという概念のこと

 

npm install(パッケージ名)と打ったら何が起こるか

 

指定したパッケージがローカルにインストールされる。

これを使うのは、「dependencyは既にすべてインストールされており、新しく dependency を追加したいとき」である。

 

npm install したパッケージをソースコード中で使う

 

□npmの代表的なパッケージ例

Express

Node.jsのための、高速で軽量でオープンなWebフレームワーク

[使い方]

①初期化を行う

mkdir myapp
cd myapp
npm init

1行目の mkdir myapp では、Expressの実装ファイルを入れるmyappディレクトリを作成

2行目の cd myapp では、myapp ディレクトリに移動

3行目の npm init では、myappで初期化処理

 

②Expressを実際にインストールする

npm install express

 

③Expressで実装する

index.jpソースコード

var express = require('express');
var app = express();
app.get('/', function (req, res) {
  res.send('Hello World!');
});
app.listen(3000, function () {
});

 

表示結果

Hello World!

1行目のvar express = require(‘express’);では、expressをrequireで呼び出して、変数expressに代入しています。

2行目のvar app = express( );では、expressを変数appに代入することで初期化しています。

3行目のapp.get(‘/’, function (req, res) {では、appに代入されているexpressのgetメソッドを使用して、ルートパス(/)にアクセスされた際(req)、表示する処理を(res)しています。

4行目のres.send(‘Hello World!’);では、Hello World!を表示するために処理する(res.send)事を意味しています。

5行目の});では、3行目の処理を終了することを意味します。

6行目のapp.listen(3000, function ( ) {では、3000ポートにアクセスした場合に今回のアプリケーションが動作する実装をしています。

7行目の);では、6行目の処理を終了することを意味します。

④Expressを実行する

npm run server

npm run serverをコマンドプロンプトで実行することでNode.jsサーバーが起動します。

起動後、Chrome等のブラウザで「http://localhost:3000」とアクセスすることで実行後の表示が可能となります。

 

 

参考サイト

https://qiita.com/righteous/items/e5448cb2e7e11ab7d477#packagejson-


www.google.com

コマンド

 

cd・・・作業ディレクトリを変更することができる

$cd ディレクト

「~」(チルダ)・・・ホームディレクト

 

(構造関係)

ホームディレクトリの下に存在する「sample1」と「sample2」

「sample1」にいる状態から「sample2」へ移動したい時

2つの方法

①「絶対パス

$cd/home/sample2

$cd ~/sample2 

②「相対パス

$cd ../sample2

..は1つ上のディレクト

 

ちなみに $cd と書くとホームディレクトリに戻る

 

pwd・・・現在どの作業ディレクトリにいるのか教えてくれる

 
cp・・・指定したディレクトリをコピーすることができる
$cp コピー元のファイル名 コピー先のファイル名
※コピー先に同じファイル名のファイルが存在している場合、確認なしに上書きしてしまします。
 
mv ・・・①ディレクトリ名の変更
            ②ディレクトリの移動
 
「変更」$mv 変更前のディレクトリ名 変更後ディレクトリ名
※既に同じ名前が存在していた場合上書きされてしまう
防ぐために -i オプションを使うと、上書きしていいですか?と確認される。
※複数のディレクトリ名変更不可(一括変更したい場合はrenameコマンドを使う)
 
「移動」$mv ディレクトリ名 移動先のディレクトリ名
※移動先のディレクトリに『./(ディレクトリ直下の)』をつけた方が安全。名前の変更が適用されない為
※複数のファイル移動可能 

 

 

cat・・・・ファイルを見る

$ cat fileA

fileAの中身を出力することができる。

 

$ cat fileA > fileB

リダイレクト「>」を用いると別のファイルに上書きできる。

$ cat fileA >> fileB

リダイレクト「>>」を用いると追加ができる。

 

『オプション』

-n 

cat -n ファイル名

行番号をつけて出力する。

 

-b

blankなし(空白行を入れずに)番号をつけて表示する

 

-s

連続した空白行を一行の空白行にまとめる

 

-e

各行の最後に”$”を表示する

連続した文字列の改行位置がわかりにくい場合に、$を入れることで確認することができる。

 

-t

タブを"^|"に置き換えて表示する

 

more・・・ファイルの内容をみる

$more 内容を見たいファイル

 

スペースキー 続きを見る

Enter    一行ずつ進める

p+数字を入力 数字の行だけ進める

s+数字を入力 数字の行だけ飛ばして進める

q 表示を終了する

 

「/s」オプションを使うと

連続した空行を1行扱いにして余分な空白を除くことができる。

これによって、1画面内により多くのファイル内容が表示で生きるようになる。

$more /s file.txt

 

途中の行から表示する

「+数字」オプションは数字で指定した行以降の表示になります。

$more +数字 対象ファイル

 

vi・・・対象ファイルを開く

$vi ファイル名

<コマンドモード>
・ファイルの保存

・カーソル移動

・コピー・ペースト

・検索

・置換

「esc」キー コマンドモードへ

 

『文字の消去』

「x」カーソル状の文字を消去

「数字x」指定した数字だけ、カーソル上の文字から右側を削除

「X」カーソルの左川の文字を削除

「数字X」指定した数だけカーソルから左側を削除

「dd」1行削除

「数字dd」指定した行数削除

 

『コピー・ペースト』

「yl」一文字コピー

「数字yl」指定した文字数をコピー

「yw」一単語コピー

「数字yw」指定した単語数をコピー

「yy」1行コピー

「数字yy」指定した行数をコピー

「p」文字・単語のペースト時はカーソルの右側にペースト行のペーストはカーソルの下の行にペースト

「P」文字・単語のペースト時はカーソルの左側にペーストカーソルの上の行にペースト

 

『カーソル移動』

「h」左へ移動

「l」右へ移動

「k」上へ移動

「j」下へ移動

「gg 」最初の行に移動

「G」最後の行に移動

「数字G」指定した行に移動

 

『検索』

「/検索したい文字(Enter)」カーソルより下方向に向かって検索

「?検索したい文字(Enter)」カーソルより上方向に向かって検索

「n」下方向に向かって次の該当文字を検索

「N」上方向に向かって次の該当文字を検索

 

『保存・終了』

上書き保存

「:w(Enter)」内容を上書き保存(viは終了しない)

「:wq!(Enter)」上書き保存して終了

「ZZ」上書き保存して終了

新しいファイルに保存

「:w 新規ファイル名(Enter)」新規ファイルとして保存

「:wq!新規ファイル名(Enter)」新規ファイルとして保存してviを終了

 

『保存せずに終了』

「:q!(Enter)」ファイルを保存せずに終了させる

 

『作業の取り消し』

「U」直前の作業を取り消す

 

 

<編集モード>
文字を入力するモード

「a」 カーソルの右から文字入力開始

「A」 行の最後から文字入力開始

「i」カーソルの左から文字入力開始

「l」行の頭から文字入力開始

「o」一段下に行を挿入して文字入力開始

「O」一段上に行を挿入して文字入力開始

 

※起動直後はコマンドモード

 

 

rm・・・ファイル、ディレクトリの消去

rm ファイル名

rm -r ディレクトリ名

 

『特定の名前が含まれているファイルをまとめて消去』

rm *.txt

末尾に「.txt」がついているファイルだけをまとめて削除

 

『オプション』

「-d」 空のディレクトリが消去できる

「-f」存在しないファイルを消去しようとしたときなどに警告メッセージが表示されますが、-fをつけると警告メッセージを表示しない

注:これを使うときは、確認なくpcのデータが容赦無く消されてしまうのでほんとに要注意!!!!!

「-i」ファイルやディレクトリを消去する前に確認メッセージを表示することができる

「-l」4つ以上のディレクトリを消去する前に確認メッセージを表示することができます

 

ln・・・ファイルのリンクを作成する

 

リンクの作成

$ln -s リンク先リンク元

リンクの変更

$ln -f リンク先リンク元

 

 
オプション引数
 
メソッドの引数を省略、既定値を設定できる機能をオプション引数とよぶ。
 
 
 

React・React Native typescript

 

React・・・UIを作るためのJavaScriptライブラリ

 

<3つのコンセプト>

 

・Declarative(宣伝的である)

条件と結果が明確にコードに記載されている状態であり、他の人がソースコードを読んでも理解がしやすい仕組み。

その結果、問題点を洗い出しやすくデバックやテストが容易になる。

 

・Component-Based(コンポーネント指向である)

アプリケーションの構成要素を小さい部品(コンポーネント)の集合として考えて設計されている。

機能の小さい部品に分割して持たせているので再利用も容易にできる。

 

・Learn Once, Write Anywhere(一度の学習で何度でもかける)

 Webアプリケーションだけではなく他の分野にも適応することができる。

例えば、モバイルアプリ開発ではReact NativeというReactの概念を基盤としたクロスプラットフォームが使用できる。

クロスプラットフォームcross-platform)とは、異なるプラットフォーム(例えばPC/AT互換機Macintosh、あるいはWindowsmacOSFreeBSDLinuxなどのように、仕様が全く異なる機械(ハードウェア)またはオペレーティングシステム)上で、同じ仕様のものを動かすことが出来るプログラムソフトウェア)のことを言う。

 

<特徴>

①レンタリングが高速

ここでのレンタリングとはWebページを描画することを意味する。

Reactでは仮想DOM(Document Of Model)という技術が使われています。これはWebページ内の一部を更新したいときに全てページをまるっと更新するのではなく、更新された一部のみを変更するという効率的な仕組みです。

この仕組みのおかげでレンダリングする箇所は一部に留まり、高速で表示の切り替えが可能です。

②大規模なアプリケーションほど向いている

・管理しやすい設計

・複雑な条件も組み込むことも可能

・コードの複雑性をさけ、見やすい設計

・モジュールの分割による長期の運用も可能

。カスタム性が高い

JavaScriptベースでもDOMの効率的な作成できる

ReactではJSXというXML風にDOMを出力するために開発した独自構文があります。JavaScriptやReactの標準APIでもDOMを作成することは可能ですが、どうしても冗長になってしまいます。

そこでJSXを使用することでHTMLを書いているかのようにReact内に組み込むことができます。

また、タグの記載ミスなどの構文エラーはコンパイル時にチェックされるため、安全性も保障されます。更にTypeScriptを使えば厳密に型チェックすること可能です。

JavaScriptが書ければすぐに使える

⑤SPAのアプリケーションに向いている

シングルアプリケーションとは、Single Page Applicationと表記し「SPA」と略されます

SPAとは、Webページにおいて1ページ内を各オブジェクトで構成することで、ページ全体を何度も読み込むことなく、対象のコンテンツのみを遷移させます。

ページ内で変化させる必要のない部分は据え置く(再読み込みをしない)ことで、表示の速度や全体のパフォーマンスを向上させることができるのです。

一般的なWebページでは、例えばユーザーが「次のページ」というリンクをクリックすると、アクションはサーバーへ要求され、サーバー側で「次のページ」のデータで1ページ分を作り、クライアントがページ全体を表示させます。

しかしSPAでは、ページ内にある一つのコンテンツをクリックすると、そのコンテンツ部分に必要な情報のみをサーバーへ要求し、必要なデータを使って差分のみを表示するのです。

これにより、ユーザーが認識する変化はページの一部であり、一瞬もページ遷移(ページ全体が白くなるなど)を意識することがなくなります。

⑥ドキュメントは英語が多い

 

React Native

iPhoneAndroidどちらでも動かすことができる開発用フレームワーク

 

□React Nativeのメリット

React Nativeの主なメリットは下記の3つです。

  • ・開発が効率的になる
  • 開発が効率的であるという点はReact Nativeのメリットです。クロスプラットフォームアプリ開発JavaScriptライブラリなので、iOSAndroidのアプリを1つの言語で同時に開発することができます。

    また、React Nativeで開発するときは、モバイル端末によって書き分けるコードは一部分で、コードの大部分を共通化することが可能です。そのため、開発の時間短縮や負担軽減を期待できます。

  • ・ホットリロードで修正が簡単にできる
  • Hot reload とはコードを変更したときマニュアルでリロードしなくとも、自動でリロードしてくれることを言います。 ただ単にブラウザで開いているページをリロードするのではなく、VueやReactであれば、そのコンポーネントの状態をリロードしてくれるという代物です。
  • ソースコードを保存するたびに自動でリロードが行われるので、微修正ごとにコンパイルする必要がありません。この機能により、UIの構築などが容易になります。
  • ・Reactを使ったことのある人には学習が簡単

 

□React Nativeのデメリット

React Nativeのデメリットは、以下の3点です。

  • ・アップデートへの対応が大変
  • ・エラーの解決に時間がかかる。エラー箇所がわかりにくい
  • エラー修正を行う際、ネイティブレイヤーで起きているエラーなのか、それともJavaScriptレイヤーでエラーが発生しているのか見極めるのに時間がかかります。

    また、iOSアプリではエラーが発生していないものの、Androidアプリではエラーが起きるという場合も存在するため、簡単に解決できないケースが起こりえます。

  • ・ネイティブエンジニアには学習コストが高い

 

 

TypeScript

JavaScriptのいいを残しつつ、使いにくい点を修正したTypeScriptは、言わばJavaScriptの進化版です。

コンパイルとは、プログラミング言語で記述されたソフトウェアの設計図(ソースコード)を、コンピュータが実行可能な形式(オブジェクトコード)に変換する作業のことです。

プログラミング言語には、動的型付けと静的型付けの2種類があります。先ほどJavaScriptの進化版がTypeScriptだと説明しましたが、JavaScriptは動的型付け、TypeScriptは静的型付けの言語で、この点が両者の最も大きな違いと言っていいでしょう。

 

動的型付けは、変数や関数のデータ型の宣言がいらず、プログラムが勝手に型を決定します。JavaScriptのほか、RubyPythonも動的型付け言語です

 

静的型付けで代表的な言語はC#C++などがあります。

 

動的型付けは、型を宣言する必要がないため記述量が少なく、小さなプログラムや型の変動が激しい環境なら容易に実装できます。その代わり、書いたプログラムを実行時にその都度判断するため、プログラムを実行してみないとエラーが起きるかどうかすらわかりません。

一方、静的型付け言語は、あらかじめデータの型を宣言してから開発を行います。そのため、コンパイル時にエラーがわかる、メモリ領域の最適化ができる、パフォーマンスの向上を狙えるといったメリットがあります。

まとめ

  • バグの早期発見
  • コーディングの効率アップ
  • コードの読みやすさの向上
  • 大人数での開発時の効率化
  • クラスが作れるようになった!

 

 

Git

Git → バージョン管理ツール(いつ、誰が、どのファイルに対してどのような変更を行ったか?という履歴を記録しておくためのツール)

 

○ Repositories(リポジトリ・・・ソフトウェア開発において、ソースコードや開発に関わるデータ置き場のこと

 

  Aさんローカル🖥← リモート(Gitサーバー)→Bさんローカル🖥

 

○ GitHub ・・・ Gitを便利に使うためのツール

 

リポジトリの作成

Githubを使って、リモート上にリポジトリを作る

Github +ボタン→New repository

リポジトリの名前を入力

③アクセス権 public・・・全世界にリポジトリの中身が見られる

       private・・・限られた人だけ

④creare repositoryボタン

 

このリポジトリを使って作業を進めていくために、リモートからローカルの端末上にこのリポジトリをコピー

 

★git status → 現在の状態を確認するコマンド

★git add ファイル名→Gitに管理された状態にする(gitの管理下に入るとファイル名が緑に)

※gitで管理するしないをgit addで選択することができる

 

ステージング・・・ファイルがGitの管理下にある状態(git statusで緑色の状態)

 

★git add . → 全てのファイルをステージング

★git commit→現在の状態をGitにセーブする

(git commit -m""   コミットメッセージ)

★modified:ファイル→ファイルを編集したことをgitが検知

★git log→gitのコミット履歴を確認できる

★git push→リモートにアップロードを行う

(git push origin)

★git pull→存在するリポジトリを最新のものにダウンロード

(git pull origin)

★git clone→新規にリポジトリをローカル側にコピー

 

ブランチ・・・gitの変更履歴を枝分かれさせる機能

 

master(元祖変更履歴)●→●→●→→→→→

              ●→→↗️合流

             ブランチ(枝分かれ)

                ⇩

              なぜ必要か

 

 <ローカル> ベテランAさん → ベテランBさん

           ↘️         ↙️

              リモート

 

 Aさん「この機能を作って!」

リモートにあるシステムは既に本番稼働している大事なシステム・・・

 ↓

新人Bさんの作ったもしかしたらバグってる修正をそのままリモートにプッシュされてしまったら本番が崩れてしまうかも・・・

 ↓ そういう時に

master側の歴史とは別の歴史とは別の歴史を枝分かれさせてブランチで開発する。

※ブランチ・・・masterにマージするまでmaster側には影響を与えない。

 

 

★git checkout→ブランチを切り替えるコマンド

<git checkout -b develop master>

★git branch→ブランチの一覧を見るコマンド

       緑色が現在のブランチ

★git checkout master→master側に戻る

★git merge→ブランチを合流させること

 

マージ作業

①マージ先のブランチに移動

②git merge develop

 

プルリクエス・・・git hub

                            開発をおこなったBさんからAさんに対してこの

                                         ブランチをmasterにマージして下さいという依頼

 

AさんBさんが同じブランチで作業する場合

□よくあるエラー

reject    fetch first(先にフェッチしてね)

※リモートの状態をローカルにダウンロードすること

先にAさんがpush →リモートサーバーとしてはAさんの作った歴史が

                                   由緒正しく正当な歴史と認識

                    ⬇️

         そこに対して、Bさんの作った別の歴史をプッシュ

                                 しようとしたので、リモートサーバーとしては正統な

                                  歴史と違うので却下!

               ☟どうすればいいか

        リモートから最新の情報を取ってきて自分の手元にマージ

                              を行う

 

☆-a  →リモート側も含めた全てのブランチを表示する

 

VIエディタで保存する場合は → :wp

 

◆ fetch と pull の違い

 

git fetch origin(リモートから最新の情報をダウンロード)

git merge origin / develop

origin / develop を手元のdevelopにマージ

      ⬇️ 一発で同じことができる

         git pull develop

 

      ⬇️ また別のやり方

      rebase 

git fetch origin

git rebase origin / develop develop

git push origin -f

 

☆-f →リモートを無視(ローカルを正)として強引にプッシ

 

◆mergeとrebase の違い 

 

<mergeコミットツリー>

Aさん ●→●→●→→→●→→→→→→

Bさん ↘️→→→→→○→→→○↗️

入り乱れて最終的に合流する

 

<rebaseコミットツリー>

Aさん● Bさん○

●→●→●→→→●→→→○→→→○→→→

Aさんの後にBさんが作業始めましたよというように歴史を改ざんできる

一直線のコミットツリー

 

コンフリクト・・・複数人が同じブランチの同じファイルの同じ行に

                                      対して変更を行うと発生する問題

        

<<<<<<HEAD
nfsjflksfsjgs編集

===========

fileの編集

>>>>>>>17hjsnvlkxkvnjshiouu34892u52jkn

Aさんの変更です

 ↓エラーの解消

①ギザギザを消す

②自分の編集も消す

③Aさんの変更に対して、自分の行った編集を加える

④git status

   ↓

fix conflicts and run git commit(コンフリクトを解消するためにgitコミットしてね)

⑤git commit -m""

 

★git reset

<git reset --hard HEAD(今の編集を全て消して最終コミットの時点まで戻る)>

 

★git stash

<git stash→一時保管>

<git stash pop →戻す>