laravelのバージョン確認方法

Laravelのバージョン確認方法は、
1. Laravelがインストールされているディレクトリに行く
2. コマンドラインでphp artisan -Vと打つ

1. Laravelがインストールされているディレクトリに行く
laravelのバージョン確認は、artisanコマンドを使います。その為、laravelがインストールされていないディレクトリではartisanコマンドは使えず、バージョン確認ができません。

2. コマンドラインで php artisan -V と打つ

[vagrant@localhost zeus]$ php artisan -V
Laravel Framework 5.7.11

php artisan –versionでも大丈夫です。

[vagrant@localhost zeus]$ php artisan --version
Laravel Framework 5.7.11

公式ドキュメントでは –version が紹介されています。
https://readouble.com/laravel/5.dev/ja/artisan.html

プログラマーとしては php artisan -V の方がいいでしょうね。

EclipseのMavenとは何か?

Mavenは[méivən]と発音する。メイベンにちかい。

※話が脱線しますが、むかし「熱海」をネッカイとずっと読んでいて、はじめてアタミと聞いた時には、あまりにもかけ離れていて動揺しました。それ以来、発音を確認する時には熱海が頭をよぎります。

Mavenとは?

Mavenとはプロジェクトのビルド、テスト、ドキュメンテーション、成果物など、プロジェクトのライフサイクル全体を管理するもの。

これだけではよくわかりません。Javaをbuildするツールで、Gradleと同じようなものらしいです。Android StudioのGradleをイメージするとわかりやすいかもしれません。

-mvn deployでローカルからリモートリポジトリにデプロイできる。
-作成したjarファイルをリモートにデプロイするにはpom.xmlにリモートの情報を記載する必要がある

Eclipseで.warファイルを作成・配置する方法

ローカルのeclipseで作成したservletを開発環境、STG、本番環境にデプロイしたい場面があるとします。その場合に、どのような手順で.warファイルを作成、配置するのか、考えたいと思います。

.warファイルとは
javaの設定ファイル、jsp、html、jar形式のライブラリなどがまとめられているアーカイブ。これをtomcat配布すると、それを元にデプロイされる

1. eclipseでアプリケーションを開発する
ここではサンプルとして、TodoServletというアプリケーションを開発しているとします。

2. 画面左ペインProject Explorerのプロジェクトで右クリック
Project Explorerのプロジェクトフォルダで右クリックするとexport -> war fileと出てきます。

3. war fileをexport
export -> war fileを選択すると、ポップアップがひらくので、destinationでwar fileのexport先を指定し、展開します。

すると、指定したディレクトリに ${projectName}.warfile というファイルが生成されます。

このwarファイルをtomcatのwebappに配置すれば完了です。

### eclipse関連の本

おススメの無料プログラミングスクール比較

プログラミングスクールで勉強したいけど、正直高いスクールに行くほど余裕がない、という事情だったり、無料があるなら、無料の方がいいですよね。そこで、おススメのプログラミングスクールを比較してみたいと思います。

1. TechAcademy

https://techacademy.jp/
東京都渋谷区渋谷1-17-4 PMO渋谷8F
-89000円(4週間のコース)
-オンライン完結、パーソナルメンター、マンツーマンレッスン、チャットサポート、オリジナルサポート
-進路: 転職サポート(全コース対応)
-実績:500社、25,000名を超える教育実績
無料体験

2. TECH::CAMP

https://tech-camp.in/
-12,800円~(月額)で学び放題
-期間:スキルアップなら合計60時間が目安、Webサービスなら100時間が必要
-内容:Webサービス開発、テクノロジー、オリジナルアプリ、AI入門、デザイン、VR・3Dゲーム開発、iPhoneアプリ開発
-教室:渋谷 新宿 池袋 東京駅前 御茶ノ水 早稲田 名古屋 梅田
-備考:週二回程度、教室に通うことを推薦

3. ITプロ育成スクール

http://www.m5school.jp/index.html
福岡市中央区薬院1-1-1 薬院ビジネスガーデン6階
-無料
-期間:8カ月
-内容:Java、HTML、CSSなど
-進路:研修から社員に
-実績:350名以上のエンジニア卒業
-備考:福岡にある、奨学金制度を導入している

4. 無料PHPスクール

http://www.dt30.net/phpschool/
東京都豊島区南池袋2-40-24シントミプラザ東池袋3F
-無料(入学金、授業料、教材費が一切無料)、ノートPCは持参、デポジット5万円(全額返金)
-短期の23日間
-内容:ECサイト構築スキル
-進路:無料PHPスクール卒業生の73.3%が自社内開発(それ以外は客先常駐)、61.1%が私服(ビジネスカジュアル含む)
-備考:写経メイン、文章→構文→単語の順に学ぶ

5. Axiz沖縄

http://axiz.okinawa/
沖縄県浦添市牧港5−6−2 琉薬商事ビル604
-無料(20-24歳)
-期間:短期間(3ヶ月間)
-内容:Webプログラミング基礎、Java基礎、Java応用、開発実習
-実績:ITホールディングスグループ/インプレスグループ/NTTデータグループ/オムロングループ国分(株)/国税庁/(株)サイバーエージェント/情報技術開発(株)/TCSグループ 東芝ソリューショングループ/(株)ドワンゴ/(株)ベイカレント・コンサルティング 法務省/三菱商事グループ/ミライト・ホールディングスグループ/リコーグループ

6. Kredo

https://kredo.jp/internous/
Park Central Office 17F 1708 Cebu IT Park, Apas Cebu City, Philippines 6000
東京都千代田区霞が関3-6-15 霞ヶ関MH タワーズ7F
-無料
-1カ月間1日6時間授業のセブ島留学、3カ月間東京で研修、就職
-95%で継続勤務

7. RainbowApps

https://www.school.rainbowapps.com/
大阪市中央区西心斎橋1-5-5 アーバンBLD心斎橋9階-C号
– iPhone アプリ開発コース(16回)、Android アプリ開発コース(16回)
– 小中学生・親同時受講限定で無料
– 1名まで無料 ただし保護者が必ず一緒に受講すること(保護者の割引はなし)
– 約6000名の受講実績

結局どかがいいのか?
これは考え方次第ですが、ポイントを考察したいと思います。
1. 続けられそうなところ
いくら素晴らしいスクールだとしても、自分が続けられなければなりません。働きながら通うのか、仕事を辞めるのか、どれ位時間をかけられるか、難易度は難しそうか、などなどで変わってくると思います。継続が大事なので、ハードルが高すぎるスクールはおすすめしません。

2. 費用が安すぎないところ
運用側の立場になってみればわかりますが、スクールの費用が安いということは、運営にお金をかけられません。そのため、どうしてもレッスンの質が下がり気味になります。もちろん、カリキュラムを作っている人に情熱とスキルがあれば話は別ですが。その為、少し費用がかかっても、お金をとっているスクールの方が内容が充実しやすくなるので、結果的にはリターンが大きくなるように思います。

3. 近場、もしくはオンライン
まず、近場かオンラインがよいでしょう。物理的に遠いと、わざわざ通うのがおっくうになります。そのため、通勤途中とか、通える距離がいいです。また、オンラインでできる人は、わざわざ教室に通わずに、自宅やカフェ、コワーキングで作業できるオンラインの方がいいです。その方が楽ですからね。自宅だと集中できない、という方は、例えば23:45まで毎日マックでやる、など工夫すればいいでしょう。テレビ・Youtubeを見てしまう、というのでしたら、テレビは捨てて、ChromeにSiteblockという拡張機能があるので、Youtubeを見れないように設定してあげれば、より集中できるようになります。

4. スクールが終わった後に、現場で働ける
スクールを終えたあとに、どのような選択肢があるかは非常に重要です。スクールから、企業を紹介してもらえるのであれば、どのような企業に紹介してもらえるか、予め見ておいた方がいいです。ITといっても裾野が広く、公官庁とゲーム会社では学ぶことや職場環境が全く異なります。できれば、スクールに行く前に、ある程度、どの業界、企業に行きたい、と決めておいた方がいいです。

5. プログラミングのスキルが身につく
スクールで学ぶ内容もしっかり確認しましょう。プログラミングといっても、フロントエンジニア、バックエンドエンジニア、
インフラエンジニアなど、職種が異なりますし、学ぶプログラミング言語もスクリプト言語といわれるPHP、Ruby、PythonとJava、C言語などでは異なります。また、アプリ開発の場合は、Java(Kotolin)、Swiftとなり、変わってきます。世間的にはAIが先端でかっこいいように思われるかもしれませんが、いきなりAIなどを学ぶよりも、基礎から学んだ方が賢明だと思います。

ということで、つらつらと書いてきましたが、自分に合ったところを検討してみてください。
個別の相談はコンタクトフォームからどうぞー

お問い合わせ

チームで開発する際のGithubを用いた開発フロー

チーム開発する際は、複数人で作業する為、一人称でデプロイするのとは異なる。開発規模が大きくなれば、なおさら複数人で協力して開発していくことになろう。そこで、開発フローについて考察したい。
以下はGithubを用いた開発手法だ。

1. githubでissueを発行
2. issueの番号でブランチを切る
3. 開発
4. commit, push
5. プルリク
6. 配置

まず前提としてGithubもしくはGithub Enterpriseのアカウントがあることが必要になります。ない場合は、sign upしましょう。

https://github.com/

1. githubでissueを発行
Githubにログインし、submit new issueでissueを発行します。

issueを発行すると番号が附番されます。下の例では#2となっています。

2. issueの番号でブランチを切る
clone or downloadからgit cloneします。

コマンドラインの操作

// git cloneする
[vagrant@localhost sample]$ git clone https://github.com/githubix/bengoshi_chat.git
Initialized empty Git repository in /home/vagrant/local/sample/bengoshi_chat/.git/
remote: Enumerating objects: 3, done.
remote: Counting objects: 100% (3/3), done.
remote: Compressing objects: 100% (3/3), done.
remote: Total 53 (delta 0), reused 2 (delta 0), pack-reused 50
Unpacking objects: 100% (53/53), done.

// cloneされたかフォルダを確認
[vagrant@localhost sample]$ ls
bengoshi_chat

// ディレクトリに移動
[vagrant@localhost sample]$ cd bengoshi_chat
[vagrant@localhost bengoshi_chat]$ ls
README.md  config  lib  node  public_html

// ブランチを確認
[vagrant@localhost bengoshi_chat]$ git branch
* chat

chatというブランチが出来ています。

gitで開発していく場合には、git cloneしたブランチではなく、作業用ブランチを作成して作業していきます。それを「ブランチを切る」と言います。
gitのブランチを作成するには git branch hogehoge と打ちます。
早速やってみましょう。

[vagrant@localhost bengoshi_chat]$ git branch
* chat
// branchを切ります
[vagrant@localhost bengoshi_chat]$ git branch newbranch
// branchを確認
[vagrant@localhost bengoshi_chat]$ git branch
* chat
  newbranch

新しくnewbranchが出来ましたが、branchはchatのままです。branchの切り替えはcheckoutを使います。ホテルのチェックアウトと同じイメージです。

// newbranchに切り替えます
[vagrant@localhost bengoshi_chat]$ git checkout newbranch
Switched to branch 'newbranch'
// 確認すると、newbranchになっているのがわかります
[vagrant@localhost bengoshi_chat]$ git branch
  chat
* newbranch

続いて、fileを修正します。ここではサンプルとして、テキストを修正します。

※社会通念上、不適切と思われる相談内容は、<b>こちら</b>にユーザ名および内容をご連絡ください。

git add してstatusを見ると、状態がわかります。

// git add . とします。
[vagrant@localhost bengoshi_chat]$ git add .
// statusを確認すると、どのブランチ、ファイルか表示されます。
[vagrant@localhost bengoshi_chat]$ git status
# On branch newbranch
# Changes to be committed:
#   (use "git reset HEAD ..." to unstage)
#
#       modified:   public_html/index.php
#

続いて、commitして、pushします。

[vagrant@localhost bengoshi_chat]$ git commit -m "text modify"
[newbranch f7b8b29] text modify
 Committer: vagrant 
Your name and email address were configured automatically based
on your username and hostname. Please check that they are accurate.
You can suppress this message by setting them explicitly:

    git config --global user.name "Your Name"
    git config --global user.email you@example.com

If the identity used for this commit is wrong, you can fix it with:

    git commit --amend --author='Your Name '

 1 files changed, 1 insertions(+), 1 deletions(-)

// pushします。
[vagrant@localhost bengoshi_chat]$ git push origin newbranch
error: The requested URL returned error: 403 Forbidden while accessing https://github.com/githubix/bengoshi_chat.git/info/refs

fatal: HTTP request failed

あれ、よくわかんなくなってきた。。

reactでcomponentの引数を渡す

reactでcomponentの引数を渡したい時があると思いますので、そのサンプルを書きます。

Counterという関数。propsを受け取り、そのcolorを書きます。{props.color}

function Counter(props){
		return <div>0 {props.color}</div>
	}

渡す方です。

<div>
			<Counter color="blue"/>
			<Counter color="yellow"/>
			<Counter color="red"/>
		</div>,

繋げてみます。

(() => {

		function Counter(props){
		return <div>0 {props.color}</div>
	}

		ReactDOM.render(
		<div>
			<Counter color="blue"/>
			<Counter color="yellow"/>
			<Counter color="red"/>
		</div>,
			document.getElementById('root')
		);
	})();

うまく引き継がれました。

それをdivタグのsytleの属性に渡します。
backgroundColor:props.colorとすることで、props.colorを背景色に指定しています。

function Counter(props){
		return <div style={{backgroundColor:props.color}}>0</div>
	}

フレームワークの勉強方法を考えてみる

PHPのLaravelというフレームワークを学習したいとして、学習手順について考えてみたいと思います。
まず、大きくわけて以下のような考え方があると思います。

1. 必要な箇所のみWebで調べて、実装する
2. ドットインストールなど、学習サイトで基礎を勉強する
3. フレームワークの本を買って、本に沿って勉強する
4. フレームワークの勉強会に参加する
5. フレームワークの公式サイトから、ドキュメントを全部読む
6. 自分自身でフレームワークを触りながら、プロダクトを作って勉強する
7. フレームワークのgithub issuesを読む
8. フレームワークのossにコミットする

1. 必要な箇所のみWebで調べて、実装する
Googleで、調べたい内容のキーワードで検索をして、上位表示されているページの記事を複数読んで、ローカルでテストして動かします。
基本はこれの繰り返しで良いと思います。何故なら、最も効率的に時間を使えるから。
例えば、laravelのログイン機能の実装を調べたいとすれば、「laravel ログイン機能」と入力すれば、関連記事がずらずらと表示されます。1位表示されるということは、それだけ価値のある情報とみなされているので、素直にそれを読めばいいと思います。実際に、殆どこれで解決できるような気がします。

「laravel ログイン機能」で1位表示されている機能
https://www.ritolab.com/entry/51

2. ドットインストールなど、学習サイトで基礎を勉強する
フレームワークをゼロから学ぶ必要がある場合は、ドットインストールのレッスンがおススメです。フレームワークの基本的な機能を説明しているので、短時間で基礎を一通り学べます。
▽ドットインストール
https://dotinstall.com/
▽Laravel5.5
https://dotinstall.com/lessons/basic_laravel_v2
ただし、注意が必要なのは、レッスンの代表の田口元がマンパワーでつくってるので、内容が古いということがあります。Laravelは最新版が5.7ですが、まだ5.5なので、最新更新日を注意しなければなりません。また、フレームワークでも、phpとrailsぐらいしかなく、pythonやjavaなどその他の言語のコンテンツはあまりないので、その辺を勉強したい場合は、ドットインストールにはありません。
因みに私は、4,380レッスン完了して、全受講者中9位です。一時期、2位でした。プレミアム会員は月額980円なので費用対効果はいいと思います。

3. フレームワークの本を買って、本に沿って勉強する
本屋で、幾つか見て、自分に合いそうな本を買って勉強する方法です。私の場合、昔はこれが主流でしたが、最近はほとんど本は買いません。なぜなら、(1)情報が最新でない、(2)Webの方が見やすい、(3)持ち運びが重いから。本の出版だと、やはり少し前の情報なんですね。なので、お金だして買った割に、情報が古いとちょっとがっかりします。また、紙よりもwebの方が見やすい・使いやすいんですね。ソースコードなのどは、やはり、Web上で見た方がやりやすい。そして、なにより、持ち運びが重い。自宅よりも外で作業している時間の方が長いので、軽い方がいいです。

ただし、webで勉強したことを本屋で確認する、というのはよくやってます。

4. フレームワークの勉強会に参加する
LTの講師は、大体第一線のエンジニアが立つので、どれ位の知識が必要なのか、という意味では参考になりますが、これは、微妙ですね。なぜなら、勉強会に出たからといって、コーディングのスキルはあがらないから。
単純に、他社のオフィスに行けるのが楽しい、というのもあり、私は、一応、connpassとtechplayはチェックしていますが、そんなに勉強会には時間を割いていません。
https://connpass.com/
https://techplay.jp/
余裕ができたら、もっと勉強会に参加したいと思っています。

5. フレームワークの公式サイトから、ドキュメントを全部読む
これは凄いおススメ。teratailで質問すると、よく、公式のドキュメントを全部読め、と返ってくるが、周りのエンジニアでもスーパーエンジニアのような人は、何か課題があった時には、関連する記事を直ぐに公式のドキュメントをひっぱってくる。また、自分でカスタマイズする際にも、スキルのある人は、公式ドキュメントを良く読んでいる印象があります。
laravelのドキュメント
https://readouble.com/laravel/
難点としては、読むのに骨がおれる、時間がかかり大変、ということです。直接関係なさそうな記事も読まなければいけないため、長時間読み続けると、モチベーションが段々下がってきます。なので、細切れで学ぶなど工夫が必要かも。これは今後もやっていきたいですね。

6. 自分自身でフレームワークを触りながら、プロダクトを作って勉強する
これは最も重要かもしれません。自分でローカルで環境を作って、動かしながら、理解していく事が最重要だと思います。
ただし、これは、前工程に時間がかかる、という難点があります。
フレームワークを触る前に、つくるプロダクトの基本設計、詳細設計、画面設計、画面遷移、フロント部分などある程度つくっておかなければならないという点です。フレームワークの簡単な動作なら、別にデフォルトをインストールして基本動作を確認すれば良いですが、実践的な学習となると、それなりの設計がされたプロダクトでないと意味ありません。そのため、設計からキチンとやっていく必要があり、時間がかかる覚悟をしなければなりません。

7. フレームワークのgithub issuesを読む
最新の情報は、公式ではなく、githubでやりとりされているので、githubを見る癖をつけた方がいいですね。
https://github.com/laravel/laravel

8. フレームワークのossにコミットする
ここまでくれば、特にいうことはないでしょう。というか、このレベルまで早くいきたい。

ということで、つらつらと書いてきましたが、纏めると、効率的な学習法があるかもしれませんが、きちんとやるのであればフレームワークの学習には時間がかかる、ということでしょうか。
おススメの方法があったら教えてください。

お問い合わせ

reactで使う関数の基本構文

クリックするとアラートが表示される関数をreactで書きたいとします。
アラートはシンプルに書きます。

function showMessage(){
		alert('Hello');
	} 

これをreact内に書くとき。
onClick={showMessage}で呼び出します。その際に、onClick=”showMessage”だとstringと認識されるため、{}を指定してあげてください。

<div id="root"></div>
	<script type="text/babel">
		(() => {

		function showMessage(){
		alert('Hello');
	} 

		ReactDOM.render(
			<div className="box" onClick={showMessage}></div>,
			document.getElementById('root')
		);
	})();
	</script>

では、ブラウザで表示を確認します。

JSX

constで変数を渡すこともできます。

<script type="text/babel">
		(() => {

		const name = 'engineer';
		ReactDOM.render(
			<p>Hello! {name.toUpperCase()}</p>,
			document.getElementById('root')
		);
	})();
	</script>

こうですね。

readctDOM.renderの中でタグを複数書くとエラーになる

<div id="root"></div>
	<script type="text/babel">
		(() => {

		const name = 'engineer';
		ReactDOM.render(
			<p>hello</p><p>world</p>,
			document.getElementById('root')
		);
	})();
	</script>

divタグで囲うとエラーが消える。

React

A JavaScript library for building user interfaces
react
https://reactjs.org/

chromeにreact developer toolを入れます。

拡張管理を押下。
ファイルのURLへのアクセスを許可する をonにする

reactの公式より、try reactを押下
https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html

このscriptタグの箇所をコピペ

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

htmlの中に入れていきます。

<!DOCTYPE html>
<html lang="ja">
<head>
	 <meta charset="UTF-8">
	 <title>React</title>
	 <link rel="stylesheet" href="css/styles.css">
	 <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
	<script type="text/babel">
		
	</script>
</body>
</html>

reactを書いていきます。

<div id="root"></div>
	<script type="text/babel">
		(() => {
		ReactDOM.render(
			<p>Hello!</p>,
			document.getElementById('root')
		);
	})();
	</script>

reactでは、(() => {})();と書く。もはやfunctionは省略。変わった書き方だ。
document.getByElementは上手くいってます。