私 is 誰 今年の7月にドワンゴの教育事業部に異動し、N予備校でプログラミング講師をやることになりました。 現在は週2回ニコ生やN予備校上にてプログラミング入門コースの授業放送をしています。 ドワンゴ自体は7年目となり、ニコニコ動画の開発を4年、エンジニア教育やエンジニア採用を2年ほどやってきました。 この記事で書きたいこと 現部署に異動後、教材のインプットを兼ねて『N予備校プログラミング入門コース』を履修したのですが、明らかに難易度が僕の想像した "入門コース" から外れたガチ編成になっていて衝撃を受けたことが記事を書こうと思ったきっかけです。 中身としてはとても良い教材になっているので、僕のような勿体無い誤解が少しでも減れば幸いです。 入門コースはいわゆる入門コースではない 『プログラミング入門コース』のゴールは ドワンゴがエンジニアとして採用したいレベル や IT企業のエンジニアイ
HTML5や、次々と台頭するJavaScriptフレームワークにみられるように、現在のフロントエンドは異常なほど動きがあります。 常にキャッチアップしていないと、いつのまにかOLDな技術を使い続けることになります。実際に今回記事にしてみて、ちょっとつらくなりました。。 しかし、フロントエンドエンジニアとしてコードを書いていて（最近は主にJavaScript）、そのおもしろさに日々驚いています。 そこで今回は、ここ数年~2015年のフロントエンド界隈で一度は流行った技術、今後の動向などをまとめました。タイトルにモダンとありますが、その辺は適当です。ぜひ一度整理してみてください。 目次 Javascriptフレームワーク React.js Angular.js Angular.js 2.0 Backbone.js Vue.js Mithril.js Aurelia.js Knockout.js
今回は高校生の私たちが公開した投票サイトが三日で１万PVを記録したので、その経緯をサイトの紹介も含め、全て公開します。 qiitaで後日談を書きましたので、よかったらお読みください リンクはこちらです サイトの内容 名前はAICEVOTE(アイスボート) リンクはこちら ----> aicevote.com(大量アクセスで現在サーバーが不安定な状況です。ご了承ください。) このサイトを一言で言うとこんな感じです。 "投票用紙を氷に見立てた次世代のリアルタイム投票サイト" AICEVOTEとは 普通の投票とAICEVOTE（アイスボート）の違い 普通の投票 普通の投票では、投票箱A/Bに最終的に投票された票の数の比で結果が決まります AICEVOTE AICEVOTEでは投票用紙の代わりに氷を投票します。 それぞれの投票箱の底は網目になっています 時間が経てばあなたが投票した氷は少しずつ溶け
気兼ねなくアクティビティを書き留められるTrickleというサービスをリリースしました - maru source
こんにちは丸山@h13i32maruです。 今日、Trickle（読み:トリクル）というサービスをリリースしました！ アクティビティ トピック 他の人のアクティビティ Trickleは「Twitterなにか少し疲れてきたなぁ。でもやめたいわけではないし、うーん」と僕が困っていたことを自分で解決するために作ったサービスです。 なので自分をターゲットにしたサービスなのですが、せっかくなので多くの人に使ってもらいたい！というわけで、リリースのお知らせを兼ねた紹介記事を書きました。気になった方は是非続きを読んでみてください。 まとめ 自分のアクティビティをトピックごとに気兼ねなく書き留めることができる ジョギング、読書、猫と遊ぶ、などの自分で作ったトピックごとにアクティビティを書き留める 他人の興味あるトピックだけをサブスクライブ（いわゆるフォロー）できる 「Aさんの読書トピックはサブスクライブし
Node.js＋Socket.IO＋MongoDB こんにちは！ 著者は、マインドフリーという会社でNode.jsを使ってWebアプリなどを作成している。この連載では、最新Webテクノロジを使った研究開発の事例や実績を発信する弊社のサイト“Tech Release”のリニューアルで培ったNode.jsに関する知識を分かりやすくお伝えする。 Tech Releaseは一見、普通のブログに見えるが、実は記事の更新内容がリアルタイムにView画面に反映されている。管理者が、記事の文章（データ）に変更を加えると、その記事を見ている人にもページをリロードせずに、リアルタイムに文章（データ）が変化していく。 このUXを実現するために開発したシステムが、REALTIME BLOG ENGINE「REABLO」というエンジンだ。「REABLO」はNode.jsとSocket.IO、MongoDBを使用して
2020年のフロントエンドエンジニアの技術スタックの一例
年の瀬なので、私自身が今年利用した技術をベースに技術スタックをまとめてみようと思います。 とはいえ Web Standard といった広い対象から、フレームワークやライブラリまで、粒度の違うものを全て言及するのは無理があるというもの。特に強く言及できるものは個別で説明しつつ、最後に利用する機会がなかったものも最後に記載する形で。 以下常体。 追記: マイナー企業のようなので一応書いておきますが、筆者は本業ではLINE株式会社という組織でいわゆるエンジニアリングマネージャーと言われるような業務とその採用に関わる仕事をしています。 利用した技術一覧 HTML/CSS/JS みたいなことを書いてるとキリがないので、独断と偏見で区分けして適宜漉いています。特に利用する機会が多かったものは太字でピックアップ。 Frontend Language/Platform TypeScript JavaScr
Node.jsのMySQLパッケージにおけるエスケープ処理だけでは防げない「隠れた」SQLインジェクション - Flatt Security Blog
※本記事は筆者styprが英語で執筆した記事を株式会社Flatt Security社内で日本語に翻訳したものになります。 TL;DR Node.jsのエコシステムで最も人気のあるMySQLパッケージの一つである mysqljs/mysql (https://github.com/mysqljs/mysql)において、クエリのエスケープ関数の予期せぬ動作がSQLインジェクションを引き起こす可能性があることが判明しました。 通常、クエリのエスケープ関数やプレースホルダはSQLインジェクションを防ぐことが知られています。しかし、mysqljs/mysql は、値の種類によってエスケープ方法が異なることが知られており、攻撃者が異なる値の種類でパラメータを渡すと、最終的に予期せぬ動作を引き起こす可能性があります。予期せぬ動作とは、バグのような動作やSQLインジェクションなどです。 ほぼすべてのオンラ
TwitterはScalaを捨ててNode.jsに移ったそうです。 - 望月いちろうのREADME.md
2017 - 02 - 24 TwitterはScalaを捨ててNode.jsに移ったそうです。 Node.js Scala Tweet 世界で最も大きなトラフィックを捌いているサービスの１つであるTwitterはそのバックエンドをScalaで独自開発したフレームワーク(Finagle)を採用していましたが、ここ数ヶ月の間にこれをNode.js(Express)に置き換えたそうです。 以下はTwitterのエンジニアであるNicolas Gallagherさんのツィートより github.com Today we moved all of Twitter's mobile web traffic (that's like, a lot) to our new web stack – Node.js, Express, React PWA. — Nicolas (@necolas) Febr
はてブとpocketから一括検索できるwebサービス『tanaoroshi』を作ってOpenshiftで公開しました - undefined
最近Node.js + AngularJSでこそこそ作ってたWEBサービスを公開しましたので紹介します。 お詫び(7/4 7:25追記) ちょくちょくクラッシュしているようです。申し訳ありません。 セッションをメモリで管理しているため、クラッシュした場合再ログインしていただく必要があります。ごめんなさい。 あとconnect.session() MemoryStoreはメモリリークがあるっぽいです。production環境での使用は非推奨っぽいですね。connect-mongo等を使用する必要がありそうです。順次対応いたしますのでよろしくお願いいたします。 作ったもの http://tanaoroshi.bokuweb.me/ Tanaoroshi. なんぞこれ？ 「はてなブックマーク」と「pocket(旧read it later)」のデータから一括検索・閲覧するためのシンプルなWEBサ
リリース頻度を毎週から毎日にしてみた - NTT Communications Engineers' Blog
目次 目次 はじめに NeWork とは リリース頻度変更の背景 それまでの運用 課題 実現方法 解説 日次でワークフローが起動するようにする main ブランチの HEAD にタグが付与されていなければ付与する develop に差分があれば main へのマージを自動で行う 細かな工夫点 main の内容を develop に自動で取り込む 祝日はリリースしないようにする 自動リリース・自動 develop → main マージの制御 Slack にリリース結果を通知する stg 環境に変更内容を通知する その他の考慮 上司への事前説明の省略 スプリントレビュー前のリリース リリースノート 品質面 リリース頻度を変えてみて おわりに はじめに こんにちは、NeWork 開発チームの藤野です。普段はオンラインワークスペースサービス NeWork のエンジニアリングマネジメントをしています
Webアプリケーションの堅牢化に欠かせない知識を凝縮！ セキュリティ学習のスタートに最適の一冊！ 本書は、安全なWebアプリケーションを開発するための基本知識を、フロントエンドエンジニア向けに解説したセキュリティの入門書です。 これまでWebアプリケーションの開発で、セキュリティは「バックエンドの仕事」というイメージの強い領域でした。しかし、アプリケーションの安全性を高めるためには、フロントエンドエンジニアにも、セキュリティの基礎知識や具体的な対策の実践が求められます。 本書では、Webセキュリティの必須知識である「HTTP」「オリジン」などの基礎トピックや、「XSS」「CSRF」といったフロントエンドを狙ったサイバー攻撃の仕組みを、サンプルアプリケーションを舞台にしたハンズオンで学びます。 もちろん、攻撃からユーザーを守る防御の手法もしっかりおさえます。個々の攻撃手法に応じた対策のほか、
Node.js + Express を Heroku で動かすまでの手順まとめ - tacamy--blog
普通の JavaScript も jQuery もまともに書けないけど、はじめての Web アプリを Node.js でつくってみるという奮闘記。 環境つくるだけなのに何も分からなすぎてハマりすぎて、この一連の流れだけで丸 2 日潰れるという大惨事だったので、ちゃんとブログに残しておく。 Node.js のインストール Node.js の INSTALL ボタンから、インストーラを使って入れることもできるけど、Node.js のバージョンを切り替えて使える方が便利だと思うので、前回のエントリを参考に nodebrew を使ってインストールするのがオススメ。 node.js 入れるなら nodebrew が超簡単 - tacamy memo インストールが正しくできているか確認のため、Node.js のバージョンを表示。 $ node -v npm のインストール Node.js にはたくさ
Railsの各種サーバーの速度ベンチマーク: Pound、Varnish、Nginx、Unicorn、Mongrel
Railsの各種サーバーの速度ベンチマーク: Pound、Varnish、Nginx、Unicorn、Mongrel RailsのアプリをPound、Varnish、Nginx、Unicorn、Mongrelを使用して動かした際の速度ベンチマーク。以下の構成での同一Railsアプリをhttperfでベンチマークした結果をまとめます。 Pound -> Varnish -> Nginx -> Unicorn * 2 Varnish -> Nginx -> Unicorn * 2 Nginx -> Unicorn * 2 Mongrel (Rails.env == 'development') node.js (Express + Socket.IO) 全体の構成Poundを80番ポートを公開し、Varnishを81番ポート、nginxを8080番ポート、Unicornの2プロセスをsocke
Rendr入門(1): Node.js + Backbone.jsでサーバ & クライアントを構築する"Rendr"の紹介 - Qiita
Rendr入門(1): Node.js + Backbone.jsでサーバ & クライアントを構築する"Rendr"の紹介JavaScriptNode.jsBackbone.jsExpress.jsRendr はじめてQiitaで記事を書いています。先日「Node.js + Express.js + Backbone.js」でサーバとクライアントの両方のシステムを構築する"Rendr"というウェブフレームワークを試しました。Rendrは、アメリカで人気のサービス"AirBnb"のチームが開発し、オープンソースとして公開したものです。クライアント側での採用事例は増えているBackbone.jsですが、サーバでの利用は珍しいのでは無いでしょうか。Rendr自体もまだ日本語での紹介例が無い事もあり、システムを紹介しつつ、使用感やメリット、そしてデメリットをメモしておこうと思います。 ※2回目を書
ここ数年前から2015までのモダンフロントエンドを総まとめしてみた｜デロイト トーマツ ウェブサービス株式会社（DWS）公式ブログ
HTML5や、次々と台頭するJavaScriptフレームワークにみられるように、現在のフロントエンドは異常なほど動きがあります。 常にキャッチアップしていないと、いつのまにかOLDな技術を使い続けることになります。実際に今回記事にしてみて、ちょっとつらくなりました。。 しかし、フロントエンドエンジニアとしてコードを書いていて（最近は主にJavaScript）、そのおもしろさに日々驚いています。 そこで今回は、ここ数年~2015年のフロントエンド界隈で一度は流行った技術、今後の動向などをまとめました。タイトルにモダンとありますが、その辺は適当です。ぜひ一度整理してみてください。 (ここではフロントエンドというのを、ざっくりとHTML/CSS/JavascriptをつかったWeb技術のことをいうことにします)。 目次 Javascriptフレームワーク React.js Angular.js
本稿は、Christffer Noring さん (@chris_noring) の Learn Docker, from the beginning を翻訳し、分かりやすいように少しだけ追記、サンプルコードの実行上の補足等を行ったものです。Docker について教科書的な使い方を実際に実行して確認しつつ、Docker Composeを使ったオーケストレーションの基礎までを導いてくれます。今、Docker で注目されるのは、コンテナ同士が連携する、オーケストレーションです。本稿ではオーケストレーションの最も基礎となる Dokcer Compose までですが、オーケストレーションを活用するための基礎的部分の考え方を実地を以ってしっかりと理解できます。その意味で、原題は「from the beginning」ですが、初心者向けと言うよりも、今現在進行形の技術トレンドをキャッチアップするための
ニコニコメソッドプレゼンを全社会議に取り入れてみたら会議が面白くなった - Uzabase for Engineers
技術チーム竹内([twitter:@chimerast])です。 作ったものが知らない間に記事のネタにされていたので、どんな仕組みで動いているか技術的なところについて書いてみます。どう使われているかの細かい話は、後日ブログ内に別の記事が上がる予定です。 （6/2 追記：「みんなの会」の動画配信システムについて記事を投稿しました。） tech.uzabase.com 全社会議で「ニコニコメソッドプレゼン」 作ったもの: Chrome機能拡張「NicoNico SPEENYA」 作るのに使ったもの Socket.IO Google Chrome機能拡張 Web Animations API Node.js + Express まとめ 宣伝 全社会議で「ニコニコメソッドプレゼン」 だいぶ昔にWeb業界界隈で話題になった(?)ニコニコメソッドプレゼンを、週一の全社会議で取り入れたところ、プレゼンの
こんにちは、吉岡([twitter:@yoshiokatsuneo])です。 今、一番身近なプログラミング言語といえば、間違いなくJavaScriptです。 JavaScriptは、インターネット利用に必須のウェブブラウザ上で動作する唯一のプログラミング言語です。 プログラミングを学ぶ時も、いつも使っているブラウザ上で動作させることができて結果が見えるため、興味を持って始めるやすい言語かと思います。 JavaScriptには、広く使われていること、活発な開発、インターネットとの相性の良さ、非同期プログラミング、仕様が標準化されていること、オープンソースでの実装があること…などなどの特徴があり、今や以下のような様々な用途でも使われるようになっています。 ウェブブラウザ(Chrome, Firefox, Internet Explorer...) サーバアプリケーション(Node.js, Ex
普段自分はHeroku+Sinatra+Slim+SassでWebアプリを作っているんだけど、Node.jsやCoffeeScriptについてちょっと調べてたら、Herokuを使う前提で、Node.js(Express), Jade, Sassという組み合わせでCoffeeScriptで書けば、前述のSinatraアプリとほぼ同じような感覚で書けそうなことに気づいて、ぐっとNode.jsに興味が沸いた。 ということで、さっそくHerokuを使ってNode.jsアプリを作ってHello worldしてみた。今回の記事を最後まで行くと、これが出来上がる。ソースコードはGitHubに。 各種インストール この記事ではNode.jsとExpressだけを使ってHello worldする。今回はJadeやSass, CoffeScriptは出てこない。まず、Node.jsとExpressを使うのに必
8月分です。Electronなど多め。 Raspberry PiとOpenCVでスプラトゥーンの勝敗を自動記録する仕組みを作ってみた hogesuke.hateblo.jp つくったもの ikashot.net どんなもの？ スプラトゥーンではバトルの履歴を見れないようになっているので、勝率がわかりません。自分の勝率がどの程度なのか知りたいなーと思ったので、勝敗を自動記録する仕組みを作ってみました。 使用技術・環境 Raspberry Pi OpenCV sinatra Ruby Electron と Polymer と TypeScript でリッチなマークダウンプレビュアー Shiba つくった rhysd.hatenablog.com つくったもの github.com どんなもの？ 結構前ですが，mattn さんが小さい markdown ライブプレビューアプリ mkup をつくっ
はじめてのJavaScript / JS Girls Tokyo #1 1. はじめてのJavaScript 2014/03/08(Sat) JS Girls Tokyo #1 PixelGrid Inc. @tacamy 2. 自己紹介 山田敬美（@tacamy） ピクセルグリッド フロントエンド・エンジニア（新卒1年目） HTML&CSS歴 : 4年 JavaScript歴 : 1年 3. 会社紹介 4. “ピクセルグリッドはJavaScriptの会社です。” 代表取締役 中村享介 5. ？？？ 6. 私のJavaScript歴 職種 JavaScript 期間 KAYAC マークアップ エンジニア すぐに挫折 2年 NAVER マークアップ エンジニア 1行も書いてない 2年 専門学校 無職 @hokacchaによる修行 1年 （修行 4ヶ月） PixelGrid フロントエンド エ
ちょっと前からですが、Node.jsで運用しているサービスのデーモン化ツールを node-foreverから、node-pm2へ変更いたしました。 foreverと比較して高機能なpm2をお伝えいたします。 クラスタリング foreverコマンドは、基本的にプロセスが生きている事を管理するのみでした。 pm2では、それはもちろんの事、使っているCPUに合わせてクラスタリングする機能が付いています。 Node.js v0.6で追加されたクラスタリング機能はソケットをネットワーク化されたNode.jsのアプリケーション間でシェアする事が出来ました。 pm2では基本機能として、追加コードなしにそれらを実装しています。pm2本体がマスタープロセスの役割をし、アプリケーションコードをクラスタリング化された子プロセスとして扱います。 すべてのCPUを使ってクラスタリングするには、 pm2 start
独学でWebプログラミングを学習できる海外のチュートリアルサイトをまとめてみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、Web開発全般のノウハウを丁寧なチュートリアル記事や動画で学習することができる海外のサイトを厳選してご紹介します。 プログラミング言語の学習だけでなく、ReactなどのフレームワークやWebデザイン、サーバーサイドの開発手法など幅広い知識を身につけることができるようになります。 これからWeb開発の学習を始めようとしている人はもちろんのこと、すでに何らかの業務を進めている人も新しい発見があると思うのでぜひ参考にしてみてください！ ■世界中のチュートリアル講座を横断検索できるサイト！ 【 Coorsy 】 ネット上で公開されているプログラミングのチュートリアル講座を定期的にキュレーションしており、好きなキーワードを入力することで自分が学びたいコースを簡単に検索できるのが「Quick Code」です！ 学習できるジャンルが幅広いのも特徴で、
WebSocket + Node.js + Express — Step by step using Typescript
UpdateCheckout my new Angular WebSocket client article 😙. You could be interested in my article about realtime and schemaless database (Cloud Firestore) and Angular -> Step by step tutorial and “CUD operations, transactions and batch writes deep dive”.
Clean ArchitectureをNode.js+Typescriptで実装してみる | スペースマーケットブログ
こんにちは。バックエンドエンジニアの西尾です。 スペースマーケットではAPIサイドは主にRailsを利用していますが、最近は一部サービスでNode.js+Typescriptを使い始めました。 個人的にはまだ触れていなかった領域であったのでお勉強がてら簡単なコードを書いてみたいと思っていました。 また、Node.jsの他にもう一つ最近気になり始めていたものにClean Architectureという設計思想があり、Clean Architecture 達人に学ぶソフトウェアの構造と設計を読んでいます。 本の概要は、アプリケーションが成長するに従い徐々に改修コストが上がってしまう、これを防ぐためにはうまい方法、つまり良い設計を知っている方法があるという導入から始まり、設計の歴史、原則とそれを実現するための１手段としてClean Architectureという設計思想について語られています。
ちょっとnode.jsでAPIサーバ作ろうとして express4に上げたらいろいろと使い方が変わっていたので 備忘録的に書いておきます。 expressでのプロジェクトの作り方 ここを見ながらやるのが確実。 https://www.npmjs.org/package/express express3の場合 express3までは $ npm install -g express # グローバルにexpressコマンド入れて $ express appName # expressコマンドでひな形作成 .. $ node app.js # アプリケーション起動 こんな感じでexpressプロジェクトを作れましたが、 express4から結構変更されています。 express4の場合 express4ではひな形を作るコマンドが本体から分離されました。 またアプリケーションの起動方法も変更されて
SIer/年収1000万を手放した私 ( 後編 / 復活の章 ) 〜 webエンジニアの 挫折者から生存者へ 〜 - 毛並みの揃った話はないけれど
はじめに みなさま、おはこんばんにちは。 私は プレイド のエンジニアの大平(おおひら) (@Victoria_Peak_) と申します。 7年勤めた野村総合研究所を辞め、2018/07〜現在まで 株式会社プレイド で勤務しています。 twitter.com 日々の活動内容(プログラミング・SaaS/SIer・ロードバイク・減量など)をつぶやいたりしておりますので、本エントリを読んで興味を持たれた方は、twitterでフォロー、リプライ、メッセージなどをいただければと思います。基本すぐに回答します。 本エントリは、去年2018年12月に執筆した、 前編 と、 今年2019年9月の 中編 、 後編 の 挫折の章 の続編になります。 www.taihey-blog.com www.taihey-blog.com www.taihey-blog.com - 対象読者 エンジニアに限らず前向きに人
フロントエンドの消失 - または戦争が激しくなる話
React Server Components に感じたフロントエンドの消失という記事に端を発する一連の議論だが、実際この記事で書かれていることはそうだろうなと思う。話の流れとして誤ってる部分はないと思うし同意する。 この記事ではフロントエンドエンジニアとして、この件についての僕の見解を書く。もちろんフロントエンド（とは？）の総意ではない。 元記事と重複する部分多いが、そこは同じ問題を取り扱う以上避けて通れないため、ご容赦いただきたい。 同じ領域を取り扱ってる以上、開発戦争は激しくなる 様々な理由によりユニバーサルが求められている ※この記事でいう「戦争」とは、お互いの領域を食い合う開発が、活発化することを「戦争」と称しているだけです。それ以上の意図は全くございません 領域がかぶっている 最近のフロントエンド系ユニバーサルエコシステムは、たしかに PHP や Rails の領分を侵そうとし
node.js + express + mongoDB + WebSocket などのリンクまとめ - shohu33's diary
環境設定等 ・Ubuntu+nginxでnode.js+npmのインストールからデプロイまで Ubuntuで構築しているので参考になった。 本記事のコメント欄も興味深いコメントが nodejs1プロセスだとブロッキングすると終わるのでfugueなどを使う方がいい。websocket使うならhaproxy使うこと ・node.js のホスティングサービスまとめ node.js + Express テンプレート ・request情報をテンプレートに渡す デバッグ ・node.jsデバッグ方法 バリデーション ・node-validator ・Live form-validation with Node.js ログイン認証 ・Node.js+Express+Mongoose(MongoDB)でログイン認証 簡単なユーザー認証の仕方のサンプルソース有り ・expressの本家サイト, Passin
REST API Design Best Practices Handbook – How to Build a REST API with JavaScript, Node.js, and Express.js
I've created and consumed many API's over the past few years. During that time, I've come across good and bad practices and have experienced nasty situations when consuming and building API's. But there also have been great moments. There are helpful articles online which present many best practices, but many of them lack some practicality in my opinion. Knowing the theory with few examples is goo
The kraken suite Kraken is a secure and scalable layer that extends express by providing structure and convention. Though kraken is the main pillar of our framework, the following modules can also be used independently: Getting started 0. Install node.js and essential build tools Install node.js, which will in turn install npm, which is used to manage all your dependencies. In order for the npm in
50以上の言語に対応！何でも開発可能な無料のクラウドIDE「Repl.it」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、多彩なプログラミング言語を活用したプロジェクト開発ができる無料のクラウドIDEをご紹介します。 HTML / CSS / JavaScriptを利用したフロントエンド開発から、Node.js / Python / PHP / Ruby / GOなどを使ったバックエンド開発まで、さまざまな言語を利用した開発環境がブラウザ1つで完結できるのが特徴です。 他にも、GitHub連携や複数人とコラボなども可能なので、ご興味ある方はぜひ参考にしてみてください！ 【 Repl.it 】 ■「Repl.it」の使い方 それでは、「Repl.it」をどのように使うのか詳しく見ていきましょう。 サイトのトップページにアクセスしたら【start coding】ボタンをクリックしてください。 プログラミング言語を選択する画面が表示されるので、好きな言語を選びま
はじめに Webアプリケーションを作る手段はLAMPだけではありません。 ちょっとしたものであればnode.js + express + SQLite3を使えば驚くほど簡単に作ることができます。 ここでは例として簡易版twitterのようなミニブログを作ります。 必要となる知識 コマンドラインツールの扱い方 HTML, JavaScript SQL このエントリを読んでできること node.jsを使って短時間でWebアプリケーションを作る このエントリを読んでもできないこと 小規模でないWebサービスを作って運用する WebSocketを使ってリアルタイムWebアプリケーションを作る アウトライン 1.node.jsをインストールする 2.アプリケーションを作って動かしてみる 3.フォームから受け取ったデータを表示する 4.SQLite3を使ってデータを永続化する 1.node.jsをイン
昨日の記事では、Node.jsアプリでHello worldする際に、それに必要なファイル(web.js, package.json, Procfile, .gitignore)を1個ずつ新規作成してたけど、expressコマンドを使えばその雛形を自動生成できることに後から気づいた。これを使うと、web.js(=app.js)とpackage.jsonの2つは自動生成できる。Sinatra単体には無い機能だね。 あと、Sinatraアプリ開発時に使われる自動リロード機能(ShotgunやSinatraReloaderなど)に相当するnode-devをちょっと使ってみたので、それについてもメモ。 expressをグローバルインストール expressコマンドを使うには、Expressパッケージをグローバルインストールする。 $ npm install -g express /Users/ru
「Glance(グランス)」 ~カップルのためのYes/No枕アプリ~ 2018/01/03より、「Yes/No枕をアプリで」というコンセプトの元に作られたアプリをリリースしましたー！ 結構、謎仕様が多くて使い所も不明ですが、 9月ぐらいの「八耐｜八時間耐久製作会」というイベントでアイデアから本日のリリースに至りました。 機能 アプリアイコンが動的に変わる、Yes/No枕アプリ 特徴 iOS10.3からの機能で、アプリアイコンがYes/Noに動的に変わり、お互いにステータスが見れるというコンセプトです。 サーバーサイドはserverless frameworkで LambdaとDynamoDBを使っており、メンテコストはほぼ0(ゼロ) アプリ Swift4.0 サーバー serverless framework DynamoDB Lambda API Gateway serverless
(English article is here.) こんにちは、吉岡([twitter:@yoshiokatsuneo])です。 最近のリッチなWebサービス開発ではブラウザ(クライアント)とサーバ両方のコードを書いたり、Webソケットなどで連携したりすることもあり、気軽に取り組みづらくなっています。しかし、MEANスタックはクライアントからサーバまで全てをまとめた環境で、これを使えば素早くWebサービスを作ることができます。 今回は、MEANスタックの開発環境の一つ、AngularJS Full-stack generator(generator-angular-fullstack)を用いて実際にサンプルプログラムを動かしたり、修正したり、Herokuにデプロイしたりしてみます。 ブラウザ側のJavaScriptコードだけの作り方や、サーバ側だけのコードの書き方はWeb上でも多くでてい
はじめに 今関わっているプロジェクトで7万行以上のコードを、JavaScriptからTypeScriptに移行するというのを経験しました。 移行するにあたっての準備や手順、実際にやってみて感じたことなどを共有します。 プロジェクトの概要 フルスタックWEBアプリケーション フロントエンド: JavaScript + React バックエンド: Node.js + Express.js + GraphQL なぜそもそもTypeScriptを採用しなかったのか 事前に技術選定をした際に、TypeScriptを利用するかどうかの議論はありました。 当時は以下の理由から採用しないという選択に至りました。 JavaScriptの開発に慣れていたため、TypeScript型定義=面倒というイメージが強かった 「スピードが命」と考えており、TypeScriptを使うことで開発効率が下がると思っていた プ
完全無料！動画で実践的なWebプログラミングを学べる海外YouTube厳選まとめ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、実践的なWeb開発をじっくり動画を見ながら学習することができる良質な海外YouTubeのチュートリアルコースを厳選してご紹介します！ 主に、JavaScriptをメインにしたNode.jsやReact / React Nativeなどを徹底的に学べるコースを選んでいますが、最近のトレンドに沿ったWebサイトのデザイン＆開発手法についても一通り学べるようになっています。 動画を見ながら、どのようにコードが構築されていくのかを観察しながら自分なりのプログラミング手法を見つけていくのも楽しいと思います。 ■Webサイトのデザインからプログラミングまで学ぶ！ 【 12 in 12 Design to Code Challenge 】 レスポンシブなWebサイトや「ランディングページ」「ポートフォリオ」など、全12回の動画でさまざまなWebサイト
【保存版】Udemy 350コース突破記念 講師に全力 リスペクト企画 オススメ コース紹介【入門者向け】 - Qiita
目的 趣味がUdemyの筆者が毎日楽しく勉強させて貰っているのは日々解り易かったり、 ニッチだけど半端なくエッジが効いた知的好奇心をそそらせてくれているコースを出してくれる Udemy講師陣にリスペクトを込めたかった Udemy講師陣へ 僕が毎日楽しく勉強させていただけるのは。あなた達のお陰です。ありがとうございます また350コース突破したのはいい機会なので色んなオススメコースを プログラム入門者に伝えると同時に動画学習の筆者なりのコツも伝授したかった。 プログラム入門者のイメージ 主に実務経験が無くウェブアプリ(PHP、Ruby On Rails、Java)、モバイルアプリ(iOS、Android)、 サーバー管理・環境構築（CentOS、 Ubuntu）、データベース(SQL) 人工知能・データサイエンス(Python、R、Spark)の技術的を身に付けたい人 上記に当てはまらない、
Rust for the web "Can we create web apps in Rust?" - Many people asked. So am I. My primary goal when I started learning Rust is to make a move from my ducky JavaScript tech stack (Node.js Express), that means, to make web apps in Rust. And after a year, I learned something. So I write this post to tell you my journal into Rust Web Programming. There are many approach to creating web apps in Rust,
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
N予備校プログラミング入門コースで学べること - Qiita
ここ数年前から2015/5までのモダンフロントエンドを総まとめしてみた
高校生がリアルタイム投票サイトを公開したらいきなり1万PVを記録した話 - Qiita
Node.js、Socket.IO、MongoDBでリアルタイムWeb
フロントエンド開発のためのセキュリティ入門 知らなかったでは済まされない脆弱性対策の必須知識 | 翔泳社
超基礎からの 速習 Docker (1) - Qiita
2017年版、5分でわかるJavaScript入門(ES6対応版) - paiza times
HerokuでNode.jsとExpressを使ってHello worldする - アインシュタインの電話番号
2015年8月に見つけたWEBサービス等作ってみた記事まとめ - undefined
はじめてのJavaScript / JS Girls Tokyo #1
【Node.js】foreverより高機能なpm2でデーモン化
express4でRESTful API作る - yutaponのブログ
krakenjs - Give your node.js express apps some extra arms
やさしいnode.jsアプリケーション - Qiita
Node.js(Express)アプリの雛形を自動生成する - アインシュタインの電話番号
カップル向けのサービスをメンテフリーで有名なserverless構成で出した話 - Qiita
最新・最速！Webサービスが今すぐ作れる！ - MEANスタック開発(1) - paiza開発日誌
7万行のJavaScriptコードをTypeScriptに移行した話 - Qiita
Rust for the web | Huy's Blog