Web Developer's Struggle Memories

日々の業務から思ったこと、学んだことを書き連ねていきます。

JavaScript

Array.prototype.map 内で非同期関数を走らせて、配列の要素ごとに処理する +α

ちょっと Promise や async/await に躓いたのでメモとして書き残しておく。 間違った処理 当初は以下のような処理を書いていた。ある配列の全要素に対し一つ一つ処理を実行し、その結果に対して判定処理をしたかった。 let arr = [] const timeout = (ms) =>…

アルゴリズム問題「パスワードジェネレータ」を作れ

ルール 8文字固定 半角英字(大文字, 小文字を1文字ずつ), 半角数字, 記号を必ずすべて含む ※重複文字が含まれるのは許容する プログラム const STRINGS = 'abcdefghijklmnopqrstuvwxyz' const NUMBERS = '0123456789' const SYMBOLS = '!"#$%&-^¥@;:/<>+*{…

We Are JavaScripters!! #30 でLTをしてきた話

はい、本年2本目のブログはまたもや登壇してきた話ですw 今年こそは継続的なアウトプットを頑張ろうと思っていながら、なかなかブログではできていないですね。(みなさん進捗いかがですか?←お前が言うな) 今回は、かの有名な東京の JavaScript 專門の勉強…

今年「We are JavaScripters!」に参加、登壇したことや感想をまとめてみた

この記事は、We Are JavaScripters!【執筆初心者歓迎】 Advent Calendar 2018 の16日目の記事になります!(↑の画像は、connpass の 勉強会ページの1つのヒーロー画像をお借りしました。) WeJS とは We Are JavaScripters!(略してWeJS) とは、JavaScript…

Diary 2018-07-25 Nuxt, Laravel, Node.js

Today's workings Laravelの開発環境構築 Nuxt + Laravelの開発環境について調査 Node.jsの勉強 Details 1. Laravelの開発環境構築 qiita.com 2. Nuxt + Laravelの開発環境について調査 www.chatbox.blog www.wantedly.com 3. Node.jsの勉強 東京Node学園#1…

Diary 2018-07-18 Action Action Action

Today's workings jwtを調べる Nuxt.jsを試す Udemyのriot.jsのコースを聞く Details 1. jwtを調べる ことの発端はteratailにて以下のような質問を見つけたので、勉強がてら調べつつ回答した。 teratail.com なんだかんだ一番まとまっている公式リポジトリの…

Diary 2018-07-10 Overwhelming defeat

Today's workings riotjs-starter-kit Detail github.com Comments 深夜までかかったしまった + 結局うまく行かない点があるということで敗北。明日リベンジする。 Articles HTML5アプリに関わるユーザのための祭典。HTML5 APP CONFERENCE 2018 開催レポート…

Presentation about PWA at study group

はじめに A new way to deliver amazing user experiences on the web. とGoogleが提唱しているように、PWA とは、 より素晴らしいUX(ユーザ体験)を実現する新しい手法です。 主な特徴は次の3つ「Reliable(信頼性)」「Fast(高速)」「Engaging(エンゲ…

Diary 2018-06-25 Sorry. Recently I was too sleepy.

Intro 最近日記書いてなく、反省から入る。色々やることあったり、夜遅かったり、エンジニア的なチャレンジをしていなかったりなど理由付けをしようと思えばできますが、 一言で言い訳すると、 眠かったんです! (笑) いや笑えないな。反省します。 Recent w…

日記:2018-05-21

今日やったこと Riot.jsハンズオンのスライド作成の続き 「 We are JavaScripters! @19th」 への参加 詳細 1. Riot.jsハンズオンのスライド作成の続き supporterzcolab.com 正直人数はもっと少ないかと思ったら、割りと参加表明いただいて正直嬉しい次第。や…

日記:2018-05-13

←昨日の日記 今日やったこと 「 月亭方正の爆笑玉手箱!」を聴いた hyperapp しがないラジオ sp.28b sp.29a 詳細 1. 月亭方正の爆笑玉手箱!を聴いた 月亭方正の爆笑玉手箱! | 公演案内 | 一般財団法人 民主音楽協会 落語家の 月亭方正 さんのお話を聴きに…

Practices of directory composition using expressjs

せっかく仕事でNode.js(というかExpress)使ってるので、そこで実現場での使い方の例を参考にメモする。(そのまんまだとあれなので、加工済み) あと英語の勉強のため、何気にタイトルやらヘッダやらを英語にしています。 Anyway, directory structure ./ …

Showerを使って作ったスライドをPDF化

背景 最近、人前で喋るスライドを作るツールとしてShowerを使わせていただいている。 マークダウンで作れるのは嬉しいが、困るのがスライドをSpeaker DeckやSlideShareでの共有、つまりPDF化だ。 軽くググったところ、今回は以下のライブラリを採用! github…

「What the flux?」の翻訳

本投稿は以下の記事を日本語に翻訳したものになります。 (筆者の@jcreamer898氏に許可は頂いてます) jonathancreamer.com この記事は、Fluxについて物凄く分かりやすく書かれているので、「Flux難しい!」って言う方の助けになれば幸いです(*^^)v 以下、本…

「【座談会】Web Components時代のCSSデザイン」の参加メモ

かなり面白くかつ刺激的な座談会だった!以下のメモはだいぶ雑記。間違い + 誤認もあるとは思う。(componentとコンポーネントが混在している、なども) アジェンダ ベストプラクティスを探りたい Web Componentsはこの先避けては通れない CSSデザインの過去…

東京Node学園祭2016のメモ

例によって例のごとく、今更投稿する。しかもほぼ編集なしのメモ。 今回(は?も?)海外の方が多数来られていて、物凄く刺激のある1日だったし、Node.jsって楽しい!と再確認できた勉強会だった。 Famicom programming with JavaScript 当時のスペックではf…

今年1年真剣にRiot.jsと付き合ってきたので振り返ってみた

Riot.js Advent Calendar 2016の1日目です!(初トップバッター!) 今回はあまりテクニカルなプログラミングの話はせず、基本ばかりなので、その点ご了承ください(笑) qiita.com はじめに Riot.js(以下riot)は非常にシンプルかつ軽量で敷居も低く、とて…

Riot.jsでデータバインディングっぽい実装方法

はじめに Riot.js(以下riot)は非常にシンプルかつ軽量で敷居も低く、とても書きやすいコンポーネント指向のUIライブラリです。(ここまでテンプレートにしたい) 今年の夏にv3.0.0が出てきたことで、さらに熱いので皆さん是非触ってみてください! ここか…

JavaScriptの即時関数の便利な使い方のいくつかをメモ

今まで使ってはいたが、こんな使い方もあるのかと感動したのでメモ。 ※そんなの当たり前じゃい!って内容だと思いますので、どうぞスルーしてくださーい 以下使い方例の一覧! 名前を強制させる jQueryとかprototype(もう使われることはないかな…)とか、い…

webpack + Riot.js + jadeで開発環境を作った話

はじめに 今までgulpを使って自動で.jsやら.scssをコンパイルするようにしていたが、今回はよく耳にするwebpackを使って開発環境を作ってみたお話。(最近触り始めてかなり気に入っている) もちろんgulp-*モジュールをフルに使えばできることだが、webpack…

続・ブラウザで別タブ・別ウィンドウを開いたことを検知する方法の問題点

はじめに(完全に余談) 本投稿は、ちょっと前に書いたブラウザで別タブ・別ウィンドウを開いたことを検知する方法という記事の続きと言うか補足になる。実際の現場では、前回書いた内容だけではほぼ使えないと思う。具体的には、ブラウザ(IEとかSafariとか…

おそらく業務で使うであろう正規表現集め(※JavaScriptを使用)

はじめに ちょこちょこ正規表現を業務で使う(例えばバリデーションチェックのためとか)が、 そのたびに勉強しないとなーと思って特に何かしたわけではなく、気付いたら数年経ってしまったので、 一応勉強したという実績を残したかったのでこんなブログを書…

ブラウザで別タブ・別ウィンドウを開いたことを検知する方法

前置き 今やっている案件(既存ECサイトのリプレイス)で実装した機能に ユーザがブラウザで別タブ・別ウィンドウを開いて商品を検索 各タブ・各ウィンドウでの検索条件を維持 (つまりそれぞれの画面でのセッションを維持) 今の画面の複製も同様に維持 と…

Riot.jsのタグのライフサイクルについてのメモ

公式ページにタグのライフサイクルについてこう書かれている。 A tag is created in following sequence: Tag is constructed Tag’s JavaScript logic is executed HTML expressions are calculated and “update” event is fired Tag is mounted on the page…

Riot.jsで変数の値によってhtmlタグに別のクラス名を付与する方法のメモ

まえおき 分かりにくいタイトルじゃの(笑) 例えばmount時に渡された変数の値を取得したり、ajaxでAPIから何らかのデータを取得し、 その結果の値によってpタグのクラス名を別々に付与したい時ってあると思う。あるよね? ほいで、それをRiot.jsだとどう書…

Riot.jsでAjaxを使った非同期通信について

はじめに 現在あるプロジェクトで、JavaScript界隈では一時期話題になった(*1) Riot.jsで開発をしている。DBとのデータのやり取りを全てAPI化しているため、APIに非同期に通信しているのだが、ちょっとコケたので(*2)備忘録として書き残す。 開発環境な…

PHPエンジニアの自分が感じるJavaScriptの可能性について

はじめに PHPを丸3年触った自分だが、本格的にJavaScriptの本(ニンジャ本)を買って勉強し始めて3ヶ月ちょい経った。*1 実際にフロントエンドのコードを書いたり、jQueryを使ってDOM操作を行ったり、Ajax使ってみたりした程度で、まだまだ学び中。しかし学…

Riot.js + Firebaseで簡単なチャットアプリを作ってみた

リアルタイムでのデータ同期が特徴のバックエンドサービスFirebaseを利用してみたく、 ちょうどRiot.jsを使ってアプリも作ってみたかったので、勢いでチャットアプリを作ってみた。 今回はトランスコンパイルではなくプリコンパイルしてるので、.tagファイル…

アルゴリズム問題 ~本の延滞料金~

問題 今回の問題はこちら。 本の返却日と返却期限から延滞料金を計算する というもの。 ルールはこちら。 返却日と返却期限の文字列配列を渡される 日付の文字列はdd mm yyyyの形式(半角スペース区切り) 返却期限を過ぎていなければ、0円 年・月が一緒であ…

1-100までの和の計算をできるだけ短く、3つの異なるプログラム言語で書いて遊ぶ

先日仕事の休憩中にこんなものを見つけて、 社内のチャットツールで「面白い記事を発見しました!」とページのリンクを貼っつけたところ、 結構盛り上がりまして、自分たちも色んなクソコードを書いてみんなで評価するという一幕があった。(←仕事しろw) 今…