Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Node.jsではじめてみる
Web開発
Node.jsを使って初めてWebアプリケーションを作っていろいろ
と苦労させられたお話
Coils work. | shuft鯖 (@_shuft)
Coils Work. | Shuft鯖 (@_shuft)
< 進捗どうですか />
炎上案件抱えてませんか?
Coils Work. | Shuft鯖 (@_shuft)
< 進捗どうですか />
Coils Work. | Shuft鯖 (@_shuft)
< 進捗どうですか? />
自己紹介
ことの発端
デモ
開発のこと
実際にやってみた
おわりに
大切なおしらせ
Coils Work. | Shuft鯖 (@_shuft)
< アジェンダ />
Shuft鯖 ( @_shuft )
舞鶴工業高等専門学校 電気情報工学科 2年
学生会副会長なんかもやってる
サイト : http://coils.work/
普段はギターを光らせたり、旋盤回したり
先日、危険物取扱者乙種第四類と...
Coils Work. | Shuft鯖 (@_shuft)
< About me />
山
山
山
山
山
田
電気系でも機械系でもない JK ( 情報系高専生 ) 的なお
話
Coils Work. | Shuft鯖 (@_shuft)
< 今日は何の話か? />
Coils Work. | Shuft鯖 (@_shuft)
< ことの発端 />
なんかコンテストに作品だしたいよね
それな
Coils Work. | Shuft鯖 (@_shuft)
< ことの発端 />
https://mascot-apps-contest.azurewebsites.net
Coils Work. | Shuft鯖 (@_shuft)
< ことの発端 />
(Webで)フロントエンドとかやりたくない?
わかる
Coils Work. | Shuft鯖 (@_shuft)
< ことの発端 />
(なにつくるか…)
ツイッタースタンプは?
あー、なるほどー(棒
Coils Work. | Shuft鯖 (@_shuft)
< ことの発端 />
この3人で「ツイッタースタンプ」を作ることになった!
鯖 稗 金魚
Coils Work. | Shuft鯖 (@_shuft)
< ことの発端 />
コンテストで賞とったら回る寿司連れて
いってやるから
回らない寿司な
賞を取ったら海鮮丼
LINEみたいにスタンプが使えないTwitterでも
簡単にスタンプが使えるようにしよう!!
Coils Work. | Shuft鯖 (@_shuft)
< ツイッタースタンプとは? />
実際に作ったものをみてみよう!
Coils Work. | Shuft鯖 (@_shuft)
< どんなの作ったの? />
Coils Work. | Shuft鯖 (@_shuft)
< 開発のこと />
• Ruby on Rails
→ 寮の回線(Proxy)的にインストールできない
• PHP
→ なぜかそもそもの候補に挙がらなかった…
ってことで「Node...
サーバーサイドを扱うJavaScript
Google製の「V8 JavaScript Engine」というかっこいい名前のエンジンが使われ
ている
非同期I/O(ノンブロッキングI/O)
JavaScriptなのでシングルスレッド動作...
OS : Windows
言語 : JavaScript ( Node.js ) ,TypeScript (一部) , EJS , CSS
開発環境 : VisualStudio , Brackets , Atom
バージョン管理 : ...
ソフトウェア開発におけるデザインパターン(型紙(かたがみ)
または設計パターン、英: design pattern)とは、過去のソフト
ウェア設計者が発見し編み出した設計ノウハウを蓄積し、名前を
つけ、再利用しやすいように特定の規約に従ってカタ...
MVC ( Model View Controller )とは
Model : Controllerからの依頼を受けて処理を行うロジックの部分を受け持つ
View : ユーザに整形した情報を表示する
Controller : ユーザからの...
Coils Work. | Shuft鯖 (@_shuft)
< デザインパターンとは? />
鯖 稗 金魚
Controller
送受信
Socket.io
Model
内部処理
MySQL
View
Web画面
Bootstrap
もっと詳しく知りたい…
Coils Work. | Shuft鯖 (@_shuft)
< デザインパターンとは? />
Webではフロントエンドとバックエンドについてよく言われる
フロントエンド(英: front-end)とバックエンド(英: back-end)は、プロセスの最初と最後の
工程を指す一般的用語である。フロントエンドは各種入力をユーザーから収集し、...
まずはやってみないとはじまらないので、サンプルのコードを叩いてみる
Node.jsのサイトのAboutにコードが置いてある
const http = require('http');
const hostname = '127.0.0.1';...
世界のみなさんこんにちはできた
Coils Work. | Shuft鯖 (@_shuft)
< 実際にやってみる />
なんやwwwめっちゃ簡単やんwwwwちょろいわwww
→めっちゃフラグを立てた
Coils Work. | Shuft鯖 (@_shuft)
< 実際にやってみる />
ツイッタースタンプなのに画像が表示されない
ちなみにこの問題を解決するのに丸2日かかった…
Coils Work. | Shuft鯖 (@_shuft)
< 実際にやってみた />
Coils Work. | Shuft鯖 (@_shuft)
< チーム開発やってみる />
ポートフォリオ的なのじゃねーの?
機能的なサイトにしたいよね
もっとスタンプの説明文いれたりさ
話がかみ合ってない!!
ほとんど各個人での判断で機能実装やデザインをしている
→だから情報の共有(個人の考え)がうまくいってない
図 : 炎上案件を抱える図
Coils Work. | Shuft鯖 (@_shuft)
< チーム開発やってみる />
機能の実装が実装できたみたいなので早速渡されたコードを見てみる
→このままマージすると絶対失敗するな
→そこまでコードの量が多いわけでもない
セルフマージするか…
Coils Work. | Shuft鯖 (@_shuft)
< チーム開発やっ...
マージって?
→コードとコードを結合して一つのものにすること
→つまり、自分でコードを結合させた
Coils Work. | Shuft鯖 (@_shuft)
< チーム開発やってみる />
Coils Work. | Shuft鯖 (@_shuft)
< チーム開発やってみる />
ツイッタースタンプなのに画像が表示されない ( 2回目 )
ちなみにこの問題を解決するのに丸1日かかった…
先日Routerを実装するために今まで拒んでいたExpressを導入することに
Router : URLを解析してURLに一致するページをクライアントに渡すところ
→高専カンファレンストップページ : http://kosenconf.jp...
Webは奥深い
ただやっぱり書いてると楽しい。わからないと苦痛。
Node.jsは簡単()
ただし、最初はExpressなどのフレームワークに頼らずに自分で書いてみる
チーム開発は情報共有と進捗管理が大切
いつだって炎上案件は目の前...
告知時間を最後にいただいているのでその時に…
Coils Work. | Shuft鯖 (@_shuft)
< 大切なお知らせ />
</ ありがとうございました >
Coils work. | shuft鯖 (@_shuft)
Upcoming SlideShare
Loading in …5
×

Node.js ではじめてみるWeb開発

388 views

Published on

12/20開催の「高専カンファレンス100」にて発表したスライドになります。発表できなかった部分もちゃんとあります。SpeakerDeckに挙げた内容と同じですが、一応こちらにも上げます

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Node.js ではじめてみるWeb開発

  1. 1. Node.jsではじめてみる Web開発 Node.jsを使って初めてWebアプリケーションを作っていろいろ と苦労させられたお話 Coils work. | shuft鯖 (@_shuft)
  2. 2. Coils Work. | Shuft鯖 (@_shuft) < 進捗どうですか />
  3. 3. 炎上案件抱えてませんか? Coils Work. | Shuft鯖 (@_shuft) < 進捗どうですか />
  4. 4. Coils Work. | Shuft鯖 (@_shuft) < 進捗どうですか? />
  5. 5. 自己紹介 ことの発端 デモ 開発のこと 実際にやってみた おわりに 大切なおしらせ Coils Work. | Shuft鯖 (@_shuft) < アジェンダ />
  6. 6. Shuft鯖 ( @_shuft ) 舞鶴工業高等専門学校 電気情報工学科 2年 学生会副会長なんかもやってる サイト : http://coils.work/ 普段はギターを光らせたり、旋盤回したり 先日、危険物取扱者乙種第四類とりました!! Coils Work. | Shuft鯖 (@_shuft) < About me />
  7. 7. Coils Work. | Shuft鯖 (@_shuft) < About me /> 山 山 山 山 山 田
  8. 8. 電気系でも機械系でもない JK ( 情報系高専生 ) 的なお 話 Coils Work. | Shuft鯖 (@_shuft) < 今日は何の話か? />
  9. 9. Coils Work. | Shuft鯖 (@_shuft) < ことの発端 /> なんかコンテストに作品だしたいよね それな
  10. 10. Coils Work. | Shuft鯖 (@_shuft) < ことの発端 /> https://mascot-apps-contest.azurewebsites.net
  11. 11. Coils Work. | Shuft鯖 (@_shuft) < ことの発端 /> (Webで)フロントエンドとかやりたくない? わかる
  12. 12. Coils Work. | Shuft鯖 (@_shuft) < ことの発端 /> (なにつくるか…) ツイッタースタンプは? あー、なるほどー(棒
  13. 13. Coils Work. | Shuft鯖 (@_shuft) < ことの発端 /> この3人で「ツイッタースタンプ」を作ることになった! 鯖 稗 金魚
  14. 14. Coils Work. | Shuft鯖 (@_shuft) < ことの発端 /> コンテストで賞とったら回る寿司連れて いってやるから 回らない寿司な 賞を取ったら海鮮丼
  15. 15. LINEみたいにスタンプが使えないTwitterでも 簡単にスタンプが使えるようにしよう!! Coils Work. | Shuft鯖 (@_shuft) < ツイッタースタンプとは? />
  16. 16. 実際に作ったものをみてみよう! Coils Work. | Shuft鯖 (@_shuft) < どんなの作ったの? />
  17. 17. Coils Work. | Shuft鯖 (@_shuft) < 開発のこと /> • Ruby on Rails → 寮の回線(Proxy)的にインストールできない • PHP → なぜかそもそもの候補に挙がらなかった… ってことで「Node.js」で開発することに Ruby on Rails Node.js PHP
  18. 18. サーバーサイドを扱うJavaScript Google製の「V8 JavaScript Engine」というかっこいい名前のエンジンが使われ ている 非同期I/O(ノンブロッキングI/O) JavaScriptなのでシングルスレッド動作 なにより速い モジュールの管理でnpm(Node Package Manager)が使える →たくさんあるモジュールを導入でき、モジュール間の依存などを解決してくれる 例 : Mysql , Socket.io , Express , ejs , ect など… なんかすごい!! Coils Work. | Shuft鯖 (@_shuft) < Node.js is 何? />
  19. 19. OS : Windows 言語 : JavaScript ( Node.js ) ,TypeScript (一部) , EJS , CSS 開発環境 : VisualStudio , Brackets , Atom バージョン管理 : Git (Github) データベース : MySQL (InnoDB) パッケージなど : Socket.io , jQuery , Bootstrap … できればAPIをあんまり叩きたくない デザインパターン : MVC ( Model , View , Controller ) Coils Work. | Shuft鯖 (@_shuft) < 開発のこと />
  20. 20. ソフトウェア開発におけるデザインパターン(型紙(かたがみ) または設計パターン、英: design pattern)とは、過去のソフト ウェア設計者が発見し編み出した設計ノウハウを蓄積し、名前を つけ、再利用しやすいように特定の規約に従ってカタログ化した ものである。 Coils Work. | Shuft鯖 (@_shuft) < デザインパターンとは? /> 引用:https://ja.wikipedia.org/wiki/デザインパターン_(ソフトウェア)
  21. 21. MVC ( Model View Controller )とは Model : Controllerからの依頼を受けて処理を行うロジックの部分を受け持つ View : ユーザに整形した情報を表示する Controller : ユーザからの入力をView/Modelに情報を加工して通知する 引用 : http://doriven.hatenablog.com/entry/2014/11/01/032346 Coils Work. | Shuft鯖 (@_shuft) < デザインパターンとは? /> 「MVCはデザインパターンじゃねえ!」とか「MVC2と呼べ!!」
  22. 22. Coils Work. | Shuft鯖 (@_shuft) < デザインパターンとは? /> 鯖 稗 金魚 Controller 送受信 Socket.io Model 内部処理 MySQL View Web画面 Bootstrap
  23. 23. もっと詳しく知りたい… Coils Work. | Shuft鯖 (@_shuft) < デザインパターンとは? />
  24. 24. Webではフロントエンドとバックエンドについてよく言われる フロントエンド(英: front-end)とバックエンド(英: back-end)は、プロセスの最初と最後の 工程を指す一般的用語である。フロントエンドは各種入力をユーザーから収集し、バックエンド が使える仕様に合うようにそれを加工する。フロントエンドとバックエンドの結合部はインタ フェースと呼ばれる。 引用 : https://ja.wikipedia.org/wiki/フロントエンド ざっくり言うと、  フロントエンド : クライアント側からみえるところ ( Web画面 )  バックエンド : クライアントからみえない内部処理系 ( サーバー ) 鯖はどちらかというとバックエンドを担当。 フロントエンドやりたかったなあ…(こなみ Coils Work. | Shuft鯖 (@_shuft) < フロントエンド?バックエンド? />
  25. 25. まずはやってみないとはじまらないので、サンプルのコードを叩いてみる Node.jsのサイトのAboutにコードが置いてある const http = require('http'); const hostname = '127.0.0.1'; const port = 1337; http.createServer((req, res) => { res.writeHead(200, { 'Content-Type': 'text/plain' }); res.end('Hello Worldn'); }).listen(port, hostname, () => { console.log(`Server running at http://${hostname}:${port}/`); }); え、こんなけでサーバーできるん? そんなん(ヾノ・∀・`)ムリムリ… Coils Work. | Shuft鯖 (@_shuft) < 実際にやってみる />
  26. 26. 世界のみなさんこんにちはできた Coils Work. | Shuft鯖 (@_shuft) < 実際にやってみる />
  27. 27. なんやwwwめっちゃ簡単やんwwwwちょろいわwww →めっちゃフラグを立てた Coils Work. | Shuft鯖 (@_shuft) < 実際にやってみる />
  28. 28. ツイッタースタンプなのに画像が表示されない ちなみにこの問題を解決するのに丸2日かかった… Coils Work. | Shuft鯖 (@_shuft) < 実際にやってみた />
  29. 29. Coils Work. | Shuft鯖 (@_shuft) < チーム開発やってみる /> ポートフォリオ的なのじゃねーの? 機能的なサイトにしたいよね もっとスタンプの説明文いれたりさ 話がかみ合ってない!!
  30. 30. ほとんど各個人での判断で機能実装やデザインをしている →だから情報の共有(個人の考え)がうまくいってない 図 : 炎上案件を抱える図 Coils Work. | Shuft鯖 (@_shuft) < チーム開発やってみる />
  31. 31. 機能の実装が実装できたみたいなので早速渡されたコードを見てみる →このままマージすると絶対失敗するな →そこまでコードの量が多いわけでもない セルフマージするか… Coils Work. | Shuft鯖 (@_shuft) < チーム開発やってみる /> Socket.ioで機能実装できたで わかった。 マージ(コードを統合すること)するな
  32. 32. マージって? →コードとコードを結合して一つのものにすること →つまり、自分でコードを結合させた Coils Work. | Shuft鯖 (@_shuft) < チーム開発やってみる />
  33. 33. Coils Work. | Shuft鯖 (@_shuft) < チーム開発やってみる /> ツイッタースタンプなのに画像が表示されない ( 2回目 ) ちなみにこの問題を解決するのに丸1日かかった…
  34. 34. 先日Routerを実装するために今まで拒んでいたExpressを導入することに Router : URLを解析してURLに一致するページをクライアントに渡すところ →高専カンファレンストップページ : http://kosenconf.jp/ 高専カンファレンス100 : http://kosenconf.jp/?100tokyo Express : npmパッケージの一つ。これだけでWebアプリケーションを作るうえで必要なもの がかなりそろっている なのでプロジェクトを丸ごとExpressで使えるようにコードを書き換える Socket.ioが息してない!! Coils Work. | Shuft鯖 (@_shuft) < チーム開発やってみた />
  35. 35. Webは奥深い ただやっぱり書いてると楽しい。わからないと苦痛。 Node.jsは簡単() ただし、最初はExpressなどのフレームワークに頼らずに自分で書いてみる チーム開発は情報共有と進捗管理が大切 いつだって炎上案件は目の前 リリースしたらぜひ使ってみて よろしくお願いします! Coils Work. | Shuft鯖 (@_shuft) < まとめ />
  36. 36. 告知時間を最後にいただいているのでその時に… Coils Work. | Shuft鯖 (@_shuft) < 大切なお知らせ />
  37. 37. </ ありがとうございました > Coils work. | shuft鯖 (@_shuft)

×