今年、JavaScriptでの仕事の幅を広げた技術６選 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? こんにちは。久しぶりのQiita投稿です。 今回は「ex-KAYAC Advent Calendar」の13日目の記事として寄稿させていただきます。 さて、改めて私の今やっていることを紹介させていただきますと、独立してから株式会社Lucky Brothers & co.という会社を設立し、主にWebの受託制作を行っています。 かれこれ３期目に突入致しました。 アドベントカレンダーということで改めて2018年という年を振り返ってみたのですが、一言で言うと「今年はフロントエンドエンジニアにとって大きな当たり年であった」と言えるのではないかと
Nuxt.jsで作った静的サイトのビルド/テスト/デプロイを自動化して、毎朝10時に更新する。
AWSとCircleCIの力を借りて、Nuxt.jsで作った静的サイトの運用をできるかぎり自動化した話です。 3ヶ月ほど前からCIのサービスを使うようになり、入門記事はたくさんあって助かったのですが、具体的にどんな感じで使っているかの情報が少なかったので記事にしました。 もしかしたら、CIの使い方が間違っているかもしれないので、そのときは優しくコメントをいただけたら嬉しいです。 できあがった流れ 毎朝10時にLambdaを起こしてデータの更新を行い、静的ファイルを再生成してからデプロイする流れになっています。 対象のサイト ざっくりAWSという、AWSの料金を日本円でざっくり計算できるサイトです。 Nuxt.jsで作成したものを、静的サイトとして生成して、AWSのS3にホスティングしています。 計算に必要なAWSの価格や為替は、毎朝10時に取得したものをS3にJSONで保存し、そのJSON
ServiceWorkerをproductionで使ってる話 - 橋本商会
https://gyazo.com/343caf0f14cc565ce656a43e9a02aad2https://gyazo.com/471d8cab15bf364febe29e6f2cafb5ad
JavaScriptユニットテストの理想と現実
Talk at 関西Node学園 梅田キャンパス 1時限目 https://nodejs.connpass.com/event/82614/
Web アプリの JavaScript の初期化処理をどうまとめるか - r7kamura - Medium
いわゆる JavaScript のエントリポイントを、どういうパターンで管理しているかについて。 ディレクトリ構成自分の場合、次のようなディレクトリ構成でまとめていることが多い。 client/javascripts/entryPoints/*.jsclient/javascripts/initializers/*.js実例を挙げると、現在携わっているプロジェクトでは以下のようなファイルが存在する。 client/javascripts/entryPoints/client.jsclient/javascripts/entryPoints/server.jsclient/javascripts/initializers/googleAnalytics.jsclient/javascripts/initializers/helmet.jsclient/javascripts/initiali
ReactとPHPでリアルタイムなシミュレーションゲームを作ってみた
複数人でプレイできて、経営シミュレーションの仕組みを取り入れたゲームを作りたい。Stardew Valleyから交流機能を省いた、経営活動ができるゲームだ。 こう考えた私は、PHPとReactJSでゲームを開発することにしました。 しかし問題は、複数人でプレイするゲームの構成や、プレイヤーと経営の仕組みを実装する方法について何も知らなかったことです。 自分自身にReactJSを使うだけの知識があるのかすら分かりませんでした。初期のバージョンではサーバーの処理と経営の仕組みを実装することに重きを置いているので、インターフェイスの構築にはReactJSが適しています。経営の仕組みとして考えている農業とのインタラクションについては自信がありませんが、経営システムを単一のインターフェイスで構築するのは魅力的なアイデアです。 私がJavaScriptによるゲーム開発に関する本を執筆したきっかけは、d
愚直にESLintを導入した話 | メルカリエンジニアリング
こんにちは、エンジニアの@sota1235です。 タイトルの通り、今回は愚直に改善をした話をします。 メルカリのJavaScript メルカリにおけるJavaScriptの活用場面は以下のようなものがあります。 メルカリWeb アプリ内Webview 社内ツール React Native Node.js製のbotやGoogle App Scripts etc… いずれもサービスにとって重要なものであり、サーバサイドエンジニアであってもJavaScriptに触る機会は少なくありません。 かくいう私も普段はサーバサイドエンジニアですが、JavaScriptコードを書いたりレビューする場面が多くあります。 そんな中でWebチームにおいて、JavaScript開発でいくつか問題がありました。 課題その1: JavaScriptのレビューコスト問題 1つ目の課題としてJavaScriptのコードをレ
amakan の React コンポーネント設計 - ✘╹◡╹✘
説明用の図 例として、amakan anime のトップページ https://anime.amakan.net/ の構造を挙げながら説明する。(ところで amakan anime は今月中に完成予定のサービスで実験的に公開している状態なので、まだまだ至らないところが多々あります…) 登場するコンポーネント一覧 React.Component クラスを継承したクラスをコンポーネントと呼ぶ。主に登場するコンポーネントは以下の通り。 Header Layout Router VideoPrograms Router コンポーネント 最上位のコンポーネントとして、Router コンポーネントが存在する。このコンポーネントを利用して、ページごとにどのコンポーネントを表示すべきかを分岐させる。amakan anime のトップページでは VideoPrograms コンポーネントを描画し、amaka
小〜中規模サイトのフロントエンド・コーディング規約 CSS・JavaScript編 - Qiita
2021/3/16 初めて記事を書いてから３年以上経過してしまったので、 内容を見直ししました。 関係者が10名以下の小〜中規模案件の開発・保守が多い弊社のCSS・JavaScript規約（にしたい）です。 長くなってしまったコーディング規約もようやく最後です。 ↓関連 環境構成編 HTML編 CSS、JavaScript は数年で書き方が変わってしまうので、 定期的に規約の見直しができると理想ですね。 小〜中規模サイトのフロントエンド・コーディング規約 CSS編 ディレクトリ構成 CSSに関するファイルの一般的な例を示します。 ルート ├ src ... 作業ディレクトリ │ ├ scss │ │ ├ lib ... 外部ライブラリなど │ │ ├ sprite ... spritesmith などで生成したファイル │ │ ├ foundation (base) ... 変数や mix
薄いフレームワーク指向の Web クライアントサイドプログラミング - Hatena Developer Blog
こんにちは、Web アプリケーションエンジニアの id:nanto_vi です。先日開催された Kyoto.js #12 において、「薄いフレームワーク指向の Web クライアントサイドプログラミング」と題した発表を行いました。とある Web アプリケーションの開発にあたって、JavaScript による GUI プログラミングにどう取り組んだかという話になります。当日のスライドの内容に口頭で伝えた内容を加え、以下にまとめます。 前提 SPA ではない そこまで覚悟しなくてもよい 薄いフレームワーク指向 cf. ぼくのかんがえたさいきょうのうぇぶあぷりけーしょんふれーむわーく - YAPC Asia 2011 開発期間が決まっている Web アプリケーションを新規開発するにあたり、クライアントサイドをどう実現するか。ここでは開発期間が決まっているというのが大きな要因となり、チームメンバーの
レガシーシステム上のJavaScriptをモダンビルドにしていくwebpack利用実例 - Qiita
Livesense Advent Calendar 3日目の記事です。 この記事では自分たちが業務でやってきたJavaScriptコードのwebpack + babel導入実例ついてまとめていきたいと思います。一部でも参考になれば幸いです。 まえがき・前提 今回取り扱うこと 今回この記事では下記の観点で進めていきます JavaScriptのビルドのお話し CSS関連は取り扱わない（ちょっと触れる） 実践的なwebpackの利用方法・ノウハウ 入門的な部分は扱わない 既存コードが存在するプロダクション環境で既存のコードを置き換えることを前提とした泥臭めな話中心 ワークアラウンドとしてダーティな手法を利用している部分も含まれる 新規開発を始める際などは結構違う文脈なところが多い。 別なプロジェクトでは一部機能のみBabelビルドしたり、完全に最初からフロントエンドビルド部分をwebpackに任
XSS Attack Tips / 今日から始めるXSS - http80
日々の健全なXSSにお役立てください。 ●極力短いコードでXSS 本題に入る前に軽く整理します。オーソドックスなXSSであれば、おなじみの次のようなコードになるでしょう。 "><script>alert(document.cookie)</script> *1 しかしながら、Reflectedするのにもかかわらず、場合によっては文字数制限という問題にぶち当たることもあるかと思われます。その場合、より短いコードでXSSを成功させる必要性があります。どこにReflectedされるかによって書き方は変わりますが、大まかには下記のどれかになるでしょう。 ◆HTML Body(HTML構文内) BAD: <input type="text" value="<?php echo $GET['name']; ?>"> PoC: "><script>alert(1)</script> (28文字) PoC
Webサービスを作りたい人に最適、たった1時間でJSベースのQAサイトを作る方法 - MEANスタック開発(3) -
(English article is here.) こんにちは、吉岡(@yoshiokatsuneo)です。 MEANスタック(*)は、JavaScriptのみでフロントエンド、データベース、バックエンドの全てを開発できるWebサービス開発環境です。特にMEANスタックの一つAngularJS Full-Stack generatorでは、ウェブアプリケーション開発のノウハウが詰まっており、先人の知恵を生かすことで、見通しの良いソフトウェアを簡単・迅速に開発できるようになります。 ( * ) MEANスタックはMongoDB, Express, AngularJS, Node.jsを組み合わせています。 初回の記事ではMEANスタックの説明とインストールについて、２回目の記事ではTwitter風サービスの作り方について紹介しました。 今回は、具体的なウェブサービスとしてQAサービスを構築
あの人気オンラインRPGをハックする - Qiita
70億人近い人間がプレイしている人生というオンラインRPG、 ワールドも無駄に広く建物のモデリングもテクスチャも細かく、 同じ顔のプレイヤーが二人といないほどにキャラメイクが豊富で大変人気のあるゲームです。 ただこのゲーム、現代のゲームに必須なあの機能が実装されていません。 それはデイリーログインボーナスです。 デイリーログインボーナスとは デイリーログインボーナスとは、プレイヤーに毎日継続してプレイさせるため、 通常有料のアイテムを無料で毎日1つプレゼントする施策です。 現代のゲームの多くは基本的に無料なので、数多ある無料ゲームがユーザの端末と時間を奪い合っていて、ユーザの継続率を上げることは課金につなげる需要要素です。 朝起きれなかったり、出勤中に電車に飛び込んだりするのは、すべて人生にログインボーナスが無く、継続のモチベーションが弱いからです。 人生をよりモチベーティブにするためには
cybozu.com 稼働状況 を React/Redux で作り直した話 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。Sales Systemチームの金子です。Sales Systemチームでは、cybozu.com Store や、販売管理システム等の開発をしています。 このエントリでは、cybozu.com 稼働状況のフロントエンドをReact/Reduxで作り直した話を書いていきます。「React/ReduxでWebアプリケーションを作ってみようと考えている人」を対象としています。 TOC 「cybozu.com 稼働状況」とは? 作り直した背景 技術概要 React/Fluxについて React/Redux Routing Resources Async Multilingualization/Localization ES6 Utility Lint Testing 取り組んでみた感想 まとめ 「cybozu.com 稼働状況」とは? クラウドサービスはサービスの稼働状況をステータス
JavaScriptのコメントは不要か？ | POSTD
コード中にコメントを書くべきでしょうか？ 是が非でも避けるべきでしょうか？ それとも控えめに書けばいいでしょうか？ 開発者たちはそれぞれ、ソフトウェアを開発する際にどのように、そしてどんな時にコメントを書くかについて、独自の考え方を持っています。この記事では私の意見を述べますが、これが誰にも当てはまるというわけではありません。 なお、関数型プログラミングまたはオブジェクト指向プログラミングの原則に則ってJavaScriptで書かれたソフトウェアに絞った上で、私の意見を述べることにします。 コメントと保守性 この記事では、保守性のあるコードを書く場合について考えます。つまり、以下のようなコードです。 簡単に理解できる 簡単に拡張できる 簡単にデバッグできる 簡単にテストできる 保守性のあるコードには、大量のコメントが必要でしょうか？ 明確に書かれたコードであるならば、大量のコメントは不要だと
素のJavaScript（TypeScript）でMVCモデルのToDoアプリをつくってみた
photo by Sébastien Barré AngularJSやBackbone、KnockoutJSといったMV*フレームワークや、ReactといったVに特化したフレームワーク、jQueryといったライブラリがいっぱいある。 AngularJSを勉強し始めたは良いが、2.0になると全く別モノになってしまうなど、どれを勉強すればよいかわからなくなってしまった。 ということで、まずはフレームワークやライブラリを使わない「素のJavaScript」でMVCモデルを勉強してみようと思った。 つくったToDoアプリの概要は、前回の「TypeScript + AngularJSでToDoアプリをつくってみた」と同じだ。 ※ 以降TypeScriptで記載しているが、JavaScriptのソースが見たい方はGitHubにコンパイル後のソースを置いてあるので、そちらを参照ください。 Model層
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TypeScript in Wantedly // Speaker Deck
ServiceWorkerとCache APIを使ってオフラインでも動くWebアプリを作る - Qiita
nginScriptで遊んでみた - Qiita
