こちらの記事は、Max Savonin 氏により2020年6月に公開された『 When To Use Node.js as a Back-End 』の和訳です。 本記事は原著者から許可を得た上で記事を公開しています。 JavaScriptは、世界で最も人気のあるプログラミング言語の1つだ。 現在の状況ではライバルになれるのはPythonとJavaだけであり、コンピューティング市場で約8％のシェアを保持している。 Webに関しては、JavaScriptの地位はさらに一つ突き抜けている。 JavaScriptは、事実上、Chrome（またはその派生物）またはFirefoxブラウザーで使用可能な大部分のWebアプリケーションを強化している。 結局のところ、これらのブラウザはWebアプリケーション開発に特化して開発されてきた。 JavaScriptは私たちの生活のいたるところに存在しているのだ。

はじめに 個人的にアイデアを考えるのが好きで思いつくたびにメモしたりツイートしたりしていたのですが、大量にたまってきたのでまとめて共有しようと思います。 「勉強やポートフォリオ作成のためになんか作りたいけど、これといって作りたいものはないな」という方、ぜひご利用ください。 ちなみに著作権とか諸々の権利を主張する気は一切ないのでご自由にどうぞ。 ＊技術記事ではないので消すかもしれません。 カテゴリ別 ビジネス 会社の元社員と繋がれるサービス。現役の人からは聞きにくい質問、やめた理由等を聞ける。転職、就活生向け リファラル採用専門サービス 社長の位置情報を常に見れるアプリ。社員向け。社長がなんの仕事をしてるかわかる。 ペルソナを設定すると当てはまる人10人くらいとのインタビューを自動で設定してくれるアプリ。商品出すときインタビュー開いて探す手間を省ける 学部長とか社長とかに提言できる社内ツール

以下はVitor Paladini ( Twitter / GitHub / dev.to ) によるVS Code shortcuts that I would teach myself if I had a time machine with limited fuelの日本語訳です。 VS Code shortcuts that I would teach myself if I had a time machine with limited fuel 「やあ俺だ。黙って聞いてくれ。時間がないんだ。」 「待って待って、お前誰だ。どうやって部屋に入ってきた。あとどうして俺そっくりなんだ。」 「俺は未来のお前だ。ここまで来たのは、特別にVSCodeのショートカットを教えるためだ。さあいくぞ」 「正気か？ロト6の番号でも株式情報でもなく、わざわざVSCodeのショートカットを教えにやってきた

RESTful APIのリソース設計で述べた通り、何をリソースとするかを決めたらそのリソースを識別するURIを検討する必要がある。 エンドポイントとは何か エンドポイントとはAPIにアクセスするためのURIのこと。例えば、QiitaのAPIで自分の情報を取得する時のエンドポイントは以下となる。 http://qiita.com/api/v2/users/nagaokakenichi 似たような言葉に「エントリポイント」というものがある。エントリポイントとはプログラムやサブルーチンの実行を開始する場所のこと。 Qiita視点で考えると、 http://qiita.com/api/v2/users/nagaokakenichi を参照されることでプログラムが開始されるので、Qiitaからすると上記URIはエントリポイントとなる。 つまり、エンドポイントはAPIにアクセスする側からの、エントリポ

TypeScript全然わかんない... という状態から、プロジェクトに導入できるまでになんとかなったので、 学習の参考になったものなどをまとめて学習ロードマップを作成いたしました。 私自身もまだまだのレベルですが、これからTypeScriptを勉強したい!という方の道しるべになれば幸いです Level 0: TypeScriptってなんぞや？ まず学習する前に、その対象がなんなのか、を見極める作業です。 TypeScriptは altJS の１つです。 JSは元々大規模なコードを組むには不向きな設計になっているので、 altJSというメタ言語でラッピングすることで扱いやすくするものです。 altJSで他に有名なのはcoffeeScriptなどでしょうか。 TypeScriptはtypeと名乗っている通り、静的型付けを特徴としています。 また、jsと互換性があり、jsの上位互換（スーパセッ

最近Chrome DevToolsについて調べていて発見した便利機能を紹介します。 誰もが使える最高便利な開発マシンChrome DevToolsを使いこなして開発体験を変えましょう！ 1. $0で選択中のDOM要素の取得 特定の要素に何かしたいという時には、要素のIDやclassを確認してConsoleでdocument.querySelector("#xxx")で取得するというのが一般的だと思います。実はそれはカーソル選択と$0で代替できます。 Classや、IDがついていない特定のDOMを取得したい時とかにも使えるので地味に便利です。 手順 カーソルで取得したい要素を選ぶ Consoleタブで$0を入力 最近知ったChrome DevToolsの便利機能① $0 での選択中のDOM要素取得 Elementsタブで選択状態のDOM要素は、Console上で $0 を入力することで取得で

【JS/ Python両方OK!】「データ可視化」が歴史から実装まで体系的に学べるStanford講座の独習ノートJavaScriptd3.jsデータ分析データサイエンスcolaboratory CS 448B Visualization (2020 Winter)は、Maneesh Agrawala氏による、Stanford大で行われた、データの可視化に関する体系的な講義です。 スタンフォード大の"CS 448B Visualization (2020 Winter)" がすごい。 データ可視化の体系的講義。どう図表に変換するかの理論、探索的データ分析、ネットワーク分析等の実践と盛り沢山。 スライドに加え、Observable(JavaScript), Colab(Python)どちらでも例を試せる。https://t.co/lGyPElrihg pic.twitter.com/mWZn

このツイートを見て、「アプリで再ログインを頻繁要求されるってユーザビリティ良くないな。」と思ったのですが、普段裏側の仕組みは意識していなかったりテックリードの方に任せきりだったりしていたので、これを機に調べてみました。 そもそもスマホアプリ の時代、もはやauthenticationですらないと思うのよね。（何を言ってるかわからねえだろうと思うが。） — Hiromitsu Takagi (@HiromitsuTakagi) 2019年7月8日 この記事は「アプリでログインしっぱなしは、どのように実現されるの？」という疑問と調べた結果を共有するために書いていきます。 間違いや「もっとこんな仕組みが使われてるよ！」等のツッコミがあれば、どしどし貰えると助かります！ 疑問1. アクセストークンという仕組みとは？ 「なぜアクセストークンという概念が必要なのか？」 モバイルアプリでユーザー認証をし

はじめに 本記事では、constこそが唯一神であることを証明したあと、letを使いがちな場面でいかにしてconstを使うかをまとめていきます。なお、ES2018までの基本構文(reduce, async/await, 配列とオブジェクトのスプレッド構文)を使用します。「いや、reduceとかスプレッド構文とか難しいからlet使うわ」という方のために、便利メソッド詰め合わせであるLodashを使った例もご紹介します。もちろん、Lodashは機能に対してサイズが大きいライブラリであるため、フロントエンド開発でバンドルサイズを軽減したいという方などはLodashの例は無視し、Lodashを使っていない方の例をご参照いただければと思います。 追記：Lodashの使用について 「Lodashのコードにlet使われてるやん」というご指摘を多く頂いたので追記いたします。 誤解を招くタイトルにしてしまい申

とりあえず落ち着け。 みなさん、毎日なにかしらのコードを読み、開発する日々を送っていると思います。そんな中で、 糞コードは死ぬべきである！！絶対に直すべき！！ という感情に取りつかれてしまうことがあると思います。自分の技術力に自信のある人ほど、無理やりにでも直そうと試みると思います。それがどんな修羅の道か。そして、糞コード修正がどんな道を歩むのか。この記事では糞コード修正の罠とありがちなストーリーについて書きたいと思います。 ビジネスとしてのプログラムは本質的に糞である 例えば、「携帯電話の利用料金」のプログラムがあります。 「携帯電話　透明性高め料金値下げを」という記事もあるように世の中の携帯電話の料金プランはかなり複雑です。例えば、auだと「auでんき」といった電気料金とパックされた電話料金プランがあります。また、「auスマートバリュー」といったプランもあり、家のインターネット回線をa

こちらの記事は、Jonathan Saring 氏により2019年12月に公開された『 11 Must-Know FrontEnd Trends for 2020 』の和訳です。 本記事は原著者から許可を得た上で記事を公開しています。 ランチ中のフロントエンドトークでスマートに見られる方法！ チームのランチトークでスマートに見られることは、最新のフロントエンドのトレンドを常に把握しておくための大きな理由であることは言うまでもない。 それは、あなたがより良い開発者になり、より良い技術とより良い製品を作るのに役にたつかもしれない。 たぶんね。 だから、いくつかの興味深い方向を示すことで、この名誉あるクエストを君が簡単に達成できるように少し時間をもらいたい。 すべてのコンセプトについて1から10まで説明するのではなく、そのコンセプトとそれがどのように有用であるか紹介しよう。最後にはさらなるリソー

『まず触ってみて』Vueで使えるCSSアニメーションまとめ１１０選！【完全オリジナルだからコピペOK】CSSアニメーション初心者Vue.jsフロントエンド コピペだけで作れるマテリアルデザインを個ご紹介します。 box-shadow, filter, transform,などをふんだんに使っており、transitionで滑らかな動きが表されています コードには説明もわかりやすく書いてあるのでかなり参考になります Webデザイン初心者の方はもちろんですが、バックエンドエンジニアの方にもとても助かる内容になっています １. シンプルなスライダーマテリアルデザイン３選 そのまま使えるスライダーアニメーションのマテリアルデザインとなっています transition-durationを使っていてわかりやすく説明もされているのでかなり重宝します ２. filterとopacityを使いこなすスライダー

はじめに 私は、不完全な人間です。 人より劣っているところ、弱みもたくさんあります。 しかしながら、なんとか、今日までエンジニアとして生きていくことができました。 私がこれまで、劣等感とどう折り合いをつけてエンジニアとして生きてきたか、説明したいと思います。 この記事で最も言いたいことは「不完全な自分を認めながら、でも、自分の成長の可能性を失わない」ということを伝えたいです。 劣等感にまみれたエンジニア人生 ふりかえると、劣等感にまみれたエンジニア人生でした。 「自分はダメなエンジニアなんだ…」 という想いが、思考の隅につきまといながら、なんとか生きています。 思い返せば、この想いの最初のきっかけは、新人時代に先輩社員にコードレビューの指摘で、叱咤された事でした。 「こんなことも知らないの」 「コードを書く才能がないんじゃない」 「…あぁ、もう、いいから、こっちで修正しとく。いいよ。さわら

複数のクラウドサービスを利用している（マルチクラウド）など、単純には閉域網を構築できない環境でマイクロサービスアーキテクチャを採用する場合には、サービス間の認証認可が必要となる。この場合のサービス間の認証認可方式を決める参考となる、OSSやSaaS、Webサービスで採用方式ついて整理した。 Istio サービスメッシュの実装として有名なIstioではサービス間通信を以下のように制御できる。 Istioの認証認可では認証主体がService Identityというモデルで抽象化され、KubernatesやIstioで定義するService Accountに加えて、GCP/AWSのIAMアカウントやオンプレミスの既存IDなどをService Identityとして扱うことができる。 サービス間の認証 (Peer Authentication) は、各サービス (Pod) に設置するSideca

とある休日 娘（5歳）「パパ、一緒に技術ブログを始めない？」 娘「昔から私とパパがローカルに書き溜めてる技術記事が、かなり溜まってきたでしょ？」 娘「それをブログとして公開してみようよ」 ワイ「おお、それは楽しそうやな」 ワイ「どこのブログサービスを使おうかいな」 娘「せっかくなら、ブログシステムから自分たちで作ってみようよ」 娘「私はフロントエンドを担当するから」 娘「パパはRuby on Railsか何かで、APIを作ってよ」 ワイ「おお、Ruby on Railsなら昔やったことあるわ」 ワイ「RailsのAPIモードで、ブログ記事を返すエンドポイントを作ればええんやな」 娘「そうそう」 次の日 ワイ「API、できたで！」 ワイ「/api/articlesっていうエンドポイントにアクセスしてくれたら」 ワイ「ブログ記事が取得できるようにしておいたわ」 娘「さすがパパ」 娘「そういえば

皆さんは Web ページのスクレイピングって書いた事ありますか？私はあります。だってどんなに平和で平穏な生活を送っていても数年に一度はスクレイピングってしたくなりますよね。「うわーまじか！API ないのかよ…。」的な。 そうしたら HTTP クライアントと HTML パーサのライブラリを探してきてインストールした上でごりごり書くことになると思います。でも実際に書いてみると、そうやってライブラリのインストールをしたりサンプルコードで動作確認している時間よりも、HTML を解析して実際にパースしたところから対象の要素を取得して欲しい値を取り出す試行錯誤の時間の方が長かったっていう事はないですか？ 今日ご紹介する Node.js でお手軽スクレイピングは、その辺の試行錯誤の手間を極力減らすことが出来る方法です。2020 年夏の最新版です。 まずは環境から。特に古いものを使う理由もないので 202

🚀 Super excited to announce: ♿️ React Aria — Accessible UI primitives for your design system. 👑 React Stately — State and core logic for your design system. 🌈 React Spectrum — Adobe’s design system. Learn more: https://t.co/ucVguh3rqp Github: https://t.co/e8aOfLgCVK — Devon Govett (@devongovett) July 15, 2020 7月15日にAdobeのデザインシステム react-spectrum がリリースされました。 デザイン製も優れていますが、他の部分でのクォリティーが個人的にショックだった

2020年後半版Vue.jsを使ってる人には必ず知っていてほしいVue.jsの武器とドキュメントに書かれていないコンポーネントやメンテナンスの際に役立つTipsJavaScriptTypeScriptVue.jsフロントエンドvue-cli はじめに 最近iCAREさんの所でVue.jsを一緒にやらせていただいているのですが、フロントの技術スタックがGraphQL + Vue.js + TypeScriptで開発しており、そこでのVue.jsの開発体験がかなり良く、iCareさんの詳細なノウハウを公開しても良いと言っていただけたので、言語化し、整理して、共有出来たらと思います. ※ いつも通り記事の内容に意見がありましたら直接編集リクエストをください 前置き 今回のサンプルは@vue/cliを利用し、プリセットはTypeScriptだけいれときました. versionは2020年7月16日

2020/07/17: いくつか追記しました はじめに 私は、TechTrainでフロントエンドのメンターとして面談する中で「最近フロントエンドの勉強を始めました！」という方や、フロントエンドエンジニアを目指す学生と話す機会が何度もあります。 その中でよくある質問が 「フロントエンドの情報収集ってどうしてますか？」 です。 何度も質問を貰うので、気になる人は多いのかなと思います。 この記事では「私がどんな風に情報収集しているか」を紹介しようと思います。主に情報収集の流れと、どこからフロントエンドの情報を集めているかについてです。 情報収集の流れ まずは情報収集の流れとして主にプロセス的な観点で整理してみます。 私の情報収集を抽象化すると以下の3つのプロセスがあると思います。 情報源から情報を集める(ex: Twitter, Blog, Qiita) 特定の場所に情報を溜める(ex: はてな

続編を書きました。CSSも大幅改善してるので、一度見てみてください。 【小数点実装】「(HTML +) CSS」のみを使って、今「もっとリアルな電卓」を作ってみた - Qiita 完成品 まずは、CodePenで完成品を紹介します。ボタンを押して計算を試してみてください。 ※ スマホだと反応が悪い場合があります。 See the Pen qiita_calc_last by j5c8k6m8 (@j5c8k6m8) on CodePen. はじめに はじめて、CSS カウンター の存在をはじめて知ったときは驚きました。 テーブルの行番号は (必要であればJavaScriptで動的に) HTMLに記載するしか方法がない と思っていたからです。 Qiitaにも、CSSカウンターのサンプルを載せた良記事があります。 CSS でテーブルに行番号を振る - Qiita CSSで見出しタグに連番をつけ