大田区から発信するゆるゆる日記

主にITエンジニアに関する備忘録日記。たまに趣味も。何か不備があれば、コメント頂けると幸いです。

Angular

※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。

【目次】

 

背景

会社でAngularを使うので、概要を把握するために記事にまとめます。

自分用のため、クオリティは低いです。

 

Angular

Angularとは?

Googleによって開発された、JavaScriptで書かれたオープンソースのフロントエンドWebアプリケーションフレームワークです。
TypeScriptが推奨となっている。

 

SPAでの開発によく利用されます。

 

特徴

・モバイルやデスクトップなど、全てのプラットフォームで動作する
 ⇨動作環境を意識する必要がない


・Webアプリ開発に必要な機能が全て備わっているフルスタックフレームワーク
 ⇨AngularだけでWebアプリ開発ができる


・DOM操作をアプリケーションロジックから分離している


・アプリケーションのクライアントサイドとサーバーサイドを分離している
 ⇨開発作業を同時並行で進めることができ、双方で再利用可能


・アプリをビルドしていく流れに構造を与えている


MVCパターンを実装している
 ⇨ビュー依存のコントローラーなどをクライアントサイドに持ってくることで、サーバーへの負荷をかなり削減される


・双方向データバインディングにより、HTMLの要素が処理を行うプログラムと連動し、自動的に処理されます。逆に、データを変更すると自動的に画面に反映されるようにもなります
 ⇨要は、ビューとモデルの間で必要だった処理のコードを少なくすることができます

 

コンポーネントが使える
 ⇨同じ要素を使いまわせ、読み書きしやすくなる

 

メリット

・動作端末が多いWebアプリを開発可能

・抜群の生産性

 

今後に向けて

これで会社で使うプログラミング言語についての概要は学習しました。
あとは、実践で使い方や用語を覚えていく!

 

・・・色々なDB使ってるから、その勉強もしないとだな

 

 

TypeScript

※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。

【目次】

 

背景

会社でAngularを使うので、TypeScriptの概要を理解するために記事を書きます。

自分用なので、クオリティは低いです。

 

TypeScript

TypeScriptとは?

マイクロソフトによって開発され、メンテナンスされているオープンソースプログラミング言語
JavaScriptで大規模なアプリ開発をする上での欠点を補うために開発された。ソースコードGitHubにある。

 

JavaScriptに対して、省略も可能な静的型付けとクラスベースオブジェクト指向を加えた厳密なスーパーセットとなっている。コンパイルするとJavaScriptを実行することになります。

 

C#のリードアーキテクトであり、アンダース・ヘルスバーグが開発に関わっている。

 

特徴

クライアントサイド、あるいはサーバーサイドで実行されるJavaScriptアプリの開発に利用できます。

 

①静的型付けが必要

【型の例】
・number型(数値)
・string型(文字列)
・boolean型(真偽値)
・any型(同じ変数に違う型の値を格納できるが、型チェックされないので要注意)

 

【型の記述方法】

・変数宣言

var 変数名:型名

・関数

function 関数名(引数名:引数の型):関数の戻りの型{}

 ※コードの冗長を避けたい場合は、「型推論」を使って型の宣言(型アノテーション)を省略することができる。

 

②クラスを定義し利用できる

C#の影響でクラスベースを取り入れているので、クラスを定義し利用できる。

 

③インターフェースを利用できる

インターフェースとは、「メンバーの名前と型が定義された抽象的な型」です。インターフェース自身はインスタンス化できないし、メンバー関数の中に処理を実装することもできない。あくまでも、コンパイル時にメンバーと型のチェックに使われる。

 

インターフェースはクラスの中で実装することで初めて使うことができます。また、変数宣言時などの型アノテーションとしても利用できます。

 

コンパイルすると、インターフェースはなくなります。

 

コンパイルすると、JavaScriptコードとしてメンテナンス可能

もしTypeScriptが廃れたとしても、ソースコードJavaScriptとして残すことができる。

 

 

今後に向けて

Angularの概要を勉強していきます〜

 

Laravel

※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。

【目次】

 

背景

会社でLaravelを使うので、Laravelの概要を把握するために記事を書きます。
自分用の記事なので、クオリティは低いです。 

 

Laravelについて

Larabelとは?

PHPで書かれたMVCのWebアプリ開発に特化したフレームワークのこと。


Taylor Otwellが開発をした。ソースコードGitHubホスティングされています。

 

コミュニティはTaylorを中心として活発に開発を続けており、Laravelは世界的にも人気があるようです。 

 

人気の理由

使い勝手が良いため、世界的に人気なようです。

・学習コストが低い
・ドキュメントが充実している
・クセが少ない
・コードがシンプルで、読み書きしやすい
・設定や更新を簡単に行える(artisonコマンド)
・ある程度のところまで自動生成してくれる
・コミュニティや情報量が多い
・自由度、拡張性が高い

 

機能

・ルーティング
・リクエスト処理
・ビュー
・クエリビルダー
・ORM
・DI
・認証
ユニットテスト
・ブラウザテスト
など、現代的なフレームワークが要求される一通りの機能が実装されている。

 

また、Artisanコマンドを利用することで、簡単に機能の実装を行うことができる。

 

欠点

他のフレームワークに比べて、処理速度が遅いようです。
理由は、Laravelに含まれている機能や規模が大きいためだと考えられています。
開発はしやすいので、何かを犠牲にしないといけないということでしょうか。

 

自由度が高いため、複数名で開発する場合はしっかりとルール決めする必要がありそうです。

 

開発環境構築

PHPインストール⇨Composer(バージョン管理ソフト)インストール⇨Laravelインストール

 

今後に向けて

ドキュメントの理解とフロントエンドで使ってるAngularの学習を行います。 

 

 

PHP

※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。

【目次】

 

背景

会社でLaravelを使うので、まずはPHPを学習します。

自分用のまとめ記事です。

 

PHPとは?

何の略?

PHP: Hypertext Preprocessorの略です(Personal Home Pageの略との説もある)
最初の文字が「頭字語の頭字語」になっているため混乱しやすい。この種の頭字語は「再帰的頭字語」と呼ばれます。

 

どんなプログラミング言語

オープンソースのHTML埋め込み型スクリプト言語で、簡単にWebアプリを開発するためにできた。
構文は C、JavaPerl言語からの転用が多いが、PHP独自の構文もある。有名はフレームワークには、Laravelなどがあります。
FacebookYahoo!で使われている実績がある。

 

使用例

・・・省略・・・
<body>

<?php
echo "Hello World!";
?>

</body>
・・・省略・・・

 

主にサーバーサイドでの活用に焦点が当てられている。コードはサーバーで実行され、その結果がクライアントに送信される。クライアントは、スクリプトを実行した結果を受け取り、その出力を作成したコードがどのようなものなのか知ることはできません。

 

OSやWebサーバー、DBは、多くの種類の中から選択することができる。

 

目的は?

Web開発者が動的に生成されるページの作成を速やかに行うことができるようにすることです。つまり、PHPはWebアプリを簡単に作成するように作られた言語。

 

何ができる?

・フォームからデータを取得
・動的にページ内容を生成
・クッキーの送受信
など
CGIプログラムに出来ることは全て行うことができる。

 

・サーバーサイドでのスクリプティング
コマンドラインでのスクリプティング
・クライアントサイドでのGUIアプリケーション(PHP-GTKを使用)
・イメージやPDF、Flashムービーを生成できる
XHTMLXMLといったその他の文書の生成、保存、印刷、サーバー側でキャッシュ
・WDDXをサポートし、基本的に全てのWebプログラミング言語間で複雑なデータ交換が可能
・テキスト処理機能(拡張モジュール・ツールなどを使用)

 

Rubyとの違いは?

RubyPHPは、Webアプリの開発でよく使われる。では、どのような違いがあるのだろうか?

 

PHPは学習コストが低いので、初心者でも学習がしやすい。ある程度適当に書いても、Webアプリを動かすことができます。
また、環境に合わせてフレームワークを選択することもできます。
分業などで一人開発が多い場合は、PHPの方が使いやすいかもしれません。

 

一方で、RubyRuby on Railsと呼ばれる、Webアプリ開発ではとても有名なフレームワークに対応しています。規約がしっかりとしているので、チーム開発などで大きく力を発揮します。

 

用語

CGI
Common Gateway Interface の略称。
WEBサーバーと外部実行プログラムの間のインターフェイス仕様・機構のことを指します。厳密にはCGIというのはプログラムを指すのではなく、プログラムを HTTPサーバで動かすための「ルールと仕組み」。

 

スクリプテイング:
スクリプト言語を書く作業のこと。

 

GUI
Graphical User Interfaceの略。
コンピュータやソフトウェアが利用者に情報を提示したり操作を受け付けたりする方法(UI:ユーザインターフェース)の類型の一つで、情報の提示に画像や図形を多用し、基礎的な操作の大半を画面上の位置の指示により行うことができるような手法のこと。

 

今後に向けて

Laravelの勉強をします。

 

参考

素晴らしい記事に感謝いたします。

https://www.php.net/manual/ja/index.php

Gitの使い方

※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。

【目次】

 

背景

本格的に実務に入る前にGitの復習をしておきます。

 

内容

GitをPCにインストール

Gitのインストール

$ brew install git
#brewコマンドが使えなければ、XcodeやHomebrewのインストールが必要


Gitのバージョン確認

$ git --version

 

 

Gitでディレクトリを管理する(ローカルリポジトリの作成)

$ cd ~/該当ディレクトリ #該当ディレクトリに移動
$ git init
$ ls .git

・該当ディレクトリに「.git」という隠しディレクトリが存在しているかどうかを確認する(隠しディレクトリの「.git」が、該当ディレクトリがバージョンを記録しておく入れ物です。)

・管理されている場合は「HEAD config hooks objects refs」と表示される。管理されていない場合は「ls: .git: No such file or directory」と表示される。

 

 

Gitでバージョン管理をする

流れは、変更ファイル群を一時的にインデックスに追加し、それをバージョンとして記録(コミット)します。変更を行ったファイルのうち別のタイミングで記録したいファイルがある場合は、そのファイルを同じタイミングでインデックスに追加してはいけません。

 

1.どのファイルがインデックスに追加できるのか確認
2.ファイルをインデックスに追加
3.インデックスをコミットする

1.どのファイルがインデックスに追加できるのか確認 

$ git status

Untracked files:」以降に、インデックスに追加されていないファイルが表示されます。

 

2.ファイルをインデックスに追加

$ git add ファイル名
#「git add .」とすると全てのファイルをインデックスに追加できます

この時点で「git status」を使うと、「Changes to be committed:」以降にインデックスに追加されたファイルが表示されます。

 

3.インデックスをコミットする

$ git commit

全てのコミットがされた状態で「git status」を使うと、「nothing to commit, working tree clean」と表示されます。

 

 

ローカルリポジトリをリモートリポジトリと紐づける

※事前にリモートリポジトリの作成が必要です。

$ cd ~/該当リポジトリ
$ git remote add origin リモートリポジトリのURL
$ git remote
origin #originと表示されれば紐付けが完了しています

 

 

ローカルリポジトリの作業をリモートリポジトリに反映させる 

$ git push origin master

 

 

ブランチの作成

$ cd ~/該当リポジトリ
$ git branch -a #ブランチ一覧
$ git checkout master #masterブランチに移動
$ git checkout -b 作成するブランチ名
$ git push -u origin 作成したブランチ名 #ブランチをリモートリポジトリに登録

 ブランチでの作業を終えたら、上記を参考に「インデックスへの追加・コミット・リモートリポジトリにプッシュ」を行う。

 

 

マージ

$ git merge 取り込みたいブランチ
or
$ git pull origin master #fetchとmergeを組み合わせたようなもの

 

 

今後に向けて

今までの開発で使っていたであろうgitコマンドをまとめてみました。

いつもはGitHubDesktopが勝手にやってくれていたのであまり気にしていませんでしたが、次の会社がもしGitHubを使わないなら、Git自体の仕組みを再確認しておいた方が良いと思ったのが事の発端です。

 

あとは、実際に企業に行ってみて他に必要な知識がありそうであれば、そこを優先的に学習していこうと思います。

【Ruby】正規表現オブジェクト【気付き】

※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。

【目次】

 

現在、転職活動で瞑想中。

 

お盆は企業も休みだろうと思って、思い切ってインプットする時間に費やすことにしました。

 

初めてしっかりと『たのしいRuby』を読み始めることにしたのですが、早速「そうだったんだ・・・」という発見があったので、アウトプットしておきます。

 

正規表現(Regexp)オブジェクト

今まで何気なく使ってた正規表現でしたが、これもオブジェクトなんですね!

Rubyなら当たり前ですね(汗

 

本質を知らずに検索や置換する時とかに使っていました。

 

書き方

/パターン/ #パターンには文字列が入ります

#例
/abc/
/日本/
/123/

 

使い方

正規表現オブジェクトは、文字列とのマッチング(検索)や切り出し、置換する時とかに使います。

 

具体的には、以下のような使い方になります。

文字列とパターンのマッチング

/Ruby/ =~ "Start Ruby"
=> 6

/Ruby/ =~ "Start RUBY"
=> nil

/Ruby/i =~ "Start RUBY" #iオプションを使用
=> 6

p(/r/ =~ "ruby")
=> true

  

case文や切り出しなどでの使い方は、本を読み進めたら随時ブログを更新したいと思います。

 

今後に向けて

オプションの使い方が重要になってくる気がするので、早く読み進めてオプションの使い方をマスターしたいです。

【Rails + React】配列データの作成日を日本語表記にする

※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。

【目次】

 

背景

配列データの作成日を日本語で表示する方法を調べました。

 

フレームワークRails、ビューにはReactを使用しています。

内容

コントローラから"tasks"という配列データを受け渡されている前提で話を進めます。

 

配列データに反復処理をさせる

map関数を利用します。

Tasks Component

import React from "react";
import Task from "./Task";

class Tasks extends React.Component{
render(){
return(
<ul>
{this.props.tasks.map( task => {
return (
<Task task={task} key={task.id} />)}
</ul>
)
};
};

export default Tasks

 

作成日を日本語表記に作り直す

Task Component

import React from "react";

class Task extends React.Component {
render(){
let created_at = this.props.task.created_at;

let year = created_at.slice(0,4);
let month = created_at.slice(5,7);
let day = created_at.slice(8,10);
let hour = created_at.slice(11,13);
let min = created_at.slice(14,16);

let japanese_date = year + '年' + month + '月' + day + '日'+ hour + ':'+ min ;
return(
<li>{ japanese_date }</li>
)
 };
};

export default Task

 

今後に向けて

Rubyだとstrftimeメソッドがありますが、JavaScriptだとないんですかね?

 

最近Reactが楽しいです。