関数型言語のことなんて知らなくても、ただそこに便利な関数があるので使っていきましょうというお話です。 LodashやRamdaには、リスト操作やオブジェクト操作に関する便利な関数がたくさんあります。 ["a", "b"] と [1, 2] から { a: 1, b: 2 } を作る処理を思い浮かべてください。 何も知らなければforループを使って書いたりしそうですが、_.zipObjectやR.zipObjを知っていればこれを使うだけでできてしまいます。 以下で、Clojureのclojure.coreにあるよく使う関数を中心に、Lodash, Ramdaを使ったときにどうやって実現できるのか調べてみました。 調べてみた感想としては以下のとおりです。 JavaScript標準の関数ではまだまだ不足している部分が多く、LodashとRamdaは一長一短 Lodashは副作用がある関数（対象オ

Deno ver 1.0 5月13日、Deno v1.0の正式リリースが決定しました。 少し勉強してみましょう。 ↑ かわいい Denoってなに？ DenoはNode.jsの製作者であるRyan Dahlによって作られました、新しいJS/TSランタイムです Denoはdefaultで安全です（許可なしではファイル・ネットワーク・環境にアクセスできません） DenoはTypeScriptがビルトインで入ってます 外部パッケージはurlでインポートできます（Goみたいに） ディーノって読むらしい（デノではない） Denoが作られた背景 一年前くらいにこの動画を見たことを思い出しました。 Node.jsの作者であるRyan Dahlが、Node.jsを開発した当時の仕様を後悔する旨の動画です。 https://www.youtube.com/watch?v=M3BM9TB-8yA&t=1319s

2020年5月30日紙版発売 髙木健介，ユタマこたろう，仁田脇理史　著 A5判／688ページ 定価4,378円（本体3,980円＋税10%） ISBN 978-4-297-11391-9 ただいま弊社在庫はございません。 Gihyo Direct Amazon 楽天ブックス 丸善ジュンク堂書店 ヨドバシ.com 電子版 Amazon Kindle ブックライブ 楽天kobo honto 本書のサポートページサンプルファイルのダウンロードや正誤表など この本の概要 「iOS/Androidの2つのアプリをもっと効率良く開発したい」 「ハイブリッドアプリだと，速度やUIがネイティブより劣ってしまいがち」 こんな課題は，React Nativeを使えば解決できます。 React Nativeは，iOS/Androidの両方のアプリをたった1つのスキルセットで開発できるJavaScriptライブラ

Spring BootによるAPIバックエンド構築実践ガイド 第2版 何千人もの開発者が、InfoQのミニブック「Practical Guide to Building an API Back End with Spring Boot」から、Spring Bootを使ったREST API構築の基礎を学んだ。この本では、出版時に新しくリリースされたバージョンである Spring Boot 2 を使用している。しかし、Spring Boot3が最近リリースされ、重要な変...

この記事は、ウェブ技術の開発者（Java, PHP, Ruby, Go... 全て含む）のうち、少しでもJavaScriptを触ったことがあるけど、現代ウェブフロントエンドというか、特にウェブアプリケーション —— React, Vue, Angular など—— が分からない人に向けて、たったひとつの理解方法を提示するものです。 追記: ちなみに果てしなくどうでもいいですが、今回の記事が記念すべき100記事目らしいです。（Noteさん！その手のヤツはいっそ自動で記事にバッヂを表示するとかしてくれるとうれしいです！） 対象読者は、Java, PH(以下略）などのコードと一緒に、ほんの少しでもJSのコードを触った、見たことがあるというレベル感の人なので、既にReact, Vue, Angular などでガリガリコードを書いている人は対象ではありません。 あとホームページ屋さんとかウェブコーダ

↓新作もよろしくやで！ ジェネリクスをもう少しだけ使いこなす。 コロナウィルス対策でリモートワークしてみたらReduxやVuexのメリットが分かった 36歳ザコーダーの休日 ワイ「何やこのコード、全然動かへんやん」 ワイ「怖いな～怖いな～…なんか嫌だなあ～」 よめ太郎「（何で自分が書いたコード見て稲川淳二みたいに怯えとんねん・・・）」 よめ太郎「（そんな鳥肌立つようなクソコード書いてんのかいな・・・）」 娘（4歳）「ねぇ、パパ」 ワイ「なんや、娘ちゃん」 娘「ちょっと、作ってほしい関数があるの」 ワイ「またかいな」 ワイ「娘ちゃんはホンマに関数が大好きやなぁ」 ワイ「しゃあない、パパはプログラミング苦手やけど、頑張って作ったるわ」 娘「ありがとう、パパ」 今回の要件 ワイ「ほんで、今回はどんな関数を作ればええんや？」 娘「えっとね」 娘「'あ'という文字列を渡したら」 娘「['あ', 'あ

こんにちは。バックエンドエンジニアの西尾です。 スペースマーケットではAPIサイドは主にRailsを利用していますが、最近は一部サービスでNode.js+Typescriptを使い始めました。 個人的にはまだ触れていなかった領域であったのでお勉強がてら簡単なコードを書いてみたいと思っていました。 また、Node.jsの他にもう一つ最近気になり始めていたものにClean Architectureという設計思想があり、Clean Architecture 達人に学ぶソフトウェアの構造と設計を読んでいます。 本の概要は、アプリケーションが成長するに従い徐々に改修コストが上がってしまう、これを防ぐためにはうまい方法、つまり良い設計を知っている方法があるという導入から始まり、設計の歴史、原則とそれを実現するための１手段としてClean Architectureという設計思想について語られています。

新人「先輩、TypeScriptのコーディングできました！」 先輩社員「どれどれ」 先輩社員「いやそこら中コンパイルエラーだらけ...なのは型システムが働いてる証拠だ！」 先輩社員「そうだろ？」 先輩社員「型は...ガードレールだ」 先輩社員「進むべきじゃない場所へ進もうとしたら、ちゃんとブロックしてくれる...」 （ぺこぱ風） ってことで、静的型付言語って良いですよね。 今回はTypeScriptを使ってみて嬉しかったことを書いてみます。 登場人物 ワイ・・・ワイ（36歳） 社長・・・社長 ハスケル子・・・インターンの中学2年生 今日から新しいプロジェクト開始 社長「おーい、やめ太郎、ハスケル子ちゃん」 社長「新しいお仕事を獲得してきたで」 社長「技術記事投稿サイトを作る案件や」 ワイ「おお〜、さすが社長はんや」 社長「おおきにやで」 社長「ほんで、そのお仕事の話なんやけど」 社長「クラ

はじめに 近年徐々に複雑になるwebフロントエンドの状態管理の仕組みとして、ReactやVue.jsといったwebフロントエンドフレームワークのお供にReduxやVuexと言ったライブラリを組み合わせて使うことが多いと思います。 それら二つのライブラリは、Elmという高品質webフロントエンド構築のための関数型AltJSが用いているThe Elm Architectureと呼ばれるアーキテクチャに影響を受けて作られました。 追記: ReduxとElmの時系列はReduxの方が先であり、しかしながら状態のimmutableなどは影響を受けていることから、 現在の形のReduxはElmに影響を受けている所がある。 という表現が正しかったようです。 コメントありがとうございます。 参考 Vuexとは何か？｜Vuex reduxjs / redux Elmの型システムや見た目は非常にリーダブルであ

この記事では面倒なので名前に .js が付いているものは省きます。例えばNext.js は Next と表記します。 まず結論から日本ではVueはReactと二分する人気があるように観測されますが、世界的な数字で人気・シェアを見るとReactが圧倒的です。 シェアだけで見るとAngularとAngularJS（Angular系の1.x系）の合計値はVueよりも高いですが、「今後はもう採用したくない」と考える率が高く、Angular/AngularJSの人気が低下しているということは間違いありません。 ※追記: Angularのシェア、人気度に関しては、Angular及びAngularJS両方を含む数値であり、AngularJSとAngularは別物であるものが混ざってカウントされているため、Angularのシェア及び人気度はあやふやかもしれません。他の数値に関して信頼性を疑うべきかどうかは

こちらの記事は、Indrek Lasn 氏により2018年 3月に公開された『 TypeScript — JavaScript with Superpowers — Part II 』の和訳です。 本記事は原著者から許可を得た上で記事を公開しています。 著者Twitter https://twitter.com/lasnindrek Enum(列挙型)を使用すると、わかりやすい名前で値をグループ化できます。 例えば名前のリストがあるとします。するとEnumの構造は次のようになります: そしてそのEnumからこのようにして値を取得できます: でも待ってください...値のインデックスを表す整数が返されています。配列と同じくEnumはメンバーのインデックスは0から始まります。 0ではなく"Indrek"という値を取得するにはどうすればよいのでしょうか？ 値が文字列として表示されているのに注目して

みなさん、Optional Chaining使ってますか？　私は先日出たTypeScript 3.7 Betaを小さいプロジェクトに導入して使ってみました。これはとても快適ですね。 例によって、Optional ChainingはECMAScriptに対するプロポーザルの一つです。つまり、もうすぐ入りそうなJavaScriptの新機能です。プロポーザルはたくさんの種類がありますが、その中でもOptional Chainingはその高い有用性からこれまで多くの注目を集めてきました。Optional Chainingは2019年6月のTC39ミーティングでStage 3に上昇し、いよいよ正式採用が近く期待も高まってきたところです。TypeScript 3.7にも導入されたため、TypeScriptユーザーの方々は11月上旬に正式リリースが予定されているTypeScript 3.7を今か今かと待

「TypeScript」とは、JavaScriptに「型」を指定できるオープンソースのプログラミング言語です。型によりプログラム実行前にエラーを見つけ出すことができるため、大規模なプロジェクトを安全に開発できます。Microsoft社製で、多くのフロントエンドエンジニアに採用されています。 TypeScriptのモダンなビルド環境を作るためにはwebpackやGulp.jsがよく使われていますが、設定ファイルが必要で学習コストは高めです。「TypeScriptのビルド環境がほしいだけなのに、なぜツールの設定に時間をとられるのか？」「TypeScriptを始めるときに苦労したくない」と思っている人も多いのではないでしょうか？ 「Parcelパーセル」というツールを使うと、独自の設定ファイルを使うことなくTypeScriptのモダンなビルド環境がわずか3ステップで作れます。 ▼ TypeScr

もともとは動的なWebサイト開発のために仕方なく(※もちろん人による)書かされていた感のあるJavaScriptですが、ES6以降の進化はめざましく、表現力の高さは他の言語に全く引けを取らないようになりました。 V8エンジンによるパフォーマンスの恩恵も相まって、私はWeb用途以外にもちょっとしたスクリプトを書く時などにも積極的にNode.jsを活用しています。 一方でかつてのJavaScriptのイメージから食わず嫌い的に避けてしまったり、そもそもJSや周辺エコシステムの進化に関心がない人も多く見られます。 そこで今回は「どうすればNode.jsの敷居を低くして、便利さを知ってもらえるか」の観点から役立ちそうな知見をまとめてみました。 動的型付けなのにかなり早い 詳しくは各ベンチマークの結果を見ていただければ分かりますが、Node.jsは動的型付け言語としてはかなり実行速度が早い部類に入り

ESLintはJavaScriptのソースコードを静的解析するツールです。 Lintツールはソースコードの書き方を統一したり、静的解析の段階で問題になりそうなコードや、明らかなバグを見つけるのに役立ちます。 .eslintrc.json ESLintの実行には設定ファイルが必要です。 これは「--init」で作成できます。 $ npm install --save-dev eslint $ npx eslint --init ? How would you like to use ESLint? To check syntax and find problems ? What type of modules does your project use? CommonJS (require/exports) ? Which framework does your project use? N

こちらの記事は、2019年1月に公開された『 What Does Vue 3.0 Mean for Web Development? 』の和訳になります。 本投稿は転載であり、本記事はこちらになります。 補足: Vue3.0は2019年内もしくは2020年の初めにリリースされると予測されています。 2019年9月時点ではまだv2.6.10であること、ご留意ください。 はじめに 昨年11月、VueのクリエーターであるEvan Youは、Javascriptフレームワークの最新版となるVue 3.0の主要アップデートを紹介しました。 今回のアップデートによってVueはより効率的で、モジュール化され、さらに使いやすくなりました。 これらの変更と、Vue 3.0のリリースによる影響について説明します。 Vueの現在の状況は？ 彼らによると、Vueは「ユーザーアプリケーションを構築するためのプログレ

TypeScript 2.8で追加予定のConditional型とinfer prefixが開発版でリリースされたので型レベル関数と念願のRequired/DeepRequired型を作って型レベルプログラミングを可能にする。 型レベル関数 Conditional型はUnion型を展開するためEq<false, boolean>の結果はその非決定性からbooleanとなる。決定的な結果を返す関数はboolean型にのみ用意しておりDEq<false, boolean>はundefinedとなる。 type Falsy = undefined | false | 0 | '' | null | void; type Function = (...args: any[]) => any; type Class = new (...args: any[]) => any; export type

ライブラリの場合は「拡張に対して開いている」ほうが良いので、Interfaceのほうがいいと考えているため。 A second more important difference is that type aliases cannot be extended or implemented from (nor can they extend/implement other types). Because an ideal property of software is being open to extension, you should always use an interface over a type alias if possible.

こんにちは。 印刷のラクスルでフロントエンドを担当している菅野です。 現在、稼動中のとあるプロダクトへのTypeScript導入を進めています。今回は、既存プロダクトへの影響を最小限に留めつつTypeScriptを導入する手順をご紹介します。 TypeScriptとは TypeScript - JavaScript that scales. TypeScriptは、Microsoftが開発したオープンソースのプログラミング言語です。 詳細な説明は省きますが、以下のような特徴があります。 JavaScriptの厳密なスーパーセット(≒上位互換) 省略可能な型システム クラスベースのオブジェクト指向 TypeScript導入にあたって 今回TypeScriptを導入することで、以下のようなメリットがあります。 型システムの恩恵が得られる エディタの入力補完を受けられる コード=ドキュメントとい

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert