サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
買ってよかったもの
jsstudy.hatenablog.com
プログラミングの初心者が、短期間でWebサイトの作成方法を学ぶには、どのような順番で勉強していけば良いでしょうか? 今回は、基本となる技術要素を検討してみます。 Webサイト制作に関わる知識はたくさんありますが、まずは基本となる骨格を作り、さらに周辺の知識を肉付けしていけば、時間の短縮になると思います。 1周目:基本 1周目のWebデザイン 1周目のWebプログラミング 1周目のWebサーバー管理 2周目:肉付け 2周目のWebデザイン 2周目のWebプログラミング 2周目のWebサーバー管理 3周目 分類の方法にも拠りますが、Web開発には主に3つの分野/技術要素があります。 Webデザイン Webプログラミング Webサーバー管理 それぞれに必要となってくる知識を見てみましょう。 イラスト図解式 この一冊で全部わかるWeb制作と運用の基本 作者:NRIネットコム株式会社,小出修平,塚田
プログラミングの上達方法について、はてなブックマークで話題になっていました。 b.hatena.ne.jp またこいつか! コンピューターサイエンス(CS)とは? CSの独学方法 定番のタネンバウム本 CSの必要性 初心者に役立つプログラミング学習方法 設計の定番 まとめ またこいつか! 記事の執筆者は炎上商法の方でした。 (以前ブコメで絡まれたことがあるので覚えていましたw) ↓↓↓ オブジェクト指向って便利なの? - JavaScript勉強会 うへええええ継承による差分プログラミングとか現代に言わないでくれよ。しかも「JSはプロトタイプベースのOOP」を初めとして間違いが多いぞ 2017/03/27 09:42 b.hatena.ne.jp 逆にブコメの間違いを指摘したら、ブコメを非公開にして逃げられました。 jsstudy.hatenablog.com jsstudy.hatena
はてなブックマークで便利なWebサービスが話題になっていました。 https://anond.hatelabo.jp/20200525021541 anond.hatelabo.jp 記事のトラックバックやブックマークのコメントが参考になりました。 https://b.hatena.ne.jp/entry/s/anond.hatelabo.jp/20200525021541 b.hatena.ne.jp 知らないツールやWebサービスもあったので、良さそうなのをメモ。 情報収集 ウェブ魚拓 RSSリーダー hckr news ノイズレスサーチ 情報整理 start.me 検索デスク Myfaves IFTTT RAINDROP.io Zotero tagtory 情報交換 IRCCloud Trickle Discord タスク管理 Zenkit Habitify 作業の自動化 Zapie
モダンなJavaScriptの要点について紹介された資料がありました。 speakerdeck.com 要点 アロー関数 クラス 非同期処理 各機能の利便性に注目 要点 モダンJavaScript再入門 / Re-introduction to Modern JavaScript - Speaker Deck [JavaScript] [入門] ?slide=12 アロー関数 ・関数の理解はモダンJS理解への近道 ・functionの必要性が減っている / ?slide=15 クラス ・prototypeのことは忘れよう / ?slide=27 非同期処理とは? ・モダンなWebフロントエンド開発には必須の知識 2019/11/02 13:05 b.hatena.ne.jp アロー関数 関数の理解はモダンJS理解への近道 functionの必要性が減っている クラス prototypeのこ
関数型プログラミングの理解を深めるために、OCamlの本を読んでいます。 プログラミングの基礎 (Computer Science Library) 作者: 浅井健一 出版社/メーカー: サイエンス社 発売日: 2007/03/01 メディア: 単行本 購入: 17人 クリック: 409回 この商品を含むブログ (127件) を見る 「簡約」について調べていたら、分かりやすい説明の記事がありました。 tarao.hatenablog.com ラムダ計算は, 多くのプログラミング言語, とくに関数型言語の原形になっています. ラムダ計算について理解しておくことは, 多くのプログラミング言語の習得に役立つでしょう. ラムダ計算はチューリング完全で, 計算能力としてはふつうのプログラミング言語と同じです. ラムダ計算で計算を書く訓練をしておくことは, 任意の計算を関数のみを使って(他の制御構文を
「JavaScript関数型プログラミング」を読んでいたら、意味がよく分からない用語が出てきたのでメモ。 jsstudy.hatenablog.com レンズ (p.48) レンズ(Lenses)と呼ばれる関数型のアプローチ レンズは、オブジェクトの変更を普遍的に一括管理する最良の選択肢です。 (純粋な)関数参照とも呼ばれるレンズは、状態を持つデータ型の属性を不変的にアクセスし操作できる関数型プログラミングのソリューションです。 レンズの内部的な動作はコピーオンライトに似ており、状態の管理と複製を適切に処理できる内部ストレージコンポーネントを利用しています。 しかし、レンズを自分で実装する必要はありません。 関数型JavaScriptライブラリRamdaの実装を利用できます。 JavaScriptでデータを可変ではなく不変で扱いたい場合、Ramda.jsという関数型ライブラリーのLensと
無料のSSL証明書発行サービスのLet's Encryptは便利ですが、証明書の有効期限が短いです。 自動的に更新する設定にしていたつもりが、何らかのトラブルによって自動更新されていなかった場合は、緊急措置として手動で更新する必要があります。 Let's EncryptのSSL証明書を手動で更新する方法をメモしておきます。 Let's Encryptとは? Let's Encrypt - Wikipedia Let's Encrypt(レッツ・エンクリプト)は、2016年4月に正式に開始された認証局である。 自動化された発行プロセスにより、TLSのX.509証明書の発行を無料で行っている。 letsencrypt.org 手動で更新 (参考)以下のページを参考にしました。 programmingnavi.com 作業の準備 SSHでWebサーバーに接続します。(CentOS+Nginxを使
はてなブックマークを見ていたら、とんでもなくスゴイ人がいました! 量子コンピューターを開発しているMDR株式会社の湊 雄一郎(みなと ゆういちろう)さんという方です。 qiita.com Googleの持ってきた資料には衝撃を受けました。たった一枚のスクリーンショットと、その下に簡単な一行の数式だけです。 しかし、その資料は見れば誰もが納得するもので断る人は少ないだろうなと感じさせるものでした。前日に時間をかけて資料作りに悩むいっぽう、こんな簡単な資料と数式でクライアントのほとんどを納得させられるとしたらこれはすごいことだと感じ、自分の中で考え方が大きく変わりました。 それから、自分はシステム自体だけでなくその背景に動くアルゴリズムを改善し、同じものでもより高速で精度の高い効率的なものを作った方が勝つのだと感じました。 twitter.com mdrft.com プログラム・マネージャー補
JavaScriptでマインドマップのようなグラフを描画するライブラリーを探してみました。 有向グラフとは? グラフ理論 - Wikibooks グラフ理論におけるグラフ (Graph)とは、頂点(node)と辺(edge)により構成された図形のことである。 グラフは主に、有向グラフ (directed graph)と無向グラフ (undirected graph)の2つに分類される。 有向グラフとは、頂点と向きを持つ辺(矢印)により構成されたグラフであり、無向グラフとは、頂点と辺により構成されたグラフである。 統計的テキスト解析(6)~語のネットワーク分析~ マインドマップとは? マインドマップ - Wikipedia マインドマップはトニー・ブザン(Tony Buzan)が提唱した思考・発想法の一つ。頭の中で起こっていることを目に見えるようにした思考ツールのこと。 描き方は、表現したい
Ubuntuのテストサーバーにnodebrewをインストールしてみます。 nodebrewは、Node.jsのバージョン管理ツールです。 github.com nodebrewのインストール方法 Ubuntuのバージョンは、18.04LTSです。 curlコマンドを使う場合 Ubuntuのコンソール画面で、次のコマンドを入力します。 $ curl -L git.io/nodebrew | perl - setup wgetを使う場合 これでうまくいかない場合は、別の方法で試してみます。 (いったん、Perlのスクリプトファイルをダウンロードする。その後Perlで実行する。) $ wget git.io/nodebrew $ perl nodebrew setup Windows10上にVagrantで入れたUbuntuの場合、仮想マシン内部から外部へのインターネットアクセスがおかしくなる場
はてなブックマークを見ていたら、JavaScriptの教材が紹介されていました。 「現代のJavaScriptチュートリアル」という学習サイトです。 ja.javascript.info 目次 パート1 JavaScript言語 1 導入 1.1 Javascript 入門 1.2 コードエディタ 1.3 開発者コンソール 2 JavaScript の基礎 2.1 Hello, world! 2.2 コード構造 2.3 モダンなモード, "use strict" 2.4 変数 2.5 データ型 2.6 型変換 2.7 演算子 2.8 比較 2.9 対話: alert, prompt, confirm 2.10 条件演算子: if, '?' 2.11 論理演算子 2.12 ループ: while と for 2.13 switch文 2.14 関数 2.15 関数式とアロー 2.16 Java
Linuxには、さまざまなディストリビューションがあり、選択肢が豊富です。 普段、サーバー用のLinuxにはCentOS(RedHat系)を使っています。 CentOS - Wikipedia CentOS(セントオーエス)は、Red Hat Enterprise Linux(RHEL)との完全互換を目指したフリーのLinuxディストリビューションである。 CentOSを選んでいる理由は特になくて、「VPSのデフォルトOSとして推奨されていたから」程度ですw VPSチュートリアル – さくらのVPSニュース チュートリアル:CentOS 7(さくらのVPS)サーバ作成直後に設定しておくべき初期セキュリティ設定 – さくらのVPSニュース 一方、デスクトップ用のLinuxは、Ubuntu(Debian系)を使っています。 Ubuntu - Wikipedia Ubuntu(ウブントゥ)はDe
「Webプログラミングが面白いほどわかる本」という本を参考にして、Windows10にUbuntu 18.04LTSをインストールしてみました。 Webプログラミングが面白いほどわかる本 環境構築からWebサービスの作成まで、はじめからていねいに (N高校のプログラミング教育) 作者: 吉村総一郎 出版社/メーカー: KADOKAWA 発売日: 2018/06/22 メディア: 単行本 この商品を含むブログを見る この本は、カラー図解で丁寧に操作手順が説明されており、とても分かりやすい本でした! Ubuntuの利用方針 登場するツール VirtualBoxの用意 VirtualBoxとは? VirtualBoxのインストーラーをダウンロード VirtualBoxをインストール Vagrantの用意 Vagrantとは? Vagrantのインストーラーをダウンロード Vagrantをインスト
Webサイトをどうやって作っているか?を調べるツールがありました。 「Wappalyzer」というツールです。 www.wappalyzer.com Wappalyzerは、ChromeやFirefoxのプラグインとして提供されており、インストールすると使えます。 ブラウザーでWebサイトを閲覧したとき、Wappalyzerのアイコンをクリックすると、そのWebサイトで使われているソフトやサービスなどが表示されます。 (例)はてなブックマークを見たときは、以下のような内容が表示されました。 Webサーバーソフトは「Nginx」、キャッシュソフトには「Varnish」を使っていることなどが分かります。 これでいろんなWebサービスを調査してみれば、Webサイト制作の参考になりそうですね! Wappalyzerの参考情報 forest.watch.impress.co.jp www.leon-
Vue.jsの学習メモ。 jsstudy.hatenablog.com Vue.jsの基本的なコードを見ると、「el」というプロパティーがあるけど、これって何なんだろう?と思いました。 var app = new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } }) ↑この「el: '#app'」という部分ですね。 本ではサラッと説明されていて、いまいちピンと来なかったので、他の説明を調べてみました。 マウントする要素 まずは本書の説明です。 (p.43) オプションには使用するデータやメソッドを定義していきます。 var app = new Vue({ // (コンポーネントの)オプションをここに書く }) 基本的なオプションの構成 // 基本的なオプション構成(使用するデータやメソッド) var app = new Vue({
Vue.jsの本「基礎から学ぶ Vue.js」を読んでたけど、途中でやめてたので復習! 最初に読んだ部分を忘れたので、少し戻りますw jsstudy.hatenablog.com データをDOMに変換するのがVue.jsの役目 データ駆動、リアクティブ・プログラミング テンプレート、ディレクティブ データバインディング コンポーネント Vuex、Vue Router(コンポーネントの管理) データをDOMに変換するのがVue.jsの役目 (p.26) はじめてVue.jsを使う時に意識すべきなのが、画面を描画する構造の本体はDOMではなくJavaScriptのデータということです。 先にDOMが存在してそれを読み込んだり操作するのではなく、Vue.jsでは最初にデータが存在してそのデータ状態に適したDOMを構築します。 JSのデータを Vue.jsがDOMに変換して Webページの画面が描
テストサーバーにUbuntuをインストールしました。 Webサーバーを構築するための下準備を進めてみたいと思います。 ファイヤーウォール SSH Nginx SSL MySQL PHP Ruby パッと思いつくところは、こんなものでしょうか? Ubuntuのファイヤーウォール ufwとは? ufwの情報源 ufwの注意点 ufwの使い方 ufwのGUI「Gufw」 ufwのバージョン確認 ufwのインストール Gufwのインストール Gufwの起動 まとめ Ubuntuのファイヤーウォール CentOSの場合は、ファイヤーウォールとして「iptables」や「firewalld」が用意されています。 Ubuntuの場合は、「ufw」というツールが用意されていました。 ufwとは? himachannel.com Ubuntuで標準的に利用できるfirewall機能 Uncomplicate
Ubuntuでちょっとした画像編集するとき、どんなツールを使えば良いのでしょうか? 検索したら、「GIMP」「Pinta」といったソフトが推奨されていました。 bjkun2.blogspot.com krakenbeal.blogspot.jp GIMPは、Adobe Photoshopみたいに高機能なツール Pintaは、Windowsのペイントみたいに軽量なツール 今回は、ちょっとした画像編集をしたいだけなので、「Pinta」を使ってみます。 Pintaのインストール方法 Download - Pinta - PintaProject/Pinta Installing Pinta - Pinta - PintaProject/Pinta aptコマンドでインストールするには、 $ sudo apt-get update $ sudo apt-get install pinta とコマン
テストサーバーにUbuntuをインストールしましたが、Webサーバーの環境構築は、Docker等の仮想化技術を利用してみたいです。 Dockerで「コンテナ」を作ると、他のサーバーに「コンテナ」ごと移動させることができて、便利みたいです。 Dockerを使うに当たって、Dockerの勉強をしておきたいと思います。 Dockerの情報源 Dockerの仕組み Dockerのインストール Dockerの使い方 Dockerのコンテナ作成 Dockerの本 Kubernetes Dockerの情報源 公式サイト www.docker.com GitHub github.com Wikipedia Docker - Wikipedia Ubuntu用の無料版(Community Edition)のDocker docs.docker.com Dockerの仕組み www.publickey1.jp
パソコンでいろんなファイルを作成・更新するとき、古いファイルや新しいファイルの世代管理が必要な場合があります。 この世代管理を行うためのツールとして、Gitというバージョン管理システムがあります。 jsstudy.hatenablog.com 「わかばちゃんと学ぶ Git使い方入門」という入門書でバージョン管理を学んでみます。 SECTION 01 Gitで解決できること 世代管理とは? バージョン管理システムとは? Gitとは? Sourcetreeとは? SECTION 01 Gitで解決できること (p.26) Gitとは、バージョン管理システムである 簡単な操作で、変更ごとのバックアップをとることができる いつでも好きな時点に戻せる 各メンバーの修正と合体できる SECTION 01の内容は、Web版でも閲覧できます。 codeiq.jp 世代管理とは? 世代管理 - ASCII.
はてなブックマークで話題になっていたGitの入門書を買ってみました。 「わかばちゃんと学ぶ Git使い方入門」という本です。 わかばちゃんと学ぶ Git使い方入門〈GitHub、Bitbucket、SourceTree〉 作者: 湊川あい,DQNEO 出版社/メーカー: シーアンドアール研究所 発売日: 2017/04/21 メディア: 単行本(ソフトカバー) この商品を含むブログを見る 以前、本屋でパラパラと眺めたときは、「よくあるマンガ本かな?」と思った程度で正直印象に残ってなかったのですが、改めて見てみると入門書として良い本だと思いました。 sugamasao.hatenablog.com CHAPTER 4「実用Git 〜 こんなときはどうすればいい?」が目当てでした。 本書を購入するかどうか?の判断材料として、CHAPTER 4を確認したら良いかも。 目次 CHAPTER 1 G
最近、関数型プログラミングの基礎知識を学ぶことに時間を割いています。 きっかけは、「関数型プログラミングの基礎 JavaScriptを使って学ぶ」という本でした。 jsstudy.hatenablog.com Haskellに寄り道 「関数型プログラミングの基礎」を読んでいると、ちょいちょい「Haskell」の話が出てきます。 以前、話題になってたのでHaskellの本を読んでみましたが、そのときはあまりよく分かりませんでした。(使う場面もなかったですw) 改めて、「Haskellって何だったんだろう?」と思って読み返してみると、「なるほど、そういうことだったのか~」と新たな気付きが得られました。 自分のスキル不足のため、Haskellで実用的なアプリを作る機会はないだろうけど、それでもHaskellは良くできたパズルみたいなかんじで、ちょっとしたコードを書いて練習してみるだけでも楽しめま
Vue.jsの学習メモ。 今日は「JavaScript フレームワーク入門」の第4章を読んでみます。 jsstudy.hatenablog.com 4-3-2 Get/Setの作成 HTML CSS JavaScript 実行結果 Computedプロパティとメソッドの違い まとめ 4-3-2 Get/Setの作成 前回、Computedプロパティの使い方を練習しました。 (p.134) Computedプロパティは意外と簡単に作れます。 ただし、このやり方だと、値を取り出す場合はいいのですが、変更する方法が用意されてないことに気がつくでしょう。 Computedプロパティでも、値の設定を行うことは可能です。 computed: { プロパティ名 : { get : function(){……処理……}, set : function( 引数 ){……処理……} } } プロパティに直接メ
Vue.jsの学習メモ。 今日は「JavaScript フレームワーク入門」の第4章を読んでみます。 jsstudy.hatenablog.com 4-2-5 イべントとメソッドの利用 HTML CSS JavaScript 実行結果 v-on属性 まとめ 4-2-5 イべントとメソッドの利用 (p.125) テキストを入力などする場合、入力が完了したところでボタンなどをクリックし、処理を行うようになっています。 こうした「クリックしたら処理を実行する」という一般的なやり方もVueでは行えます。 これにはクリックのイべント処理の利用の仕方を覚える必要があります。 Vue.jsでイベント(ボタンのクリックなど)を扱う方法を見ていきましょう! HTML index.html <!DOCTYPE html> <html> <head> <title>Hello</title> <meta cha
次のページ
このページを最初にブックマークしてみませんか?
『JavaScript勉強会』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く